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. L'affichage des pages Web contenant des feuilles de style inutilement volumineuses prend plus de temps.
Dans ce guide, vous allez apprendre à différer les CSS non critiques afin d'optimiser le chemin d'affichage critique et d'améliorer la méthode First Contentful Paint (FCP).
Exemple: chargement CSS non optimal
L'exemple suivant contient un accordéon avec trois paragraphes de texte masqués, chacun stylisé avec une classe différente:
Cette page demande un fichier CSS avec huit classes, mais elles ne sont pas toutes nécessaires pour afficher le contenu "visible".
L'objectif de ce guide est d'optimiser cette page pour que seuls les styles essentiels soient 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écutez Lighthouse sur la page et accédez à la section Performances.
Le rapport affiche la métrique First Contentful Paint avec une valeur de "1s", ainsi que l'opportunité Eliminate block resources (Éliminer les ressources bloquant l'affichage), pointant vers le fichier style.css:
![Rapport Lighthouse pour la page non optimisée, affichant le FCP "1" et "Éliminer les ressources bloquantes" sous "Opportunités"](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?authuser=6&hl=fr)
Pour voir comment ce CSS bloque l'affichage:
- Ouvrez la page dans Chrome.
- Appuyez sur
Control+Shift+J
(ouCommand+Option+J
sur Mac) pour ouvrir les outils de développement. - Cliquez sur l'onglet Performances.
- Dans le panneau "Performances", cliquez sur Actualiser.
Dans la trace obtenue, vous verrez que le repère FCP est placé immédiatement après la fin du chargement du CSS:
![Trace des performances des outils de développement pour la page non optimisée, montrant le FCP qui commence après le chargement du CSS](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?authuser=6&hl=fr)
Cela signifie que le navigateur doit attendre que tous les CSS se chargent et soient traités avant d'afficher un seul pixel à l'écran.
Optimisation
Pour optimiser cette page, vous devez savoir quelles classes sont considérées comme essentielles. Pour le déterminer, utilisez l'outil de couverture:
- Dans les outils de développement, ouvrez le menu de commandes en appuyant sur
Control+Shift+P
ouCommand+Shift+P
(Mac). - Saisissez "Couverture" et sélectionnez Afficher la couverture.
- Cliquez sur Actualiser pour actualiser la page et commencer à enregistrer la couverture.
![Couverture du fichier CSS, affichant 55,9% des octets inutilisés.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/coverage-css-file-showi-7147a6123af9d.png?authuser=6&hl=fr)
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 les boutons de titre, de sous-titre et d'accordéon.
- Les classes en rouge ne sont pas critiques et n'affectent que le contenu qui n'est pas immédiatement visible, comme les paragraphes masqués.
Grâce à 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 reporter les CSS non essentiels pour plus tard:
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>
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 pour charger CSS. Le principe est le suivant :
link rel="preload" as="style"
demande la feuille de style de manière asynchrone. Pour en savoir plus surpreload
, consultez le guide Précharger les éléments critiques.- L'attribut
onload
danslink
permet au navigateur de traiter le CSS une fois le chargement de la feuille de style terminé. - L'annulation de la valeur du gestionnaire
onload
après son utilisation permet à certains navigateurs d'éviter de le rappeler lorsqu'ils changent l'attributrel
. - La référence à la feuille de style dans l'élément
noscript
fournit une solution de remplacement pour les navigateurs qui n'exécutent pas JavaScript.
La page obtenue 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 adressée au fichier CSS dans le fichier HTML:
Surveiller
Utilisez les outils de développement pour exécuter une autre trace Performance sur la page optimisée.
Le repère FCP apparaît avant que la page demande le CSS. Le navigateur n'a donc pas besoin d'attendre le chargement du CSS pour afficher la page:
![Trace des performances des outils de développement pour la page optimisée, montrant le FCP qui commence avant le chargement du CSS](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?authuser=6&hl=fr)
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 une amélioration de 20 %):
![Rapport Lighthouse, indiquant une valeur FCP de "0,8 s"](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?authuser=6&hl=fr)
La suggestion Éliminer les ressources qui bloquent l'affichage n'apparaît plus sous Opportunités, mais se trouve à la place dans la section Audits réussis:
![Rapport Lighthouse, indiquant "Éliminer les ressources bloquantes" dans la section "Audits réussis".](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?authuser=6&hl=fr)
Étapes suivantes et références
Dans ce guide, vous avez appris à différer les CSS non critiques en extrayant manuellement le code inutilisé dans la page. Pour les environnements de production plus complexes, le guide Extraire les fichiers CSS critiques couvre certains des outils les plus populaires permettant d'extraire les fichiers CSS critiques et inclut un atelier de programmation pour voir comment ils fonctionnent en pratique.