Comment se débarrasser du code CSS inutilisé? Partie 1

L'auteur de l'article, dont nous publions aujourd'hui la première partie de la traduction, souhaite que les lecteurs sachent à l'avance que se débarrasser des CSS inutiles est une tâche difficile. Si vous lisez ceci dans l'espoir de trouver un outil, de l'exécuter, vous pouvez savoir exactement quel code CSS peut être supprimé en toute sécurité de votre projet, alors ... Il existe des outils similaires, mais ils doivent être utilisés très soigneusement, car aucun d'entre eux pas en mesure de donner une réponse décente à la question des CSS inutilisés.



Il est facile de comprendre que tout développeur Web souhaite utiliser une sorte d'utilitaire, l'exécuter et supprimer le CSS inutile qu'il rapporte. Quelques minutes - et le site est accéléré. Mais pas si simple. L'auteur de ce document estime qu'un tel outil doit être traité avec un scepticisme sain. Aucun d'entre eux ne ment au développeur. Ces outils ne disposent généralement pas de suffisamment d'informations pour leur permettre de produire des résultats auxquels on peut faire confiance sans condition. Mais cela ne signifie pas que de tels outils ne peuvent pas être utilisés. Cela ne signifie pas que vous ne pouvez en aucun cas vous débarrasser du CSS inutilisé. Nous en discutons.

→ Lire la deuxième partie

Pourquoi se débarrasser du CSS inutilisé?

Je crois que la principale raison pour laquelle quelqu'un pourrait avoir besoin de se débarrasser du CSS inutilisé peut être décrite en utilisant l'exemple suivant. Supposons que vous utilisez un framework CSS (comme Bootstrap) et que tout le code CSS de ce framework pénètre dans votre projet. Mais en réalité, seule une petite partie de ce code est utilisée dans le projet. Comment se débarrasser de tout ce qui n'est pas nécessaire?

Je peux ressentir les sentiments d'une personne qui se trouve dans une situation similaire. Les frameworks CSS ne donnent souvent pas aux développeurs des moyens faciles de sélectionner exactement les fonctionnalités qui s'appliquent à des projets spécifiques. Dans le même temps, amener le code source du framework à un état correspondant idéalement à un certain projet peut nécessiter une équipe d'un niveau d'expérience qu'il peut ne pas avoir. Une situation similaire en soi peut devenir la raison de la recherche du cadre.

Supposons que vous téléchargiez 100 Ko de CSS. Je dirais que c'est beaucoup. (Au moment où j'écris ceci, css-tricks.com utilise environ 23 Ko de CSS. Il y a beaucoup de pages et de modèles. Je n'ai rien fait de spécial pour réduire la taille de CSS.) On soupçonne que vous n'utilisez pas une partie de cette quantité de code. Et peut-être en trouvez-vous des preuves. Je vois une raison de sonner l'alarme. Si vous avez un fichier jpg de 100 ko qui peut être compressé à 20 ko en le traitant avec une sorte d'outil, alors c'est génial et ça vaut le coup. Mais si quelque chose comme ça se fait avec CSS, alors c'est beaucoup plus important. Le fait est que CSS se charge au début du chargement de la page et est une ressource qui bloque le rendu. Les fichiers JPG ne sont pas de telles ressources.

Analyse de situation avec Chrome Developer Tools

La fenêtre Chrome Developer Tools possède un onglet Coverage . Avec son aide, vous pouvez savoir combien de CSS et JavaScript chargés sont réellement utilisés sur la page analysée. Par exemple, maintenant je suis allé sur css-tricks.com. Voici ce que j'ai vu sur l'onglet Coverage .


Outils de développement Chrome, onglet Couverture

Ici, je vois que 70,7% de mon fichier style.css n'est pas utilisé. Je pense qu'il n'y a rien de mal à cela. La partie inutilisée restante de CSS est utilisée sur certaines autres pages du site. Sur ce site, je n'utilise pas une grande bibliothèque de styles. J'ai moi-même écrit chaque ligne de CSS, donc je doute que 2/3 du CSS ne soient pas à leur place dans le monde.

J'ai supposé que lorsque vous travaillez avec l'onglet Coverage , vous pouvez commencer à «enregistrer» et vous promener sur le site, en regardant comment le pourcentage de ressources inutilisées diminue lorsque différentes pages sont affichées dans le navigateur. Mais, malheureusement, lorsque la page est actualisée, le contenu de l'onglet Coverage est également mis à jour. Par conséquent, cet outil n'est pas particulièrement utile pour déterminer le pourcentage d'utilisation des ressources sur plusieurs pages. Ce n'est peut-être pas seulement si vous analysez une application d'une page.

