Découvrez comment améliorer les temps de rendu 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 bloquant le rendu. Si les fichiers CSS sont volumineux ou que les conditions réseau sont mauvaises, les requêtes de fichiers CSS peuvent considérablement augmenter le temps d'affichage d'une page Web.
L'intégration des styles extraits dans le <head> du document HTML évite d'effectuer une requête supplémentaire pour extraire ces styles. Le reste du CSS peut être chargé de manière asynchrone.
Améliorer les temps de rendu peut avoir un impact considérable sur les performances perçues, en particulier en cas de mauvaises conditions réseau. Sur les réseaux mobiles, une latence élevée est un problème, quelle que soit la bande passante.
Si votre First Contentful Paint (FCP) est faible et que l'opportunité "Éliminer les ressources bloquant le rendu" s'affiche dans les audits Lighthouse, nous vous conseillons d'essayer le CSS critique.
Pour réduire le nombre d'allers-retours pour le premier rendu, essayez de limiter le contenu au-dessus de la ligne de flottaison à 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 contient de CSS, plus l'impact potentiel du CSS intégré est important.
Présentation des outils
De nombreux outils performants peuvent déterminer automatiquement le CSS critique d'une page. C'est une bonne nouvelle, car effectuer cette opération manuellement serait un processus fastidieux. Elle nécessite une analyse de l'ensemble du DOM pour déterminer les styles appliqués à chaque élément du viewport.
Critique
Critical extrait, minifie et intègre le CSS au-dessus de la ligne de flottaison. Il est disponible en tant que module npm. Il peut être utilisé avec Gulp (directement) ou avec Grunt (en tant que plugin). Il existe également un plug-in webpack.
Il s'agit d'un outil simple qui simplifie grandement le processus. Vous n'avez même pas besoin de spécifier les feuilles de style. Critical les détecte automatiquement. Il permet également d'extraire le CSS critique pour plusieurs résolutions d'écran.
criticalCSS
CriticalCSS est un autre module npm qui extrait le CSS au-dessus de la ligne de flottaison. Il est également disponible en tant que CLI.
Il n'inclut pas d'options permettant d'intégrer et de réduire le CSS critique, mais il vous permet d'inclure de force des règles qui n'appartiennent pas au CSS critique et de contrôler plus précisément l'inclusion de 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 dynamiquement dans le DOM (ce qui est courant dans les applications Angular). Il utilise 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 du CSS critique. L'avantage est qu'il est efficace pour exécuter de nombreuses tâches en parallèle.