CSS inutilisé

Silktide charge vos pages dans un véritable navigateur et mesure la part de chaque feuille de style réellement utilisée pour afficher la page. Les feuilles de style contenant une grande quantité de styles inutilisés sont signalées, ainsi que l’économie potentielle.

Pourquoi c’est important

Les navigateurs ne peuvent pas afficher une page avant d’avoir téléchargé et traité son , donc chaque règle non utilisée retarde malgré tout l’instant où votre contenu apparaît. Le CSS inutilisé s’accumule naturellement : les thèmes et frameworks fournissent des styles pour chaque fonctionnalité, que vous les utilisiez ou non, et les anciens styles sont rarement supprimés lorsque les designs changent. Résultat : les visiteurs attendent une mise en forme qui ne s’affiche jamais.

Comment y remédier

Supprimez les styles que vous n’utilisez plus. Des outils de build peuvent le faire automatiquement en analysant vos gabarits et en ne gardant que le CSS qu’ils référencent.
Scindez les grandes feuilles de style afin que chaque page ne charge que les styles dont elle a besoin, plutôt qu’un unique bundle contenant les styles de toutes les pages.
Pour les styles dont une page a besoin, priorisez ceux qui rendent le premier écran et laissez le reste se charger sans bloquer :

<!-- Se charge sans bloquer le premier rendu -->
<link rel="preload" href="rest.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>

Attention à la suppression automatisée : des styles utilisés uniquement par , ou seulement sur d’autres pages partageant la feuille de style, peuvent être supprimés par erreur.

Comment Silktide teste cela

Charger la page dans un vrai navigateur et enregistrer quelles règles CSS sont appliquées pendant le chargement.
Pour chaque feuille de style, mesurer le nombre d’octets qui n’ont jamais été utilisés.
Signaler chaque feuille de style présentant un gaspillage significatif, en indiquant sa taille actuelle, le pourcentage inutilisé et les octets que vous pourriez économiser.

Dépannage

Le CSS est utilisé, mais pas immédiatement

La mesure couvre le chargement initial de la page. Les styles qui ne s’appliquent que plus tard — au survol, dans des modales, après que JavaScript a révélé du contenu — sont comptés comme inutilisés même si la page en a finalement besoin. C’est malgré tout une information utile : ces styles n’ont pas besoin de bloquer le premier rendu et sont donc de bons candidats pour un chargement séparé.

La feuille de style est partagée sur tout le site

Une feuille de style partagée est en grande partie « inutilisée » sur n’importe quelle page prise isolément. Cela peut être un compromis acceptable, puisque le fichier est après la première visite. Pesez le coût de la première visite face à la commodité avant de la scinder.