L’optimisation de vitesse passe souvent par un geste simple et négligé : supprimer le CSS inutilisé pour alléger vos pages et améliorer vos Core Web Vitals. En clair, il s’agit d’identifier les règles de style jamais utilisées, puis de les retirer afin que le navigateur charge et affiche votre site plus vite.
Ce guide propose une méthode concrète, étape par étape, avec des outils accessibles comme Chrome DevTools et PurgeCSS. Nous accompagnons régulièrement des sites qui traînent un CSS gonflé par d’anciens thèmes ou des bibliothèques entières chargées pour trois classes ; les gains, eux, sont souvent mesurables dès la première intervention.
Pourquoi le CSS inutilisé pèse sur la vitesse de chargement
Un fichier CSS doit être téléchargé, analysé puis appliqué avant que la page ne s’affiche correctement. En effet, le CSS est une ressource bloquante pour le rendu : tant qu’il n’est pas traité, le navigateur retarde l’affichage.
Plus ce fichier contient de règles inutiles, plus ce traitement s’allonge. D’après la documentation de web.dev de Google, le Largest Contentful Paint (LCP) devrait rester sous 2,5 secondes pour être jugé bon ; un CSS allégé y contribue directement.
Par ailleurs, beaucoup de sites WordPress chargent l’intégralité du CSS d’un thème sur chaque page, même quand 80 % des styles ne servent jamais. Il convient donc de regarder ce que le navigateur télécharge réellement, avant de chercher des optimisations plus complexes.
Comment mesurer le CSS inutilisé avec Chrome DevTools ?
La réponse tient en quelques clics : l’onglet Coverage de Chrome DevTools affiche, fichier par fichier, le pourcentage de code jamais exécuté sur la page visitée.
Lancer l’analyse de couverture
Voici la marche à suivre, simple et reproductible :
- Ouvrez votre page, puis appuyez sur F12 pour ouvrir DevTools.
- Affichez le panneau de commandes (Ctrl+Maj+P) et tapez « Coverage ».
- Cliquez sur le bouton de rechargement pour démarrer l’enregistrement.
- Lisez la colonne « Unused Bytes » : elle révèle le poids du CSS non utilisé.
De fait, il n’est pas rare de découvrir 60 à 90 % de CSS inutilisé sur une page d’accueil. Ce chiffre, à lui seul, justifie le passage à l’action.
Interpréter les résultats sans se tromper
Attention néanmoins : l’onglet Coverage mesure une seule page à un instant donné. Une règle absente ici peut servir sur une autre page, ou après une interaction utilisateur.
Il semble donc important de tester plusieurs gabarits représentatifs (accueil, article, page produit) avant de supprimer quoi que ce soit. C’est cette prudence qui sépare une optimisation propre d’un site cassé.
Comment supprimer le CSS inutilisé avec PurgeCSS ?
PurgeCSS analyse vos fichiers HTML, JavaScript et templates, repère les classes réellement employées, puis génère un CSS épuré ne contenant que l’essentiel. C’est l’outil de référence pour automatiser ce nettoyage.
Installer et configurer PurgeCSS
Sur un projet utilisant npm, l’installation se fait en une commande : npm install @fullhuman/postcss-purgecss. PurgeCSS s’intègre ensuite à votre chaîne de build (PostCSS, Webpack, Vite) lors de la compilation.
Le principe de configuration est le suivant :
- Indiquez les fichiers à scanner (le « content ») : vos templates, vos pages, vos scripts.
- Listez les classes générées dynamiquement dans une « safelist » pour ne pas les perdre.
- Lancez la compilation : PurgeCSS produit un fichier allégé, parfois divisé par cinq ou dix.
D’après notre expérience, c’est justement la safelist qui demande le plus d’attention. Les styles ajoutés par JavaScript après le chargement échappent à l’analyse statique ; il faut les déclarer manuellement.
Le cas particulier de WordPress
Sur WordPress, tout le monde ne dispose pas d’une chaîne de build. Des extensions comme Perfmatters ou Asset CleanUp permettent alors de désactiver le CSS au cas par cas, page par page.
Pour aller plus loin sur cet écosystème, notre guide dédié à l’optimisation de vitesse de site WordPress détaille les réglages complémentaires (cache, images, scripts) qui prolongent ce travail sur le CSS.
Mesurer les gains réels sur les Core Web Vitals
Supprimer du CSS sans mesurer revient à naviguer sans boussole. Il convient donc de comparer un avant et un après, sur les mêmes pages et les mêmes conditions.
Selon Google, via son outil PageSpeed Insights, plusieurs indicateurs traduisent ce gain :
- Une baisse du LCP, le contenu principal s’affichant plus tôt.
- Un meilleur First Contentful Paint (FCP) grâce à un rendu moins bloqué.
- Une réduction du poids total transféré, visible dans l’onglet Réseau.
En pratique, un CSS qui passe de 300 Ko à 40 Ko après purge fait souvent gagner plusieurs dizaines de points au score Lighthouse mobile. Le démarrage du rendu, lui, devient nettement plus franc.
Au-delà du CSS : les autres leviers d’optimisation
Le CSS n’est qu’une pièce du puzzle. L’optimisation des images reste le levier le plus rentable sur la majorité des sites, car ce sont elles qui pèsent le plus lourd.
Pour améliorer durablement la vitesse de chargement, on peut combiner plusieurs conseils complémentaires :
- Compresser et convertir les images au format WebP ou AVIF.
- Différer le JavaScript non critique pour libérer le fil principal.
- Mettre en cache les ressources statiques côté navigateur et serveur.
- Servir le contenu via un CDN pour rapprocher les fichiers de l’utilisateur.
Cela étant dit, traiter le CSS d’abord a un mérite : c’est rapide, peu risqué, et le résultat se voit immédiatement dans Coverage. Un bon point d’entrée pour qui débute.
Points clés à retenir
- Le CSS inutilisé bloque le rendu et ralentit l’affichage de vos pages.
- Chrome DevTools (onglet Coverage) mesure le CSS non utilisé page par page.
- PurgeCSS automatise la suppression, à condition de soigner la safelist.
- Sur WordPress, des extensions désactivent le CSS sans toucher au code.
- Mesurez toujours l’avant/après avec PageSpeed Insights ou Lighthouse.
Conclusion
Nettoyer son CSS n’a rien d’une opération réservée aux experts. Avec Chrome DevTools pour diagnostiquer et PurgeCSS pour agir, on tient une méthode reproductible et mesurable, accessible dès aujourd’hui.
Gardons en tête que la performance se construit par étapes : un CSS allégé, puis des images optimisées, puis un cache bien réglé. Et si vous testiez votre page dès maintenant, pour voir ce que le navigateur télécharge vraiment ?
Qu’est-ce que l’optimisation de la vitesse ?
L’optimisation de la vitesse regroupe l’ensemble des techniques visant à réduire le temps de chargement d’un site : alléger le CSS et le JavaScript, optimiser les images, activer le cache et utiliser un CDN. L’objectif est d’afficher le contenu plus vite et d’améliorer les Core Web Vitals.
Comment améliorer sa vitesse de chargement rapidement ?
Le gain le plus rapide consiste à compresser les images et à supprimer le CSS inutilisé via Chrome DevTools puis PurgeCSS. Ajoutez ensuite un cache et différez le JavaScript non critique. Ces trois actions suffisent souvent à faire gagner plusieurs dizaines de points au score Lighthouse.
Pourquoi le CSS inutilisé ralentit-il un site ?
Le CSS est une ressource bloquante : le navigateur doit le télécharger et l’analyser avant d’afficher la page. Plus le fichier contient de règles jamais utilisées, plus ce traitement s’allonge, ce qui retarde le rendu et dégrade le Largest Contentful Paint.
PurgeCSS peut-il casser mon site ?
Oui, si une classe générée dynamiquement par JavaScript n’a pas été déclarée dans la safelist, PurgeCSS peut la supprimer par erreur. Il convient de tester plusieurs gabarits et de vérifier le rendu après chaque compilation avant de mettre en production.
Comment mesurer les gains après suppression du CSS ?
Comparez l’avant et l’après avec PageSpeed Insights ou Lighthouse, sur les mêmes pages. Surveillez le LCP, le FCP et le poids total transféré dans l’onglet Réseau de Chrome DevTools pour confirmer l’amélioration.