La section "Opportunités" de votre rapport Lighthouse toutes les feuilles de style avec des feuilles de style CSS inutilisées, avec une économie potentielle d'au moins 2 Kio Supprimez le CSS inutilisé pour réduire la quantité d'octets inutiles consommés par l'activité réseau:
En quoi le CSS inutilisé ralentit-il les performances ?
L'utilisation d'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 elles sont stockées séparément
du code HTML qui les 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 rendre, 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 les feuilles de style peuvent contenir des règles qui affectent le style de la page.
Chaque feuille de style externe doit être téléchargée depuis le réseau. Ces trajets réseau supplémentaires peuvent augmenter considérablement le temps que les utilisateurs doivent attendre avant de voir du contenu sur leurs écrans.
Les CSS inutilisés ralentissent également la construction du code afficher l'arborescence. L'arborescence de rendu est semblable à l'arborescence DOM, à la différence 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és, plus un navigateur peut avoir à consacrer du temps au calcul des 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 à découvrir les CSS essentiels et non critiques. Consultez Afficher les CSS utilisés et inutilisés dans l'onglet "Couverture".
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Intégrer les CSS critiques et différer les CSS non critiques
Comme pour l'intégration du code dans une balise <script>,
styles critiques intégrés requis pour la première peinture
dans un bloc <style> au niveau du head de la page HTML.
Chargez ensuite les autres styles de manière asynchrone à l'aide du lien preload.
Envisagez d'automatiser le processus d'extraction et d'intégration de la partie au-dessus de la ligne de flottaison CSS à l'aide de l'outil Critical.
Pour en savoir plus, consultez Différer les CSS non critiques.
Conseils spécifiques aux piles
Drupal
Envisagez de supprimer les règles CSS inutilisées. Ne joindre que les bibliothèques Drupal nécessaires à la page ou au composant approprié d'une page. Consultez l'article Définir une bibliothèque. pour en savoir plus.
Joomla
Envisagez de réduire le nombre d'extensions Joomla qui chargent du code CSS inutilisé dans votre page.
WordPress
Vous pouvez 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.