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. Les pages Web qui contiennent des feuilles de style inutilement volumineuses mettent plus de temps à s'afficher.
Découvrez comment différer les ressources CSS non critiques pour optimiser le chemin critique du rendu et améliorer le First Contentful Paint (FCP).
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 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 dans les outils de développement pour examiner les métriques importantes.
- Ouvrez la démo dans Chrome.
- Ouvrez les outils pour les développeurs Chrome.
- Sélectionnez le panneau "Performances".
- Dans le panneau, actualisez la page.
Le rapport affiche la métrique First Contentful Paint avec la valeur "1 s", ainsi que l'opportunité Éliminer les ressources bloquant le rendu, qui pointe vers le fichier style.css :
Dans la trace résultante, le repère FCP est placé immédiatement après le chargement du CSS :