SEO technique
Critical CSS
Le critical CSS est la portion de feuille de style strictement nécessaire pour afficher ce que le visiteur voit avant de défiler.
Elle est injectée directement dans la page, tandis que le reste de la feuille est chargé de façon différée.
Le problème qu’elle résout
Une feuille de style externe bloque l’affichage.
Le navigateur ne dessine rien tant qu’il ne l’a pas téléchargée et interprétée. Sur une connexion lente ou une feuille volumineuse, cela ajoute plusieurs centaines de millisecondes pendant lesquelles la page reste blanche.
En intégrant le strict nécessaire dans le code de la page, le premier affichage ne dépend plus d’un téléchargement. Le gain porte directement sur le Largest Contentful Paint.
Comment l’extraire
Par un outil qui charge la page à une taille d’écran donnée et relève les règles réellement appliquées à ce qui est visible.
Deux difficultés apparaissent aussitôt.
La taille d’écran. Ce qui est visible sur mobile diffère de ce qui l’est sur ordinateur. Extraire pour une seule taille laisse l’autre incomplète.
Les gabarits. Une page d’accueil, une fiche produit et un article n’ont pas le même haut de page. Un critical CSS unique pour tout le site est soit trop large, soit insuffisant.
La pratique courante consiste à en générer un par gabarit, automatiquement à la construction du site.
Ses inconvénients
Trois, et ils expliquent pourquoi la technique n’est pas systématique.
La maintenance. Une modification de style rend le critical CSS obsolète. S’il n’est pas régénéré, la page s’affiche mal pendant un instant, ce qui produit un effet proche du scintillement.
Le poids de la page. Le style intégré n’est pas mis en cache : il est retransmis à chaque visite. Sur un visiteur récurrent, c’est une perte.
La complexité. Elle se justifie sur un site dont la feuille est lourde. Sur une feuille légère, le gain est marginal.
Ce qu’il faut faire avant
Réduire la feuille elle-même.
Une feuille de trois cents kilooctets dont dix pour cent est utilisée signale un problème que le critical CSS ne corrige pas, il le contourne. Le retrait des règles mortes produit souvent davantage pour moins de complexité, ce qui rejoint le raisonnement décrit côté temps de chargement.
FAQ