La section "Opportunités" de votre rapport Lighthouse répertorie toutes les feuilles de style avec des CSS inutilisés, avec des économies potentielles de 2 Kio ou plus. Supprimez le CSS inutilisé pour réduire la quantité d'octets inutiles consommés par l'activité réseau:
Comment les CSS inutilisés ralentissent les performances
Une balise <link> est une méthode courante pour ajouter des styles à une page:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
Le fichier main.css téléchargé par le navigateur est appelé "feuille de style externe", car il est stocké séparément du code HTML qui l'utilise.
Par défaut, un navigateur doit télécharger, analyser et traiter toutes les feuilles de style externes qu'il rencontre avant de pouvoir afficher ou afficher tout contenu sur l'écran d'un utilisateur. Il ne serait pas logique qu'un navigateur tente d'afficher du contenu avant le traitement des feuilles de style, car celles-ci peuvent contenir des règles qui affectent le style de la page.
Chaque feuille de style externe doit être téléchargée à partir du réseau. Ces trajets réseau supplémentaires peuvent augmenter considérablement le délai d'attente des utilisateurs avant de voir du contenu sur leurs écrans.
Les CSS inutilisés ralentissent également la construction de l'arborescence de rendu par un navigateur. L'arborescence de rendu est semblable à l'arborescence DOM, sauf qu'elle inclut également les styles de chaque nœud. Pour construire l'arborescence de rendu, un navigateur doit parcourir l'intégralité de l'arborescence DOM et vérifier quelles règles CSS s'appliquent à chaque nœud. Plus il y a de CSS inutilisé, plus un navigateur peut avoir besoin de temps pour calculer les styles pour chaque nœud.
Détecter les ressources CSS inutilisées
L'onglet "Couverture" des outils pour les développeurs Chrome peut vous aider à identifier les CSS critiques et non critiques. Consultez Afficher les CSS utilisés et inutilisés à l'aide de l'onglet "Couverture".
Intégrer les CSS critiques et différer les CSS non critiques
Comme pour l'intégration de code dans un tag <script>, intégrez les styles critiques requis pour la première peinture dans un bloc <style> au niveau de l'élément head de la page HTML.
Chargez ensuite le reste des styles de manière asynchrone à l'aide du lien preload.
Envisagez d'automatiser le processus d'extraction et d'intégration du CSS "Above the Fold" à l'aide de l'outil critique.
Pour en savoir plus, consultez Différer les fichiers CSS non critiques.
Conseils spécifiques aux piles
Drupal
Pensez à supprimer les règles CSS inutilisées. N'associez les bibliothèques Drupal nécessaires qu'à la page ou au composant de page concerné. Pour en savoir plus, consultez Définir une bibliothèque.
Joomla
Envisagez de réduire le nombre d'extensions Joomla qui chargent du code CSS inutilisé dans votre page, ou d'en changer.
WordPress
Vous pouvez envisager de réduire le nombre de plug-ins WordPress qui chargent des feuilles de style CSS inutilisées dans votre page, ou désactiver certains de ces plug-ins.