Optimiser son CSS pour améliorer son score SEO
Aujourd’hui il est impératif de prendre en compte l’optimisation d’une feuille de styles pour améliorer son classement dans les moteurs de recherche. La rapidité de chargement d’une page web va dépendre de la taille des feuilles CSS chargées et du temps que le navigateur va mettre à les interpréter. Plus le code CSS est optimisé, plus les moteurs de recherche vont attribuer une meilleure note au site Internet.
Sur WordPress il est possible de personnaliser un thème avec un thème enfant. Après avoir créé la feuille de styles associée, on peut définir de nouveaux styles et mettre à jour certains éléments du thème parent. Si un développeur web souhaite modifier une règle, il peut utiliser l’inspecteur afin d’identifier la règle à modifier puis la surcharger dans le fichier CSS du thème enfant. Bien comprendre comment surcharger une règle permet d’optimiser son code aussi bien pour la maintenance que pour le SEO.
Comment surcharger un sélecteur
Pour modifier la couleur d’un titre dans un thème WordPress on peut déterminer dans un premier temps via l’inspecteur la règle qui lui ai appliqué et faire un peu de développement pour la surcharger. Après avoir identifié la règle il suffit de la copier/coller dans le fichier style.css du thème enfant. Une mauvaise pratique est de mettre le mot clé !important à la fin de chaque règle. Cette pratique n’est pas optimisée et il suffit simplement d’indiquer un ou plusieurs éléments juste avant la classe que l’on souhaite modifier.
Titre h3 surchargé en bleu et centré
<style>
/* le thème parent possède la règle : h3{color:rgba(0,0,0,.75);} */
.post-content h3{color:#1961c7;text-align:center;} /* on surcharge en ajoutant .post-content */
</style>Comprendre la priorité des sélecteurs
On appelle spécificité la priorité des sélecteurs qui sont interprétés par le navigateur. La priorité se détermine en fonction du type de sélecteur et de son nombre d’éléments. Plus une règle possède d’élément plus elle sera considérée prioritaire par le navigateur. Attention cependant à ne pas utiliser un trop grand nombre d’éléments, car cela consomme plus de ressources pour analyser le code et ralentira donc le rendu de la page surtout pour les mobiles. Il existe 3 grands types de sélecteurs qu’un développeur peut utiliser pour définir une règle CSS :
- Sélecteur d’identifiant : #id
- Sélecteur de classe : .classe
- Sélecteur de balise : span, div, etc…
Le sélecteur d’identifiant sera prioritaire sur la classe qui sera prioritaire sur la balise. Enfin en dernier recours on peut utiliser le mot clé !important qui prendra le dessus si 2 règles ont exactement les mêmes sélecteurs. Le mot !important est comme dit plus haut dans l’article à utiliser en dernier recours. Il vaut mieux ajouter des éléments avant la classe pour la surcharger ce qui permettra une meilleure maintenabilité du code.
<style>
/* Priorité des sélecteurs sur un paragraphe */
p{font-size:1.2em!important;} /* priorité niveau 1 */
#paragraph{font-size:1.2em;} /* priorité niveau 2 */
.paragraph{font-size:1.2em;} /* priorité niveau 3 */
p{font-size:1.2em;} /* priorité niveau 4 */
</style>Des ressources pour apprendre le CSS
Il existe beaucoup de ressources sur Internet pour apprendre le développement CSS et qui traitent des sélecteurs et des priorités. Sur le site de MDN ou de w3Schools il y a de très bons tutoriels pour se former ou réviser ses connaissances. Il est important de garder en tête l’optimisation des feuilles de styles pour qu’elles soient interprétées plus rapidement dans le navigateur du client et charger la page HTML au plus vite.
Les préprocesseurs comme LESS et SASS sont des technologies à étudier pour créer des projets de plus grandes envergures à partir d’un langage dynamique. En effet, ces préprocesseurs ajoutent de nombreuses fonctions à CSS et apportent plus de flexibilité au développeur web.