Google Page Speed - what do these messages mean?

Question

I ran the Google Page Speed Firefox extension on a few pages, and under "efficient CSS selectors" it listed various things that are inefficient in my CSS.

But some of the messages seem a bit cryptic - what do these (in bold) mean:

div#menu h3.soon small
Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag

table.data tr:nth-child(2n) td
Tag key with 2 descendant selectors and Class overly qualified with tag

table.data tr.disabled td
Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag

I'm assuming they think descendant selectors are bad but there are lots of "overly qualified" as well. I probably won't go to too much effort fixing all these up (there are many) but it would be nice to know what Google actually means here!

Answer 1

It is saying there is no reason to use the tag since you give a class so you are already limiting it and it have to do extra searching.

For example:

div#menu h3.soon small

Here there is no reason to start with div since you will only look at class small in class soon in an h3 tag below class menu.

They are suggesting something like this

menu soon small {...}

or even

menu {...}

soon {...}

small {...}

Answer 2

First off, I have never used Page Speed, but the message is not that cryptic if you take a second to read it.

div#menu h3.soon small

Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag

Tag key with 2 descendant selectors: How many small tags do you have that are not contained in another tag with class soon? None? The CSS nesting would be totally unnecessary in this case.

ID overly qualified with tag: #menu does not need to be prepended with div. You most likely don't have any other tags in your markup with id menu (you shouldn't, its an ID!), so prepending menu with div in redundant.

Class overly qualified with tag: .soon does not need to be prepended with h3. You most likely don't have any other tag in your markup with class soon other than h3 tags, so prepending .soon with h3 is unnecessary.

The other messages follow similarly.

-Stephen

Answer 3

Stephen said it well.

The reason they're flagging your selectors is that CSS rules are matched right to left.

Prepending an ID with an element (as in div#content) is unnecessary because the browser has already matched the selector by the time it reaches "div". But the browser is still forced to evaluate it.

Descendant selectors are expensive because the browser has to check all instances of the dom element referenced in the right-most simple selector against all possible ancestors. Multiple descendants compound the performance penalty.

That said, the performance gain achieved from optimizing selectors (in most cases) is negligible.