C'est désagréable pour moi de dire cela, mais l'analyse du site à l'aide de l'onglet Coverage s'est avérée presque inutile. Ce que j'ai vu, ces 70,7%, est une image terrible qui joue sur mes doutes, mais cette analyse ne me donne rien de concret, du coup je ne peux que m'inquiéter de quelque chose de mal sur mon site.

Peut-être que cette analyse du site sera le mécanisme même qui vous mènera à l'idée que vous devez trouver et supprimer le code CSS qui se charge, mais n'est pas utilisé dans votre projet.

Mon principal problème

Pour trouver et supprimer des CSS inutilisés, les points suivants me préoccupent le plus. Supposons que quelqu'un regarde les résultats de l'analyse et voit des fragments CSS inutilisés.


Extraits CSS inutilisés

Il pense: "Très bien, supprimez tout ce qui n'est pas nécessaire!". Le superflu est supprimé, puis il s'avère qu'il n'était pas du tout superflu et que sa suppression a entraîné de gros problèmes de style sur l'ensemble du site. Voici la chose: vous pouvez être sûr que certains sélecteurs CSS ne sont pas utilisés, uniquement si vous effectuez des recherches sur le plan suivant:

1. Vous devez vérifier chaque page du site avec un outil comme l'onglet Coverage .
2. Dans ce cas, vous devez exécuter tout le code JavaScript.
3. Cela doit être fait avec toutes les options possibles pour l'état de l'application.
4. Et, en plus, vous devez vérifier tout cela avec toutes les options possibles pour les requêtes média utilisées.

Si seule la page d'accueil du site Web est cochée, cela n'est pas pris en compte. L'étude de toutes les pages de haut niveau n'est pas non plus considérée comme un véritable test. Vous devez parcourir toutes les pages, examiner le site dans des situations dont son développeur ne se souvient pas immédiatement, vérifier tous les cas limites. Sinon, tout peut se terminer par la suppression du style de la liste déroulante des cartes de crédit dans la fenêtre modale contextuelle pour les utilisateurs avec un compte désactivé qui se connectent au système pendant la période de grâce pour payer un nouvel abonnement et en même temps avoir une carte-cadeau valide.

Quelque chose comme ça est trop compliqué pour les analyseurs CSS automatisés. Ils ne sont pas en mesure d'effectuer parfaitement ces vérifications, notamment compte tenu de l'analyse du site en situation d'incertitude. Nous parlons, par exemple, de rechercher des projets dans différents contextes de navigateur (différentes tailles d'écran, différentes capacités de navigateur, différents navigateurs) et de prendre en compte l'impact des bibliothèques tierces sur le site.

Et maintenant, je veux montrer un exemple de la façon dont tous les problèmes dont je viens de parler dans la pratique.

PurifyCSS en ligne

J'ai décidé d'essayer d'optimiser css-tricks.com en utilisant la ressource PurifyCSS Online . Vous pouvez lui passer des liens et il produit immédiatement du CSS prêt à l'emploi. J'ai «alimenté» css-tricks.com sur ce site et j'avais un nouveau code CSS à ma disposition. C'est ce qui s'est produit après avoir utilisé ce code.


À gauche, la vue habituelle de css-tricks.com. À droite, le résultat de l'application de nouveaux CSS «raffinés». Ce nouveau code manquait beaucoup de ce qui est nécessaire pour les différentes pages du site

PurifyCSS vous permet d'analyser sur la base de nombreux liens (ce qui est bien), mais sur css-tricks.com il y a des dizaines de milliers de liens. Beaucoup d'entre elles conduisent à des pages similaires, en termes de CSS, mais sur chacune de ces pages, il peut y avoir quelque chose qui n'est pas utilisé ailleurs. De plus, j'ai eu l'impression que PurifyCSS n'exécutait pas de code JS, car après avoir «nettoyé» mon CSS, tout ce qui était affiché sur les pages à l'aide de JavaScript s'est avéré non stylisé. Même les styles des pseudo-classes :hover .

Probablement, j'en ai déjà assez dit pour vous faire comprendre que ce n'est pas par hasard que je fais si peu confiance à ces outils.

