Corriger 'Remove Unused CSS' dans Lighthouse

Dernière révision par Arjen Karel en février 2026

Qu'est-ce que le CSS inutilisé ?

Le CSS inutilisé est constitué de déclarations CSS qui ne sont utilisées nulle part sur une page web. Il est tout à fait normal qu'une partie du CSS ne soit pas utilisée. Par exemple, parce que certaines déclarations CSS sont écrites pour un autre appareil comme un ordinateur de bureau ou un mobile. Parfois parce qu'un élément qui est décrit dans la feuille de style (comme un bouton) n'est pas utilisé sur cette page spécifique. Le CSS inutilisé se produit souvent lorsque vous utilisez un framework tel que Bootstrap, où beaucoup plus d'éléments sont décrits par défaut dans le CSS que vous n'en utiliserez jamais. Ou lorsque vous avez repensé votre page mais oublié de supprimer les anciens éléments CSS.

Pourquoi le CSS inutilisé est-il mauvais pour la vitesse de la page ?

Le CSS ralentit le chargement de la page. Lorsqu'une page est chargée, le navigateur récupère d'abord le HTML de cette page. Ce HTML est converti en nœuds DOM. Ensuite, le navigateur récupère toutes les feuilles de style. Les styles trouvés dans ces fichiers CSS sont également convertis dans un autre format, à savoir le CSSOM. Le DOM et le CSSOM sont combinés dans un arbre de rendu (render tree). Ce n'est que lorsque cet arbre de rendu a été construit qu'un navigateur commence à peindre le premier contenu.

En raison de ce mécanisme, les fichiers CSS bloqueront toujours le rendu de votre page web. Lorsqu'un fichier CSS est plus volumineux qu'il ne devrait l'être, il faut plus de temps pour télécharger ce fichier et cela provoque le premier retard. Lorsqu'un fichier CSS contient des CSS inutilisés, il faut plus de temps pour construire l'arbre de rendu.

La page médiane expédie 79 Ko de CSS sur mobile, mais selon le 2024 Web Almanac, 52 Ko de cela sont inutilisés sur la page actuelle. Cela représente 66 % de CSS gaspillés. Au 90e centile, le CSS inutilisé atteint 212 Ko. Et 85 % de toutes les pages échouent à l'audit des ressources bloquant le rendu, le CSS en étant la cause principale.

Le CSS inutilisé retarde directement le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP) car le navigateur ne peindra aucun pixel tant que tout le CSS ne sera pas téléchargé et analysé. Sur les pages avec un CSS lourd, cela affecte également l'INP car des feuilles de style plus volumineuses augmentent le coût des recalculs de style pendant les interactions de l'utilisateur.

Comment trouver manuellement les CSS inutilisés

Dans Google Chrome, vous pouvez voir les CSS inutilisés dans l'aperçu Code Coverage. Le Code Coverage fait partie de Chrome DevTools. DevTools est une série d'outils intégrés disponibles sur chaque navigateur Chrome.

Ouvrez d'abord DevTools avec le raccourci Ctrl-Shift-J. Ensuite, tapez Ctrl-Shift-P pour ouvrir la palette de commandes. Tapez maintenant 'coverage'. Sélectionnez coverage et rechargez la page. Vous verrez maintenant un aperçu des fichiers CSS et JavaScript qui sont chargés et utilisés par la page. De plus, vous pouvez voir la taille des fichiers et quelle quantité de code est réellement utilisée. Cliquez sur un fichier CSS pour voir quelles règles CSS sont utilisées (vert) et quelles règles CSS ne sont pas utilisées (rouge) sur la page actuelle.

Comment résoudre l'avertissement 'remove unused CSS'

Il existe plusieurs façons de résoudre le message 'remove unused CSS' dans Lighthouse. Si, pour une raison quelconque, la correction de l'avertissement n'est pas possible, vous pourriez optimiser la livraison du CSS pour vous assurer que le CSS inutilisé a moins d'impact sur le temps de chargement de votre page. Je vais brièvement discuter des options dont vous disposez pour corriger le CSS inutilisé ci-dessous.

1. Supprimer le CSS inutilisé manuellement

La méthode la plus logique et la meilleure, mais aussi la plus laborieuse, consiste bien sûr à supprimer manuellement le CSS inutilisé. Les étapes sont simples :

