Suppression du CSS inutilisé
Ne gardez que le CSS qu'une page utilise vraiment, à partir d'un export Coverage de Chrome ou du HTML et de la feuille de style. Tout s'exécute dans votre navigateur.
Supprimer le CSS inutilisé - ne garder que le CSS qu'une page utilise
La plupart des sites envoient bien plus de CSS qu'une page n'en a besoin. Un thème, un page builder ou un framework apporte des styles pour chaque widget qu'il pourrait un jour afficher, et le navigateur doit tout télécharger et analyser avant de pouvoir dessiner la page. Cet outil réduit une feuille de style aux règles qu'une page utilise réellement, de deux façons : à partir de l'export Coverage enregistré par les DevTools de Chrome, ou à partir du HTML de la page et du CSS lui-même.
Les deux fonctionnent entièrement dans votre navigateur. La feuille de style, le HTML et le fichier Coverage sont lus sur votre propre machine et ne sont jamais envoyés, ce qui compte quand le CSS appartient au site pas encore publié d'un client.
Deux façons de procéder
| Mode | Ce que vous lui donnez | Ce qu'il sait | Idéal pour |
|---|---|---|---|
| JSON Coverage | Le fichier exporté depuis le panneau Coverage des DevTools de Chrome | Exactement quelles règles le navigateur a appliquées pendant que vous utilisiez la page | Les thèmes et page builders dont vous ne pouvez pas prévoir les classes |
| HTML + CSS | Le HTML de la page et la feuille de style | Quels sélecteurs correspondent à un élément de ce HTML | Les pages statiques et les templates que vous maîtrisez |
Exporter la couverture depuis Chrome
- Ouvrez la page dans Chrome et ouvrez les DevTools.
- Ouvrez le menu aux trois points, puis More tools (Plus d'outils), puis Coverage (Couverture).
- Cliquez sur le bouton de rechargement du panneau Coverage pour que l'enregistrement commence avec le chargement de la page.
- Utilisez la page comme le ferait un visiteur : ouvrez les menus, les accordéons et les pop-ups, et redimensionnez la fenêtre aux largeurs que vous prenez en charge.
- Cliquez sur Export (Exporter) et enregistrez le fichier JSON, puis déposez-le sur l'onglet JSON Coverage et cliquez sur Extraire le CSS utilisé.
L'export liste chaque fichier chargé par la page, JavaScript compris. L'outil garde les feuilles de style, extrait des documents HTML les blocs <style> en ligne et ignore le reste, en vous indiquant combien d'entrées ont été ignorées. Le même format sort de page.coverage.stopCSSCoverage() dans Puppeteer : un enregistrement automatisé fonctionne donc aussi.
Pourquoi les règles retournent dans leur @media
Chrome enregistre la couverture règle par règle. Pour une règle située dans @media (max-width: 768px) { ... }, il enregistre la règle, pas la ligne @media qui l'entoure. Un outil qui se contente de copier les plages enregistrées produit donc la règle mobile seule, et elle s'applique alors à toutes les largeurs d'écran. Cet outil lit d'abord toute la feuille de style sous forme d'arbre : chaque règle conservée est réécrite dans son propre bloc @media, @supports, @container ou @layer, et un bloc qui ne contient plus rien disparaît.
Certaines règles @ sont toujours conservées, parce que d'autres règles en dépendent au lieu que la page leur corresponde : @font-face, @keyframes, @import, @charset, @property et la déclaration d'ordre @layer. Les règles conservées sont copiées telles qu'elles ont été écrites : les commentaires qu'elles contiennent, la mise en forme et les hacks propres aux navigateurs restent exactement comme dans l'original.
Le mode HTML + CSS
Collez le HTML de la page et la feuille de style, ou déposez les deux fichiers. L'outil analyse le HTML comme le ferait le navigateur, sans exécuter aucun script, et garde une règle si l'un de ses sélecteurs correspond à un élément. Les états et pseudo-éléments comme :hover, :focus et ::before sont ignorés pour ce test : .menu a:hover reste donc si la page contient un .menu a. Un sélecteur que le navigateur ne sait pas analyser est conservé plutôt que deviné, et les @keyframes ne survivent que tant qu'une règle conservée ou un style en ligne nomme encore l'animation.
Le point faible, c'est JavaScript. Une classe qu'un script ajoute plus tard, comme is-open sur un menu ou active sur une diapositive, ne figure pas dans le HTML que vous avez collé, et ses règles semblent donc inutilisées. Indiquez ces noms dans Toujours conserver, séparés par des espaces ou des virgules ; les id fonctionnent avec ou sans #, et un motif entre barres obliques, comme /^elementor-/, conserve toutes les classes qui lui correspondent. Si plusieurs pages partagent une même feuille de style, collez leurs HTML les uns à la suite des autres.
Ce que signifient les chiffres
Après chaque passage, l'outil indique ce qu'il a conservé, combien de règles ont survécu et, en mode Coverage, une ligne par feuille de style. En mode HTML + CSS, Sélecteurs supprimés liste ce qui a été retiré : c'est le moyen le plus rapide de repérer une classe qui aurait dû figurer dans la liste de classes à conserver. Gardez le fichier d'origine : le résultat est une nouvelle feuille de style, et le seul vrai test consiste à charger la page avec elle et à regarder.
Les limites à connaître
- Coverage ne connaît que ce qui s'est passé pendant l'enregistrement. Un état de survol jamais déclenché, un menu jamais ouvert ou une largeur jamais essayée compte comme inutilisé.
- La couverture d'une page ne dit rien des autres pages qui chargent le même fichier. Lancez l'outil sur chaque template principal, ou gardez entière une feuille de style de base commune.
- Les styles ajoutés par JavaScript à l'exécution, via des attributs
styleou des feuilles injectées, échappent aux deux modes. - Les feuilles de style d'autres sites, comme les polices ou le CSS de widgets sur un CDN, apparaissent aussi dans l'export ; gardez-les ou retirez-les en connaissance de cause.
Là où il sert le plus
- Les pages construites avec Elementor, Divi ou un autre page builder, qui chargent le CSS de chaque widget sur chaque page. Le guide pour transformer une page Elementor en simple HTML et CSS détaille toute l'opération.
- Les thèmes et frameworks comme Bootstrap, dont une landing page n'utilise qu'une fraction des classes.
- L'intégration du CSS critique en ligne ou la création d'un template d'e-mail, où chaque octet de style a un coût.
- L'audit d'une ancienne feuille de style avant une refonte, pour voir quelles règles servent encore à une page.
En ligne de commande
Pour une étape de build, PurgeCSS fait le travail du mode HTML + CSS depuis un script. Il lit les fichiers de contenu et les feuilles de style et écrit le CSS nettoyé dans un dossier :
npx purgecss --css css/style.css --content index.html --output dist/css/Puppeteer enregistre la même couverture que le panneau Coverage, et sa sortie peut être enregistrée en JSON puis déposée sur cet outil :
await page.coverage.startCSSCoverage();
await page.goto('https://example.com');
const coverage = await page.coverage.stopCSSCoverage();
fs.writeFileSync('coverage.json', JSON.stringify(coverage));Outils associés
Un export Coverage est du JSON : le formateur JSON est donc le moyen le plus rapide d'en examiner le contenu. Construisez et testez les motifs de Toujours conserver avec le testeur de regex, et compressez les images que la page allégée transporte encore avec le convertisseur d'images.