Use efficient CSS selectors
Use efficient CSS selectors – Verimli CSS seçiciler kullanmak. Page speed eklentisinde karşımıza çıkan bu uyarı mesajının çözümü için ne yapmalıyız? CSS yazım kuralını en yalın haliyle şu şekilde özetleyebiliriz seçici{tanım:değer;}
Buradaki seçici; tanımlanan değerin nereye uygulanacağını belirtir. Mesela bu alana bir div ismi verilebilir. Tanım; ise ilgili alana verilecek özelliğin başlığını verir. Son olarak değer ise; tanımın hangi değeri alacağını bildirir. Bir CSS komut satırı şu şekilde dizilebilir. “#header{margin-left:10px;”
Use efficient CSS selectors uyarı mesajı aldığımız satırları incelediğimizde, aynı komut içinde birden fazla seçici kullanıldığını görebiliriz. Twenty Ten temasını analiz ettiğimizde bu konu ile ilgili bir çok uyarı vardır.
Use efficient CSS selectors örnek
Bu konuyu çok kısa bir şekilde örneklendirelim. Ama önce CSS hakkında birkaç detay daha vermek istiyorum. CSS seçicileri 3 kurala göre tanımlanabilir. Universal, “# tag” ve class. Universal seçici tüm site için geçerli bir kuraldır. “#” ismini aldığı tüm div’i etkiler. “.class” ise ismi verilen satır için geçerli olabilir. Aşağıdaki örneği incelediğinizde konu pekişecektir.
#div4 {
border: thin dotted #0F0;
}
#div4 ul li {
font-style: normal;
color: #0CF;
}
#div4 ul ul li {
text-decoration: line-through;
color: #F00;
}
Yukarıda Use efficient CSS selectors için basit bir örnek mevcut. Soldaki CSS ile sağdaki HTML görüntüsünü alabiliyoruz. Page Speed ile analiz edildiğinde aşağıdaki uyarı mesajlarını alacağız.
#div4 ul liTag key with 2 descendant selectors#div4 ul ul liTag key with 3 descendant selectors
Buradada görüldüğü gibi CSS kuralını belirleyebilmek için 3 adet seçici kullandık. Browser bu satırı okurken ve yorumlarken zaman kaybı maximum olacaktır. Bu sorunu giderebilmek için div4 içindeki ul ve li bölümleri için “.” ile class tanımlayacağız ve HTML kodları içinde ilgili alana class=”ilgili_alan” ibaresini ekleyeceğiz.
#div4{border:thin dotted #0F0;}
.mor{color:#F0F;}
.blink{text-decoration:blink;}
.underline{text-decoration:underline;}
.alt_liste{text-decoration:line-through;color:#F00;}
Bu işlemden sonra HTML sayfa görüntümüzde herhangi bir değişiklik olmayacak. Ancak; CSS seçicilerini verimli bir şekilde kullandığımız için Page Speed analizinden aldığımız “Use efficient CSS selectors” uyarısının kalktığını göreceğiz.
Benzer konular:
Teşekkürler güzel yazı olmuş. Bu gibi düzeltmeler site hızımızı artırıp google sıramızı iyileştirebilir.
Çok güzel bir yazı. Bu konu hakkında bulabildiğim tek içerik ama bunları yapmam mümkün değil css bilmiyorum :)