1. Sauvegardez vos fichiers CSS originaux. Vous pourriez supprimer trop de CSS.
2. Ouvrez l'onglet Code Coverage dans Google Chrome et regardez pour chaque fichier CSS de quelles déclarations vous n'avez pas besoin.
3. Ouvrez le fichier CSS sur le serveur (ou localement) et vérifiez chaque déclaration CSS inutilisée. Déterminez si elle peut être supprimée. Mais attention : une déclaration CSS inutilisée sur une page peut être nécessaire sur une autre page. Vous devez en juger par vous-même !
4. Vérifiez pour chaque déclaration CSS si elle n'est pas dupliquée dans le CSS. Le CSS dupliqué sera également signalé comme inutilisé.
5. Vérifiez chaque règle CSS pour des méthodes abrégées. Est-il possible de raccourcir le CSS ? Alors raccourcissez-le !

2. Diviser le CSS en plusieurs fichiers

Il existe un moyen simple de réduire rapidement le nombre de règles CSS ! Ne chargez que les styles dont vous avez besoin pour votre appareil. Votre page est souvent visitée sur mobile. Vous n'avez pas vraiment besoin de télécharger les styles pour le bureau et l'impression pour cet appareil mobile. Ne pas télécharger ces styles fait gagner du temps et raccourcit ainsi la chaîne de requêtes critiques dans Lighthouse.

Pour accomplir cela, utilisez l'attribut media. L'attribut media garantit qu'une feuille de style n'est utilisée que si l'attribut media correspond au média que vous utilisez actuellement.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet"
 media="screen and (min-device-width: 1024px)">

Vous pouvez également utiliser l'astuce de l'attribut media pour charger des CSS non critiques sans bloquer le rendu :

<link rel="stylesheet" href="non-critical.css" media="print"
      onload="this.onload=null;this.removeAttribute('media');">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

Cela charge le CSS sans bloquer le rendu en le marquant comme media="print", puis bascule sur media="all" une fois chargé.

3. Utiliser un outil de nettoyage CSS automatique

Il existe un certain nombre d'outils intelligents qui peuvent nettoyer automatiquement vos fichiers CSS à votre place et supprimer toutes les références CSS inutilisées. Bien que les outils fonctionnent de manière étonnante, ils ne sont pas infaillibles. Parfois, ces outils suppriment trop de déclarations CSS. Utilisez-les donc prudemment et vérifiez toujours votre CSS vous-même. Le meilleur outil de nettoyage CSS est PurgeCSS. PurgeCSS fonctionne sur Node.js et s'intègre avec Webpack, PostCSS et Vite. Il utilise des extracteurs de contenu pour analyser vos fichiers HTML, JavaScript et modèles à la recherche de noms de classe, puis supprime tous les sélecteurs CSS qui ne sont pas trouvés. Vous pouvez également essayer PurifyCSS online pour une analyse rapide.

4. Critical CSS

Le Critical CSS est une collection de règles CSS qui sont nécessaires dans le viewport (la partie visible) de votre site web. En d'autres termes : le Critical CSS est le CSS requis pour rendre la partie visible de votre page.

Il existe un certain nombre d'outils qui peuvent extraire le Critical CSS de votre page. Le Critical CSS est ensuite placé en ligne (inline), dans l'en-tête (head) de votre page, tandis que le fichier CSS d'origine est chargé de manière asynchrone (pour que le navigateur l'utilise plus tard).

Cela ne résout pas complètement le problème du CSS inutilisé. Finalement, le CSS inutilisé sera chargé et analysé, mais votre navigateur ne sera pas gêné par celui-ci lors de la première phase de rendu.

L'outil le plus couramment utilisé pour trouver et extraire le Critical CSS est le script Node.js Critical. Il existe également des outils en ligne tels que Critical Path CSS Generator.

5. Minifier les fichiers CSS

Le CSS inutilisé ralentit une page, comme vous l'avez lu ci-dessus, de 2 façons. La première est due au fait que les fichiers CSS sont plus volumineux et prennent donc plus de temps à télécharger.

Nous pouvons contrer ce problème en réduisant la taille du fichier CSS par la minification des fichiers CSS. Cela se fait via un minificateur CSS. Un minificateur CSS réduit les fichiers CSS en supprimant les espaces, les commentaires et le formatage. De plus, un minificateur CSS peut réécrire les variables et le code CSS afin qu'il prenne moins d'octets à transférer.

Un outil de minification CSS bien connu est css-minify. Minifiez tous vos fichiers CSS via la ligne de commande avec la commande css-minify -f filename. Il existe également divers minificateurs CSS en ligne tels que cssminifier.com.

