johanBleuzen

CSS rime avec vitesse, mais mine de rien les CSS peuvent impacter le temps de chargement de votre site. Je suis parti de mes résultats obtenus sur Google Page Speed pour tenter d’améliorer les perfs de mon blog et j’en profite pour faire un petit article, pour vous permettre d’optimiser vos CSS.

Certes, je promet pas un gain en performance énorme mais qui peut être appréciable pour les navigateurs les moins véloces (non je ne citerai pas IE)…

Le constat

Je fais partie des gens qui construisent petit à petit plutôt que tout construire en une seule fois en un seul bloc. Sur mon blog c’est pareil, j’ai ajouté des fonctionnalités au fur et à mesure du temps qui m’était disponible et j’ai remarqué une chose intéressante dans les résultats que l’on obtient avec Google Page Speed.

Le score obtenu sur le test «Use efficient CSS selectors» de Google Page Speed ne cessait de diminuer, je suis passé de 90% à environ 55%. En regardant les informations fournie par mon outil de monitoring, j’ai obtenu les explications suivantes :

C’est assez clair, mais j’ai voulu en savoir plus sur ces règles soit disant inefficaces.

Quatre règles de sélecteur

1. La règle par ID, on cible un élément sur son #ID :

#monIdQueJeSelectionne{
  //Propriétés CSS
}

1. La règlepar classe, on cible un élément sur sa classe :

.maClasseQueJeSelectionne{
  //Propriétés CSS
}

1. La règlepar tag, on cible un élément sur sa balise HTML (par exemple pour sélectionner une balise a):

a{
  //Propriétés CSS
}

1. La règleuniverselle, on cible un élément avec une règle qui ne correspond pas aux 3 précédentes :

*{
  //Propriétés CSS
}

Comment fonctionne un moteur de style?

Voici comment fonctionne le rendu du style avec les CSS, pour chaque sélecteur de votre fichier CSS il part de l'élément le plus à droite, puis il remonte à l'élément de gauche et ainsi de suite il continue tant qu'il y a des règles qui matchent pour un élément. Donc, plus les règles sont longues et plus cela est couteux pour le navigateur, ainsi la bonne pratique est de faire les règles les plus courtes et spécifiques possibles.

Moins il y a de règles à vérifier pour un élément et plus le rendu sera rapide.

Quelques conseils pour optimiser vos règles CSS

• Eviter les règles universelles,
• Si un élément a un #ID, ne pas précéder l'ID avec la balise de l'élément ciblé,
• Si un élément a une classe, ne pas précéder la classe avec la balise de l'élément ciblé,
• Être le plus spécifique possible,
• Eviter la sélection du descendant avec '>',
• Profiter de l'héritage de vos feuilles de styles.

Conclusion

J’ai donc tenté l’optimisation des feuilles de styles de ce blog (4,5ko gzippé,  17ko dézippé), je ne sais pas si il y a rééllement un impact sur la performance des navigateurs. Sur tous les navigateurs que je teste (Safari, Chrome, Firefox, Opéra et IE8) je n’ai pas vue d’amélioration visible, ni de diminution du temps de chargement de la page.

Alors, je ne sais pas si cela vaut le coup pour un petit blog comme le mien mais peut être que pour des gros sites lourds avec plusieurs dizaines de kilo-octets de CSS gzippé, ce genre d’optimisation ne coute pas trop cher et peut présenter un double avantage. Tout d’abord en allégeant les CSS on diminue la taille des fichiers et cela peut éventuellement améliorer les performances d’affichage sur IE6 par exemple.

Personnellement le seul intérêt que j’ai vu pour mon blog, c’est que le score PageSpeed a grimpé en flèche, je suis passé de 55 à 91 points. Et vous, pensez-vous que ce genre d’optimisation est inutile ou vous appliquiez déjà ces bonnes pratiques pour écrire vos CSS ?

Source : Writing Efficient CSS for use in the mozilla UI [EN] Crédit photo : Storem