Découvrez comment réduire les délais d'affichage grâce à la technique CSS essentielle.
Le navigateur doit télécharger et analyser les fichiers CSS avant de pouvoir afficher la page, ce qui fait du CSS une ressource qui bloque l'affichage. Si les fichiers CSS sont volumineux ou si l'état du réseau est de mauvaise qualité, les demandes de fichiers CSS peuvent augmenter considérablement le délai d'affichage d'une page Web.
En intégrant les styles extraits dans la propriété <head> du document HTML, il n'est pas nécessaire d'envoyer une requête supplémentaire pour récupérer ces styles. Le reste du CSS peut être chargé de manière asynchrone.
L'amélioration des délais d'affichage peut faire une grande différence au niveau des performances perçues, en particulier lorsque les conditions du réseau sont mauvaises. Sur les réseaux mobiles, une latence élevée pose problème, quelle que soit la bande passante.
Si l'indicateur First Contentful Paint (FCP) est médiocre et que vous voyez "Éliminer la ressource bloquant l'affichage" dans Lighthouse, il est judicieux d'essayer les CSS critiques.
Pour réduire le nombre d'allers-retours avant le premier affichage, essayez de faire en sorte que le contenu au-dessus de la ligne de flottaison ne dépasse pas 14 Ko (compressé).
L'impact de cette technique sur les performances dépend du type de votre site Web. En règle générale, plus un site inclut de code CSS, plus l'impact du CSS intégré est important.
Présentation des outils
Il existe un certain nombre d'outils très utiles qui peuvent déterminer automatiquement le code CSS essentiel d'une page. C'est une bonne nouvelle, car effectuer cette opération manuellement serait fastidieux. Elle nécessite une analyse de l'intégralité du DOM pour déterminer les styles appliqués à chaque élément de la fenêtre d'affichage.
Critique
Les fichiers CSS critiques permettent d'extraire, de réduire et d'intégrer le code CSS au-dessus de la ligne de flottaison. Ils sont disponibles en tant que module npm. Il peut être utilisé avec Gulp (directement) ou avec Grunt (en tant que plug-in). Il existe également un plug-in Webpack.
C'est un outil simple qui demande beaucoup de travail de réflexion sur le processus. Vous n'avez même pas besoin de spécifier les feuilles de style, car Critical les détecte automatiquement. Il prend également en charge l'extraction des CSS critiques pour plusieurs résolutions d'écran.
criticalCSS
CriticalCSS est un autre module npm qui extrait le code CSS de la partie au-dessus de la ligne de flottaison. Il est également disponible en tant que CLI.
Elle ne permet pas d'intégrer ni de réduire la taille du code CSS critique, mais elle vous permet d'imposer l'inclusion de règles qui n'appartiennent pas à celles-ci et de contrôler plus précisément l'inclusion des déclarations @font-face.
Penthouse
Penthouse est un bon choix si votre site ou votre application comporte un grand nombre de styles ou de styles injectés de manière dynamique dans le DOM (courant dans les applications Angular). Il s'appuie sur Puppeteer en arrière-plan et propose même une version hébergée en ligne.
Penthouse ne détecte pas automatiquement les feuilles de style. Vous devez spécifier les fichiers HTML et CSS pour lesquels vous souhaitez générer des CSS critiques. L'avantage est qu'il permet d'exécuter de nombreuses tâches en parallèle.