Purifier CSS avec PurifyCSS dans le cadre du processus de construction de projet

PurifyCSS est probablement utilisé plus souvent comme un outil utilisé pour construire un projet que comme un nettoyeur CSS en ligne. La documentation du projet contient des instructions pour son utilisation lors de l'utilisation de Grunt, Gulp et webpack. Par exemple, le traitement des fichiers par des modèles:

 var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = {  //  CSS    .  output: './dist/purified.css' }; purify(content, css, options); 

Cette approche permet une précision beaucoup plus grande. Les matériaux du site qui sont soumis pour analyse peuvent être une liste qui comprend chaque modèle, chaque fragment utilisé pour créer des pages et chaque fichier JavaScript. Il peut s'avérer qu'une telle liste de ressources n'est pas facile à maintenir, mais elle vous permet de considérer tout ce qui peut être pris en compte. Cependant, cela ne s'applique pas au contenu des pages se trouvant dans certains référentiels (tels que les articles de blog stockés dans la base de données) et au code JavaScript tiers, mais peut-être que cela est dans certains cas sans importance, ou peut-être le développeur pourra en quelque sorte prendre en compte les besoins CSS de ces ressources.

Documentation concurrente PurifyCSS PurgeCSS contient un avertissement concernant la méthode de gestion des ressources utilisée par PurifyCSS. À savoir, nous parlons du fait que PurifyCSS peut fonctionner avec des ressources de tout type, et pas seulement avec HTML et JavaScript. PurifyCSS au cours du travail analyse tous les mots dans les fichiers et les compare avec les sélecteurs en code CSS. Chaque mot est considéré comme un sélecteur. C'est-à-dire que de nombreux sélecteurs peuvent être reconnus à tort comme étant utilisés sur le site. Par exemple, dans le contenu textuel d'un fichier, dans une phrase régulière, il peut y avoir un mot correspondant à un certain sélecteur CSS.

PurifyCSS mérite d'être rappelé à ce sujet. Cet outil recherche des sélecteurs CSS dans les documents du site à l'aide d'un algorithme extrêmement simple. Ceci, d'une part, est une idée sensée, et d'autre part, c'est assez dangereux.

Service CSS inutilisé

Le réglage manuel d'un outil, effectué pour que cet outil analyse chaque page, afin qu'il l'examine de tous les points de vue possibles, est bien sûr une routine ennuyeuse. De plus, ce travail devrait être effectué quotidiennement, car les informations analysées sur le site devraient être mises à jour avec de nouvelles données au fur et à mesure du développement du projet. Il existe un service en ligne appelé UnusedCSS . Il contourne indépendamment les pages du site, épargnant au développeur de nombreux travaux monotones. Ce service suffit pour transférer un seul lien vers le site.

Je me suis inscrit pour un abonnement payant à ce service et ai analysé css-tricks.com avec lui. Je dois admettre qu'après avoir regardé les résultats, j'ai eu le sentiment qu'ils avaient l'air beaucoup plus précis que ce que j'avais vu auparavant.


Analysez css-tricks.com en utilisant UnusedCSS. Le rapport indique que le site utilise 93% du code CSS chargé. Cela me semble proche de la vérité, puisque j'ai écrit manuellement tout le code CSS de ce site

Le service, en outre, vous permet de télécharger un fichier avec le code CSS effacé et offre la possibilité de gérer le contenu de ce fichier. Par exemple, cela active et désactive les sélecteurs que le développeur souhaite ou ne souhaite pas ajouter au code CSS. Supposons qu'un développeur voit un nom de classe, qui, selon UnusedCSS, n'est pas nécessaire sur le site, mais le développeur sait avec certitude qu'il ne peut pas se passer de ce nom de classe. Par conséquent, le code reconnu à tort comme inutile peut être marqué comme nécessaire. Les autres fonctionnalités d'UnusedCSS incluent l'utilisation de préfixes et la suppression de sélecteurs en double.

J'ai vraiment aimé le fait que UnusedCSS m'a donné des résultats beaucoup plus précis que d'autres outils. Cependant, il y a trop de «bruit» dans les données générées par ce service, et je ne sais pas encore comment inclure UnusedCSS dans le processus régulièrement répété de construction d'un projet et de mise en production de ses nouvelles versions.

→ Lire la deuxième partie

Chers lecteurs! Avez-vous rencontré le problème d'avoir du code CSS inutilisé dans vos projets?