En fait je ne suis pas d'accord sur un point avec Google, mais j'ai peut être tord... C'est pourquoi j'aimerais avoir vos avis sur la question
L'objectif de Google Page Speed est de nous informer sur les points que l'on pourrait améliorer pour décroitre le temps d'affichage de nos pages aux internautes.
Sauf que, pour le point "Use efficient CSS selectors", Google nous recommande de ne pas utiliser les éléments parents dans la hiérarchie pour désigner un élément enfant.
Avec l'exemple suivant :
Utiliser l'arbre des éléments pour désigner l'élément enfant ralentirait apparemment le travail des navigateurs, qui doivent évaluer l'ensemble des éléments en partant de la droite, puis faire le tri dans ce qu'ils gardent et ce qu'ils jettent.
Mais cela justifie t-il un alourdissement des pages HTML et des feuilles de style ?
Parce que si je comprend bien, je devrais effectuer les modifications suivantes :
J'accélère le temps d'analyse de la page par le navigateur mais j'alourdis le poids des pages...
Modifié par Raphael (18 Mar 2010 - 07:38)
L'objectif de Google Page Speed est de nous informer sur les points que l'on pourrait améliorer pour décroitre le temps d'affichage de nos pages aux internautes.
Sauf que, pour le point "Use efficient CSS selectors", Google nous recommande de ne pas utiliser les éléments parents dans la hiérarchie pour désigner un élément enfant.
a écrit :
"Avoid using descendant selectors, especially those that specify redundant ancestors. Use class selectors instead of descendant selectors"
Avec l'exemple suivant :
/* Pas bien */
ul li {color: blue;}
ol li {color: red;}
/* Bien */
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
Utiliser l'arbre des éléments pour désigner l'élément enfant ralentirait apparemment le travail des navigateurs, qui doivent évaluer l'ensemble des éléments en partant de la droite, puis faire le tri dans ce qu'ils gardent et ce qu'ils jettent.
Mais cela justifie t-il un alourdissement des pages HTML et des feuilles de style ?
Parce que si je comprend bien, je devrais effectuer les modifications suivantes :
/* Avant */
.article h2 a {color:#000}
/* Après */
.article-title-link {color:#000}
<!-- Avant -->
<div class="article">
<h2><a>Mon titre</a></h2>
</div>
<!-- Après -->
<div class="article">
<h2><a class="article-title-link">Mon titre</a></h2>
</div>
J'accélère le temps d'analyse de la page par le navigateur mais j'alourdis le poids des pages...
Modifié par Raphael (18 Mar 2010 - 07:38)