6. Recompiler votre framework CSS

Utilisez-vous un framework CSS tel que Bootstrap CSS ? Il s'agit d'un framework CSS avec lequel vous pouvez styliser l'ensemble de votre site. Ce framework est si complet qu'il y a de fortes chances que vous n'en utilisiez jamais de grandes parties.

Heureusement, les créateurs de Bootstrap et d'autres frameworks CSS ont pris cela en compte. Ce framework est écrit en SASS. C'est un langage qui ressemble beaucoup au CSS. Il se compose de plusieurs petits fichiers SASS qui peuvent utiliser des variables et des fonctions simples. Cela permet d'ajuster et de personnaliser facilement le framework vous-même avec un peu de connaissances. Vous pouvez simplement omettre les parties que vous n'utilisez pas et le compiler facilement en 1 fichier CSS final.

Assurez-vous également de ne pas charger un framework CSS non modifié depuis le CDN standard. Téléchargez le framework et compilez-le avec SASS exactement comme vous le souhaitez, avec uniquement les classes CSS que vous utilisez.

7. Envisager une stratégie CSS différente

Voulez-vous vraiment être rapide ? Alors cela pourrait être une idée de repenser votre stratégie CSS. La façon dont cela est fait dépend de votre site. Il y a plusieurs chemins qui mènent à Rome.

Prenons notre site par exemple. Nous ne chargeons que le CSS dont nous avons réellement besoin par page. Les classes CSS sont automatiquement importées par notre CMS uniquement lorsqu'elles sont nécessaires. Nous plaçons le CSS en ligne (dans le head de la page). Cela nous fait économiser une requête réseau supplémentaire. Cette solution est ultra-rapide et facile à maintenir.

Un lecteur attentif pourrait penser : "Qu'en est-il de la mise en cache CSS ? Le CSS est plus rapide lorsque les fichiers CSS finaux sont mis en cache." Oui, c'est vrai. C'est pourquoi nous utilisons les Speculation Rules pour précharger les pages dans le viewport visible afin qu'une page soit toujours récupérée depuis le cache, y compris le CSS.

Corriger 'remove unused CSS' dans WordPress

Êtes-vous prêt à supprimer les CSS inutilisés ? Voici comment commencer dans WordPress. Dans WordPress, le CSS peut être ajouté de 3 façons :

• Directement dans le modèle (template). Dans votre dossier de modèle, il y a un fichier appelé header.php. Dans ce fichier, il y a souvent des fichiers CSS spécifiques au modèle. Vous pourriez modifier ces fichiers CSS comme je l'ai décrit ci-dessus. N'oubliez pas de sauvegarder vos fichiers CSS originaux et gardez à l'esprit qu'une mise à jour du thème peut écraser vos fichiers CSS.
• CSS ajouté par un plugin. Les plugins dans WordPress peuvent ajouter un nombre illimité de fichiers CSS dans votre HTML. Ces plugins utilisent les fonctions wp_register_style et wp_enqueue_style. La plupart des plugins ne prennent pas la peine de vérifier s'ils sont actifs sur la page actuelle. Ils injectent simplement du CSS dans chaque page, même s'il n'y a pas besoin de ce CSS spécifique au plugin sur cette page. Je rencontre cela tous les jours. Si tel est le cas, vous pouvez utiliser les fonctions wp_dequeue_style et wp_deregister_style pour supprimer ces styles des pages. C'est un travail de précision. Si vous ne savez pas comment corriger cela, tournez-vous vers votre développeur ou demandez-moi de l'aide. Vous pouvez également utiliser le plugin Asset CleanUp avec lequel vous pouvez définir par type de page quels plugins, styles et scripts peuvent être chargés.
• CSS ajouté par JavaScript. Il est également possible d'injecter des feuilles de style dans la page à l'aide de JavaScript. Tout comme les feuilles de style, vous pouvez désactiver ces scripts par page avec la fonction wp_dequeue_script. Lorsque le JavaScript ne se charge pas, la feuille de style ne sera pas non plus injectée. Si vous avez besoin du script et de la feuille de style mais pas directement après le chargement, il est possible de reporter le chargement du JavaScript via l'attribut defer du script. Faites-le en ajoutant ce code dans functions.php :

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );

Après avoir réduit votre CSS inutilisé, vérifiez l'amélioration avec le Real User Monitoring. Dans nos données CoreDash, les sites qui intègrent (inline) le Critical CSS et diffèrent (defer) le reste voient une amélioration médiane du FCP de 320ms.