Découvrez comment améliorer les délais d'affichage avec la technique CSS essentielle.
Le navigateur doit télécharger et analyser les fichiers CSS avant de pouvoir afficher la page, ce qui fait de CSS une ressource qui bloque l'affichage. Si les fichiers CSS sont volumineux ou si les conditions du réseau sont mauvaises, 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 le <head> du document HTML, vous n'avez pas besoin d'envoyer une requête supplémentaire pour récupérer ces styles. Le reste du CSS peut être chargé de manière asynchrone.
Améliorer les délais d'affichage peut avoir un impact considérable sur les performances perçues, en particulier lorsque le réseau est en mauvais état. Sur les réseaux mobiles, la latence élevée est un problème, quelle que soit la bande passante.
Si le First Contentful Paint (FCP) est médiocre et que vous constatez l'opportunité "Éliminer les ressources bloquant l'affichage" dans les audits Lighthouse, nous vous conseillons d'essayer le CSS critique.
Pour réduire le nombre d'allers-retours avant le premier affichage, essayez de limiter la taille du contenu au-dessus de la ligne de flottaison à moins de 14 Ko (compressé).
L'impact sur les performances que vous pouvez obtenir avec cette technique dépend du type de votre site Web. En règle générale, plus un site comporte de CSS, plus l'impact du CSS intégré est important.
Présentation des outils
Il existe un certain nombre d'outils efficaces qui peuvent déterminer automatiquement le CSS essentiel à une page. C'est une bonne nouvelle, car l'effectuer manuellement serait fastidieux. L'ensemble du DOM doit être analysé pour déterminer les styles appliqués à chaque élément de la fenêtre d'affichage.
Critique
L'option Critical extrait, minimise et adapte la partie au-dessus de la ligne de flottaison dans la partie au-dessus de la ligne de flottaison. Elle est disponible en tant que module npm. Vous pouvez l'utiliser avec Gulp (directement) ou Grunt (en tant que plugin), et il existe également un plug-in Webpack.
Il s'agit d'un outil simple qui demande beaucoup de réflexion au niveau du processus. Vous n'avez même pas besoin de spécifier les feuilles de style : l'outil Critical les détecte automatiquement. Il prend également en charge l'extraction des fichiers CSS critiques pour plusieurs résolutions d'écran.
criticalCSS
CriticalCSS est un autre module npm qui extrait les CSS au-dessus de la ligne de flottaison. Il est également disponible en tant que CLI.
Il ne propose pas d'options permettant d'intégrer et de réduire la taille des fichiers CSS critiques, mais il vous permet de forcer l'inclusion de règles qui n'appartiennent pas réellement aux CSS critiques et vous offre un contrôle plus précis sur l'inclusion des déclarations @font-face.
Penthouse
Nous vous recommandons d'utiliser Penthouse si votre site ou application présente un grand nombre de styles qui sont injectés de manière dynamique dans le DOM (pratique courante dans les applications Angular). Il utilise en arrière-plan Puppeteer 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 fichiers CSS essentiels. L'avantage est qu'il permet d'exécuter de nombreuses tâches en parallèle.