CODEWITHSUNDEEP
csspagespeed
user699998
user699998

Reputation: 27

According to PageSpeed, my css is not using efficient CSS selectors

According to PageSpeed, my css not using efficient CSS selectors.

Could someone show me know what I am doing wrong?

My CSS :

#header .link-bar .fl .last a:hover
div.box-default div.box-caption .box-title a 
.news ul li div.top a
.news ul li div.top a:visited  
.news ul li div.top a:hover
.link-bar ul li
#header .link-bar a 
#header .link-bar a:visited 
#header .link-bar .last a
#header .link-bar a:hover
#header .link-bar .last a:hover 
#header .link-bar .fl a:hover
#footer .link-bar a
#footer .link-bar a:visited
#footer ul li
div.list ul
div.list li
.ads ul li
.news ul li
#paging_button ul li
#paging_button ul li:hover
.tt_wrap .ttbox span 
#paging_button ul li:hover

many thanks.

Upvotes: 0

Views: 242

Answers (2)

Code Uniquely
Code Uniquely

Reputation: 6373

Without knowing what your CSS does and your reasons for arranging it like this and how / where its being used and what's being done with the page there are no right answers.

All that PageSpeed is telling you is that there some very efficient selectors that get you to an item very quickly indeed and some less efficient ones that cause the CSS engine to trawl a bit before it finds what you intended. Both will apply the style you want, one types takes less CPU cycles than the other does, but in most cases we're talking about a few CPU cycles here and there and not seconds. The machine the browser is running on and the browser itself have significantly more impact than the selectors themselves. So this just means that in your CSS you have some of the less efficient selectors.

for example you could write rules like this (with nested elements) and you clearly have some of these.

ul li {color: blue;}
ol li {color: red;}

but equally and more efficiently you could have done this (a single class selector) - however you would need to alter your mark-up to support the addition of these classes on the li and in the process increase the 'weight' of you page.

.ul-li {color: blue;}
.ol-li {color: red;}

Not that this rather trivial example will make a significant difference either way, but when render speed is vital and you're working locally on a fast network or with older / less powerful machines then it may pay off. If you've got to send to remote browsers over very slow connections than increasing the payload you send may make things worse.

Basically, every time you put any of these it's more inefficient than not doing so.

Rules with descendant selectors 
Rules with child or adjacent selectors
Rules with overly qualified selectors
Rules that apply the :hover pseudo-selector to non-link elements

overly qualified selectors are when you use many selectors to get to the same place

div.box-default div.box-caption .box-title a

does the following give the same results or are there many box-tiles likely on a page?

.box-title a

Its also a significant amount of work to build CSS files and mark-up that don't have any of these.

for more information on what these are (with examples of reach type) please see the following links:
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
http://www.w3.org/TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Upvotes: 0

Farzher
Farzher

Reputation: 14563

Your selectors are maybe too specific, browsers read CSS right-to-left instead of left-to-right. So .link-bar ul li is faster than #header .link-bar ul li

This also means the rightmost selector is the most important for performance. If you can add classes to the rightmost elements it'll help a lot .news ul li div.top a vs .news ul li div.top a.top-link

Check out this Why do browsers match CSS selectors from right to left?

Upvotes: 2

Related Questions