[Résolu] Google Page Speed: analyse de résultats obtenus

Bonjour
Beaucoup d'entre vous ont certainement déjà utilisé "Google Page Speed".
Au niveau de la rubrique "Use efficient CSS selectors" j'ai constaté que j'avais pas mal "d'inefficient rules" dont en voici un extrait. Comment interpréteriez vous ces résultats? Ya t il des correctifs utiles à apporter à cette css?

Very inefficient rules (good to fix on any page):

    * #newsHome li p.quote span    Tag key with 3 descendant selectors and Class overly qualified with tag
    * #newsHome li div.thumbs a    Tag key with 3 descendant selectors and Class overly qualified with tag
    * #right li a:hover    Tag key with 2 descendant selectors and hover pseudo selector
    * td.nav p a    Tag key with 2 descendant selectors and Class overly qualified with tag
    * ul#navTop li span    Tag key with 2 descendant selectors and ID overly qualified with tag
    * ul#navTop a:hover    Tag key with descendant selector and hover pseudo selector and ID overly qualified with tag
    * .tablo tr.champs th    Tag key with 2 descendant selectors and Class overly qualified with tag
    * .btnNominateNow a:hover span    Tag key with 2 descendant selectors and hover pseudo selector
    * .btnOrderNow a:hover span    Tag key with 2 descendant selectors and hover pseudo selector
    * .btnRegisterNow a:hover span    Tag key with 2 descendant selectors and hover pseudo selector
    * .btn a:hover span    Tag key with 2 descendant selectors and hover pseudo selector
    * .time-line tr.emphas td    Tag key with 2 descendant selectors and Class overly qualified with tag
    * #formSearch span.select select    Tag key with 2 descendant selectors and Class overly qualified with tag
    * div#international tr.line1 td    Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag
    * ul.listItems li a    Tag key with 2 descendant selectors and Class overly qualified with tag
    * .news2 p.viewArchives img    Tag key with 2 descendant selectors and Class overly qualified with tag
    * .model tr.line_top td    Tag key with 2 descendant selectors and Class overly qualified with tag
    * .model tr.line_bot td    Tag key with 2 descendant selectors and Class overly qualified with tag
    * .themes tr.line td    Tag key with 2 descendant selectors and Class overly qualified with tag
    * table.file td img    Tag key with 2 descendant selectors and Class overly qualified with tag
    * .sitemap p.emphas a    Tag key with 2 descendant selectors and Class overly qualified with tag

Inefficient rules (good to fix on interactive pages):

    * #newsHome li div    Tag key with 2 descendant selectors
    * #newsHome li h2    Tag key with 2 descendant selectors
    * #newsHome li img    Tag key with 2 descendant selectors
    * #newsHome li p    Tag key with 2 descendant selectors
    * #newsHome li a    Tag key with 2 descendant selectors
    * #right #fiveIcons img    Tag key with 2 descendant selectors
    * #right li a    Tag key with 2 descendant selectors
    * #navl1 a:hover    Tag key with descendant selector and hover pseudo selector
    * .nav1 a:hover    Tag key with descendant selector and hover pseudo selector
    * #navLeft p a    Tag key with 2 descendant selectors
    * #navLeft li a    Tag key with 2 descendant selectors
    * td.nav p    Tag key with descendant selector and Class overly qualified with tag
    * td.nav h4    Tag key with descendant selector and Class overly qualified with tag
    * table.navAwards td    Tag key with descendant selector and Class overly qualified with tag
    * table.navAwards td    Tag key with descendant selector and Class overly qualified with tag
    * td.nav p    Tag key with descendant selector and Class overly qualified with tag
    * ul#navTop li    Tag key with descendant selector and ID overly qualified with tag
    * ul#navTop a    Tag key with descendant selector and ID overly qualified with tag
    * p.quote span    Tag key with descendant selector and Class overly qualified with tag
    * p.download img    Tag key with descendant selector and Class overly qualified with tag
    * #sortBox .orderBy a    Tag key with 2 descendant selectors
    * #sortBox .displayBy a    Tag key with 2 descendant selectors
    * #sortBox .orderBy a    Tag key with 2 descendant selectors
    * #sortBox .orderBy span    Tag key with 2 descendant selectors
    * #sortBox .displayBy a    Tag key with 2 descendant selectors
    * #sortBox .displayBy span    Tag key with 2 descendant selectors

D'avance merci,
Eurz
Modifié par eurz (07 Jul 2009 - 10:03)

Salut,

Les récentes consignes de google en matière de code sont à prendre avec des pincettes. Ils ont déjà mis les pieds dans le plat à deux reprises.

Bref, ce qu'ils te disent ici :
- Tag key with x descendant selectors : plus tu as de niveaux de profondeur dans ton sélecteur, plus ça va mouliner, et de manière exponentielle.
- Class overly qualified with tag : tag.class mouline plus que si tu mets simplement .class (sauf que parfois la balise est nécessaire...)
- hover pseudo selector : ils considèrent qu'un onmouseover en JS est plus rapide qu'un :hover en CSS. Sur quelles bases fondent-ils cette règle, on ne le sait pas encore, et tout le monde attend leurs explications.

Enfin, un avis perso, concentre tes efforts d'optimisation ailleurs que sur les CSS.

Salut,
Merci pour ces éclaircissements. Pour le moment, je ne m'attarderai pas plus longtemps sur l'optimisation des css par rapport au remarques de Google Page Speed sauf peut etre un ou deux petits points (ex: nettoyage de style inutiles )

Bonne journée

a écrit :
- hover pseudo selector : ils considèrent qu'un onmouseover en JS est plus rapide qu'un :hover en CSS. Sur quelles bases fondent-ils cette règle, on ne le sait pas encore, et tout le monde attend leurs explications.

A cause de ceci : http://www.ultra-fluide.com/ressources/css/css-hacks.htm#scintillement
On peut carrément flooder un serveur à cause du principe des portes coulissantes (:hover). IE6 est encore trop présent sur le web pour ignorer la problématique.

Nigel, je ne crois pas qu'ils faisaient référence à ce problème d'IE6 (même si c'est effectivement une limitation importante). Si tu lis le premier thread du groupe page-speed-discuss que j'ai référencé, tu verras ce message, dans lequel ils évoquent de vagues problèmes de performance sous IE7 (vagues problèmes qu'ils reconnaissent ne pas avoir examinés comme il se doit avant de publier leur recommandation).

Ah ça je ne sais pas, mais dans tous les cas, le souci sur IE6 est définitivement (très) problématique.
Merci pour l'article.

(edit)
En effet, il semblerait que IE7 freeze quand une page est munie de pas mal de :hover sur d'autres sélecteurs que "a"
Modifié par Nigel (09 Jul 2009 - 08:20)