Un audit CSS examine le volume de styles, leur utilisation et la spécificité des sélecteurs. « Inutilisé » signifie qu’une règle n’a pas été utilisée dans l’état testé de la page. Elle peut rester nécessaire à l’ouverture d’un menu ou à une autre largeur de fenêtre.
Définir les pages et les interactions à tester
Choisissez des pages présentant différents éléments d’interface : un en-tête commun, une liste de produits ou un formulaire. Testez aussi l’ouverture des menus, les erreurs de validation et le changement d’onglet. Utilisez les mêmes largeurs de fenêtre et les mêmes interactions avant et après la modification.
Analysez une page publique avec le CSS Scanner de Milten. Notez la feuille de styles et les problèmes détectés. Prévoyez une vérification manuelle pour les états que l’analyse ne couvre pas.
Ne pas supprimer du CSS sur la seule base du pourcentage inutilisé
Prenons un exemple illustratif : un menu est fermé au chargement de la page. Ses styles peuvent être inutilisés au départ, mais nécessaires à son ouverture. Testez l’interaction avant de conclure qu’une règle est superflue.
La documentation de Coverage dans Chrome DevTools explique comment enregistrer l’utilisation du CSS et du JavaScript pendant les interactions. Une règle inutilisée lors d’un enregistrement n’est pas forcément inutile sur l’ensemble du site.
Pour chaque règle à supprimer, identifiez le fichier source ou l’étape de compilation qui la produit. Modifiez la source, relancez la compilation et vérifiez le résultat plutôt que de modifier directement un fichier minifié.
Examiner les doublons et la spécificité
Des déclarations identiques peuvent s’appliquer dans des conditions différentes. Vérifiez les requêtes média, les états des éléments et l’ordre de la cascade. Après avoir fusionné des règles, assurez-vous que les mêmes éléments conservent les styles prévus.
Autre exemple : l’ajout répété de !important pour modifier la couleur d’un bouton. Examinez d’abord les règles en conflit et leur spécificité. Le guide MDN sur la spécificité vous aidera à exprimer les priorités souhaitées dans le code source.
Vérifier l’affichage et les interactions après publication
Analysez à nouveau l’URL après la modification. Contrôlez les boutons, les formulaires et les menus, en plus de la taille du fichier. Vérifiez les retours à la ligne et les indicateurs de focus sur mobile et sur grand écran.
Utilisez Design Tokens pour examiner les valeurs communes de couleur et d’espacement. Si le problème d’affichage concerne le balisage, consultez le guide de vérification HTML.
Supprimer du CSS inutilisé accélère-t-il toujours la page ?
L’ordre de chargement, le transfert des ressources et le JavaScript influencent aussi la vitesse. Comparez les résultats de Speed Scanner dans les mêmes conditions.
Une analyse automatique suffit-elle ?
Il faut aussi vérifier les interactions pertinentes et plusieurs largeurs de fenêtre. Distinguez le périmètre de l’analyse automatique des états contrôlés manuellement.
Analysez le CSS d’une page publique. Conservez les conditions initiales et les constats avant toute modification.
