Utilisation du CSS Me pas Bookmarklet

Stoyan a tout à fait raison. Bien que nous aimions tous le CSS, c'est toujours un facteur important dans la vitesse de chargement du site Web, et la réduction de l'utilisation du CSS est une bonne chose. Il a créé un signet pratique intitulé "CSS Me Not" pour diagnostiquer les fichiers CSS inutiles, que nous couvrirons plus en détail plus tard.

Le problème est que CSS est sur un chemin critique, qui bloque le rendu et bloque souvent l'exécution JavaScript. Nous aimons CSS, c'est incroyable, il peut faire des exploits incroyables, réparer l'interface utilisateur endommagée, manipuler des images et dessiner des images incroyables. Nous aimons CSS. Nous voulons juste… moins de CSS parce que sa nature bloque.

Parfois, notre site Web utilise des feuilles de style entières complètement inutiles. Je dois admettre que WordPress est connu pour cela, et il charge les feuilles de styles pour les plugins et les blocs que vous ne pouvez pas du tout utiliser. J'étais dans cette situation car j'ai écrit cet article. Je n'ai tout simplement pas trouvé le temps de nettoyer quelques petits feuilles de style qui n'ont pas besoin d'être chargées.

Stoyan a créé un signet rapide intitulé "CSS Me Not" pour afficher tous ces fichiers CSS. Bien sûr, le plus grand avantage est qu'il vous permet de savoir à quoi vous êtes confronté.

Vous pouvez également trouver ces feuilles de style dans Devtools, mais le signet "CSS Me Not" le rend plus facile, et il y a un supplément de tueur: éteignez ces feuilles de style . Testant ce signet sur mon site Web CSS-Tricks, je peux voir que WordPress charge quatre feuilles de style (en raison des paramètres et des plugins) Je sais que je n'en ai pas besoin.

Si vous souhaitez le faire dans Devtools, vous pouvez appuyer sur CSS pour filtrer vos demandes de réseau, trouver la feuille de style que vous souhaitez fermer, cliquer avec le bouton droit et bloquer, puis recharger.

Je travaille là-dessus depuis des années, des scripts et des styles sans doute dans WordPress.

La suppression d'une feuille de style complètement inutilisée est une victoire évidente, mais il y a un problème plus difficile, qui est de supprimer le CSS inutilisé. Dans ce post, j'ai mentionné que la seule façon de vraiment comprendre si un CSS particulier n'est pas utilisé, est de fixer une image d'arrière-plan à chaque sélecteur, puis de vérifier le journal du serveur après une période de production pour voir quelles images n'ont jamais été demandées. Stoyan a confirmé ce que j'ai dit ici:

UNCSS est un peu comme un "laboratoire". Le "monde réel" peut vous surprendre. Nous avons donc fait une astuce chez SomeCompany Inc. pour ajouter des outils pour toutes les déclarations CSS au moment de la construction, où chaque sélecteur obtient une image d'arrière-plan transparente 1 × 1. Vérifiez ensuite soigneusement les journaux du serveur après environ une semaine pour voir ce qui est réellement utilisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!