Reporter les CSS non critiques

Les fichiers CSS sont des ressources qui bloquent l'affichage: ils doivent être chargés et traités avant que le navigateur n'affiche la page. Pages Web qui contiennent des feuilles de style inutilement volumineuses mettent plus de temps à s'afficher.

Dans ce guide, vous apprendrez à reporter les CSS non critiques pour optimiser les chemins d'affichage critiques et d'améliorer First Contentful Paint (FCP).

Exemple: chargement CSS non optimal

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

Cette page demande un fichier CSS comportant huit classes, mais elles ne sont pas toutes nécessaire pour afficher contenus.

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

Mesurer

Exécuter Lighthouse sur la page, puis accédez Performances.

Le rapport affiche la métrique First Contentful Paint avec la valeur "1s" et l'opportunité Éliminer les ressources bloquant l'affichage, en pointant vers style.css:

<ph type="x-smartling-placeholder">

</ph>

Pour visualiser comment ce CSS bloque l'affichage:

1. Ouvrez la page dans Chrome.
2. Appuyez sur Control+Shift+J (ou Command+Option+J sur Mac) pour ouvrir les outils de développement.
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:

<ph type="x-smartling-placeholder">

</ph>

Cela signifie que le navigateur doit attendre que tout le CSS se charge et soit traité. avant de peindre un seul pixel à l'écran.

Optimiser

Pour optimiser cette page, vous devez identifier les classes considérées comme essentielles. Pour déterminer cela, utilisez l'outil de couverture:

1. Dans les outils de développement, ouvrez le menu de commandes. en appuyant sur Control+Shift+P ou Command+Shift+P (Mac).
2. Saisissez "Couverture" et sélectionnez Afficher la couverture.
3. Cliquez sur Actualiser pour actualiser la page et commencer à capturer la couverture.

<ph type="x-smartling-placeholder">

</ph>

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

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

Utilisez ces informations pour optimiser votre CSS afin que le navigateur puisse commencer à traiter aux styles essentiels juste après le chargement de la page et différez les CSS non critiques pour plus tard:

1. Extrayez les définitions de classe indiquées en vert dans le rapport de couverture. 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 la commande suivante : motif:

   <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 pour charger le code CSS. Le principe est le suivant :

• link rel="preload" as="style" demande la feuille de style de manière asynchrone. Toi Pour en savoir plus sur preload, consultez le guide Précharger les éléments critiques.
• L'attribut onload dans link permet au navigateur de traiter le CSS lorsque le chargement de la feuille de style est terminé.
• "annulation" le gestionnaire onload après son utilisation permet à certains navigateurs d'éviter rappeler le gestionnaire lorsqu'il change l'attribut rel.
• La référence à la feuille de style dans l'élément noscript fournit une pour les navigateurs qui n'exécutent pas JavaScript.

La page obtenue ressemble exactement à à la version précédente, même si la plupart des styles se chargent de manière asynchrone. Voici comment le les styles intégrés et la requête asynchrone vers le fichier CSS ressemblent à dans le code HTML. :

Surveiller

Utilisez les outils de développement pour exécuter une autre trace Performance sur le optimisée.

Le repère FCP apparaît avant que la page demande le CSS, ce qui signifie que le navigateur n'a pas besoin d'attendre la fin du chargement du CSS pour afficher la page:

<ph type="x-smartling-placeholder">

</ph>

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

Dans le rapport, vous constaterez que la page FCP a été réduite de 0,2 s (soit 20% d'amélioration !):

<ph type="x-smartling-placeholder">

</ph>

La suggestion Éliminer les ressources bloquant l'affichage n'apparaît plus sous Opportunités, et se trouve désormais dans la section Audits réussis:

<ph type="x-smartling-placeholder">

</ph>

Étapes suivantes et références

Dans ce guide, vous avez appris à différer les CSS non critiques en extrayant manuellement le code inutilisé de la page. Pour les environnements de production plus complexes, extrait critique CSS couvre certains des les outils les plus populaires pour extraire les fichiers CSS critiques. un atelier de programmation pour découvrir travailler dans la pratique