CSS inutilisés

Silktide charge vos pages dans un véritable navigateur et mesure quelle proportion de chaque feuille de style est réellement utilisée pour afficher la page. Les feuilles de style comportant une grande quantité de styles inutilisés sont signalées, avec l'économie potentielle.

Pourquoi c'est important

Les navigateurs ne peuvent pas afficher une page tant qu'ils n'ont pas téléchargé et traité son , donc chaque règle qui n'est pas utilisée retarde quand même le moment où votre contenu apparaît. Le CSS inutilisé s'accumule naturellement : les thèmes et les cadriciels (frameworks) fournissent des styles pour chaque fonctionnalité, que vous les utilisiez ou non, et les anciens styles sont rarement supprimés lorsque les conceptions changent. Le résultat, c'est que les visiteurs attendent des styles qui n'affichent jamais rien.

Comment le corriger

Supprimez les styles que vous n'utilisez plus. Des outils de build peuvent le faire automatiquement en analysant vos gabarits et en ne conservant que le CSS auquel ils font référence.
Séparez les grandes feuilles de style afin que chaque page ne charge que les styles dont elle a besoin, plutôt qu'un seul 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>

Faites attention à la suppression automatique : les styles utilisés uniquement par , ou uniquement sur d'autres pages qui partagent 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 combien de ses octets 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 révèle du contenu - sont comptés comme inutilisés même si la page en a finalement besoin. C'est tout de même une information utile : ces styles n'ont pas besoin de bloquer le premier rendu, ils sont donc de bons candidats pour un chargement séparé.

La feuille de style est partagée à l'échelle du site

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