Google Page Speed ​​- What do these posts mean?

Question

I launched the Google Page Speed ​​Firefox extension on several pages, and under the "efficient CSS selectors" are listed various things that are ineffective in my CSS.

But some messages seem a little cryptic - what do these (bold) mean:

div # menu h3.soon small
Tag key with two descendant selectors and identifier too qualified with tag and class too qualified tag

table.data tr: nth-child (2n) td
Tag key with two descendant selectors and a class too qualified with the tag

table.data tr.disabled td
Tag key with two descendant selectors and class too qualified with tag and class too qualified tag

I guess they think descendant selectors are bad, but there are a lot of “too skilled” ones. I probably won’t devote too much effort to fixing all this (there are a lot of them), but it would be nice to know what Google really means here!

Answer 1

Firstly, I never used page speed, but the message is not cryptic if you take a second to read it.

div # menu h3.soon small

Tag key with two child selectors and identifier, tag and class, too qualified Tag

Tag key with two descendant selectors: How many small tags do you have that are not contained in another tag with the class in the near future? None? In this case, embedding CSS would be completely unnecessary.

Highly qualified identifier with tag: #menu does not need to be added to the div. You most likely have no other tags in your markup with the id menu (you shouldn't, its identifier!), So adding a menu with a div is redundant.

Over-qualified class with tag:. No need to add to h3. You most likely have no other tag in your markup with the class soon, except for the h3 tags, so adding .soon with h3 is not required.

Other posts follow in a similar fashion.

-Stephen

Answer 2

Stephen said it well.

The reason they are tagged with your selectors is because CSS rules are mapped from right to left.

The transformation of the identifier with the element (as in the contents of div #) is not required, since the browser has already matched the selector by the time the div is reached. But the browser is still forced to evaluate it.

Child descendant selectors are expensive, because the browser must check all instances of the dom element referenced by the rightmost simple selector against all possible ancestors. Multiple descendants constitute a performance limitation.

However, the performance gain achieved by optimizing selectors (in most cases) is negligible.

Answer 3

They say that it makes no sense to use a tag, since you are giving a class so that you already restrict it, and it needs to do an additional search.

For example:

div#menu h3.soon .small 

There is no reason to start with a div, as you will soon look at a class small in the class in the h3 tag under the html element with the id menu.

They offer something like this

 #menu .soon .small {...} 

or even

 #menu {...} .soon {...} .small {...}