Reporter les CSS non critiques

Demián Renzulli

Important:Ce guide décrit une technique avancée qui peut améliorer les performances, mais qui peut également entraîner des bugs si elle n'est pas implémentée correctement. La plupart des sites devraient pouvoir atteindre tous nos objectifs de performances recommandés sans implémenter cette technique.

Les fichiers CSS sont des ressources bloquant l'affichage : ils doivent être chargés et traités avant que le navigateur n'affiche la page. L'affichage des pages Web contenant des feuilles de style inutilement volumineuses prend plus de temps.

Dans ce guide, vous allez découvrir comment différer le CSS non critique pour optimiser le parcours de rendu critique et améliorer la première peinture avec contenu (FCP, First Contentful Paint).

Exemple: chargement CSS non optimal

L'exemple suivant contient un accordéon avec trois paragraphes de texte masqués, chacun étant stylisé avec une classe différente:

Cette page demande un fichier CSS avec huit classes, mais toutes ne sont pas nécessaires pour afficher le contenu "visible".

L'objectif de ce guide est d'optimiser cette page afin que seuls les styles critiques soient chargés de manière synchrone, tandis que le reste (y compris les styles de paragraphe) est chargé de manière non bloquante.

Mesurer

Exécutez Lighthouse sur la page, puis accédez à la section Performances.

Le rapport affiche la métrique First Contentful Paint avec une valeur de "1s", ainsi que l'opportunité Éliminer les ressources bloquant le rendu, qui pointe vers le fichier style.css:

Le rapport Lighthouse suggère de simplifier votre feuille de style pour accélérer le chargement de votre page.

Remarque :Ce site de démonstration utilise une très petite feuille de style. Dans les scénarios de production, il est courant d'avoir besoin de fichiers CSS beaucoup plus volumineux. Si Lighthouse détecte qu'une page contient au moins 2 048 octets de règles CSS qui n'ont pas été utilisées lors de l'affichage du contenu au-dessus de la ligne de flottaison, il affiche également une suggestion Supprimer le CSS inutilisé.

Pour visualiser comment ce CSS bloque le rendu:

1. Ouvrez la page dans Chrome.
2. Appuyez sur Control+Shift+J (ou Command+Option+J sur Mac) pour ouvrir DevTools.
3. Cliquez sur l'onglet Performances.
4. Dans le panneau "Performances", cliquez sur Actualiser.

Dans la trace obtenue, vous verrez que le repère FCP est placé immédiatement après le chargement du CSS:

Sur la page de démonstration non optimisée, le FCP ne peut pas se produire tant que le CSS n'a pas fini de se charger.

Cela signifie que le navigateur doit attendre que tous les fichiers CSS soient chargés et traités avant de peindre un seul pixel à l'écran.

Optimiser

Pour optimiser cette page, vous devez savoir quelles classes sont considérées comme critiques. Pour ce faire, utilisez l'outil de couverture:

1. Dans DevTools, ouvrez le menu Command (Commande) en appuyant sur Control+Shift+P ou Command+Shift+P (Mac).
2. Saisissez "Couverture", puis sélectionnez Afficher la couverture.
3. Cliquez sur Actualiser pour actualiser la page et commencer à enregistrer la couverture.

Le rapport sur la couverture indique la quantité de votre CSS qui est réellement utilisée lors du chargement initial de la page.

Double-cliquez sur le rapport pour afficher les détails:

• Les classes marquées en vert sont essentielles. Le navigateur en a besoin pour afficher le contenu visible, y compris le titre, le sous-titre et les boutons d'accordéon.
• Les classes marquées en rouge ne sont pas critiques et n'affectent que le contenu qui n'est pas immédiatement visible, comme les paragraphes masqués.

Avec ces informations, optimisez votre CSS afin que le navigateur puisse commencer à traiter les styles critiques immédiatement après le chargement de la page et différer le CSS non critique pour plus tard:

1. Extrayez les définitions de classe marquées en vert dans le rapport de couverture, puis placez ces classes dans un bloc <style> en haut de la page:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. Chargez le reste des classes de manière asynchrone en appliquant le modèle suivant:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

Il ne s'agit pas de la méthode standard de chargement du CSS. Le principe est le suivant :

• link rel="preload" as="style" demande la feuille de style de manière asynchrone. Pour en savoir plus sur preload, consultez le guide de préchargement des composants critiques.
• L'attribut onload dans link permet au navigateur de traiter le CSS lorsque la feuille de style a fini de se charger.
• "Rendre nul" le gestionnaire onload après son utilisation permet à certains navigateurs d'éviter de le rappeler lorsqu'ils changent l'attribut rel.
• La référence à la feuille de style dans l'élément noscript fournit un remplacement pour les navigateurs qui n'exécutent pas JavaScript.

Remarque :

Dans un scénario de production réel, nous vous recommandons d'utiliser des fonctions de report CSS telles que loadCSS, qui peuvent encapsuler ce comportement et fonctionner correctement dans tous les navigateurs, et qui sont compatibles avec une politique de sécurité du contenu qui n'autorise pas le code JavaScript onload intégré.

Vous pouvez également placer le lien CSS au bas de la page, ce qui permet d'afficher le contenu avant son rendu sans attendre la feuille de style dans Firefox et Chrome. Toutefois, le navigateur donne toujours la priorité à la feuille de style dans ce cas. Il peut donc toujours bloquer le contenu critique dans tous les navigateurs.

La page générée ressemble exactement à la version précédente, même lorsque la plupart des styles se chargent de manière asynchrone. Voici à quoi ressemblent les styles intégrés et la requête asynchrone au fichier CSS dans le fichier HTML:

Surveiller

Utilisez DevTools pour exécuter une autre trace Performances sur la page optimisée.

Le repère FCP apparaît avant que la page ne demande le CSS, ce qui signifie que le navigateur n'a pas besoin d'attendre que le CSS soit chargé avant d'afficher la page:

Sur la page optimisée, FCP peut commencer avant le chargement de la feuille de style.

Pour terminer, exécutez Lighthouse sur la page optimisée.

Dans le rapport, vous constaterez que le FCP de la page a été réduit de 0,2 s (une amélioration de 20 %).

Nouveau FCP réduit.

La suggestion Éliminez les ressources qui bloquent le rendu n'apparaît plus sous Opportunités, mais dans la section Audits réussis:

La page passe désormais l'audit des ressources bloquantes.

Étapes suivantes et références

Dans ce guide, vous avez appris à différer le CSS non critique en extrayant manuellement le code inutilisé de la page. Pour les environnements de production plus complexes, le guide d'extraction du CSS critique couvre certains des outils les plus populaires pour extraire le CSS critique et inclut un atelier de programmation pour voir comment ils fonctionnent en pratique.