La minification CSS, tout ce que vous voulez savoir

Une optimisation de vos performances web souvent simple à mettre en place porte sur les fichiers CSS. En effet, il est généralement possible de réduire le poids de votre site web en minifiant vos “Cascading Style Sheets”.

L’article suivant a pour objectif de vous présenter le principe de la minification et introduit quelques outils populaires pour mettre en place cette technique sur votre site.

Tout d’abord, qu’est ce que la minification CSS ?

Cette technique permet de supprimer tout caractère inutile pour l’interprétation du code par un navigateur web, c’est à dire :

• les espaces, tabulations ou autres sauts de ligne
• les commentaires

Bien évidemment ces différents éléments sont loin d’être inutiles dans l’absolu : les caractères d’espacement facilitent la lecture pour le développeur, les commentaires peuvent être indispensables à la maintenance du code, etc.

Cependant, leur utilité se limite à l’étape de développement : ils ne sont d’aucune aide aux navigateurs web. Ces données vont être prises en charge, pour être ensuite ignorées. Mais surtout, ce sont autant de données inutiles qui vont transiter entre un serveur et les internautes. Une occupation de la bande passante qu’il est donc souhaitable d’éviter, afin de gagner un temps précieux sur le rendu des pages.

On notera également qu’il existe en CSS un certain nombre de syntaxes raccourcies. Par exemple :

margin-top: 10px;

margin-right: 5px;

margin-bottom: 10px;

margin-left: 5px;

Peut s’écrire, à l’aide du shortland correspondant :

margin: 5px 10px 5px 10px;

Et l’on peut encore gagner quelques caractères en utilisant :

margin: 5px 10px;

Si l’on applique l’ensemble des points évoqués sur ce fragment de CSS :

.maClass { /* Commentaire sur ma classe*/

margin: 0px 0px 0px 0px;

}

Il sera alors minifié de la sorte :

.maClass{margin:0}

L’impact de la minification reste variable d’une ressource à une autre, mais elle reste recommandée, d’autant qu’elle est souvent une simple option à activer dans votre solution de compilation Front-End.

Speed Analysis en vidéo

Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !

Voir la vidéo

Minification CSS ou compression ?

Il ne faut pas confondre minification et compression. La compression utilise des algorithmes spécifiques afin de réduire la taille du fichier : le serveur compresse la ressource, qui transite sur le réseau et doit obligatoirement être décompressée avant son interprétation par le navigateur du client. La minification ne nécessite quant à elle aucune opération côté client.

Voyons l’évolution de la taille d’une ressource lambda à travers ces différentes opérations :

Ces valeurs ne montrent pas une grande différence entre le fichier brut Gzippé et le fichier minifié puis Gzippé (1 Ko de différence). Mais cela représente malgré tout un gain d’environ 7%, ce qui n’est pas négligeable rapporté à l’ensemble de vos fichiers CSS. Pourquoi s’en priver quand on sait que cela peut être automatisé ?

Comment minifier vos ressources ?

Plusieurs choix sont possibles, le contexte de votre projet web vous permettra très certainement de trouver celui qui vous convient sans hésitation.

Dans votre chaîne de Production

Le code écrit par vos développeuses et développeurs n’est pas celui qui est proposé à vos utilisateurs. La gestion des dépendances, la gestion des environnements, le support des anciens navigateurs ou encore le rafraichissement de la page à la volée lors de l’écriture du code : tout cela est probablement déjà géré par une brique d’industrialisation du code Front-End. Ce logiciel, véritable chef d’orchestre de votre Front-End philharmonique, s’occupe d’automatiser les tâches ingrates d’installation, développement, packaging, nettoyage et diffusion de votre code.Dans ce contexte, la minification n’est probablement qu’une case à cocher dans la longue liste des options disponibles pour que les fichiers CSS soient minifiés tout en disposant des informations nécessaires au débogage (les CSS sourcemaps, des tableaux qui associent le code minifié à son équivalent non-minifié avec que les devs puissent maintenir le code plus facilement).

Speed Analysis en vidéo

Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !

Voir la vidéo

Les outils en ligne

• De nombreux outils en ligne existent également pour répondre à ce besoin. Des sites comme css-minifier.com pourront vous rendre des services ponctuels, simples et rapides.

Ces outils en ligne peuvent être pratiques pour certaines utilisations, mais dans la plupart des cas, il est préférable d’automatiser le processus de minification dans le workflow de développement en utilisant l’un des nombreux utilitaires existant.

Minification CSS : les outils hors ligne

De nombreuses briques node (un moteur pour exécuter JavaScript hors du navigateur, très utilisé par les équipes de développement Front-End) permettent une excellente minification des CSS. “clean-css”, “CSSO”, ou “cssnano” sont par exemple tous trois en mesure de minifier le CSS, mais aussi de réaliser une analyse structurelle permettant d’agréger des déclarations de règles redondantes et de restructurer le code pour réduire encore le poids du fichier tout en facilitant le travail du navigateur.Minification CSS : les options intégrées 

Même si les fichiers CSS ne sont pas minifiés avant d’être déployés sur votre site, tout n’est pas perdu. i Certaines solutions, comme le CMS WordPress, proposent des plugins tels que WP Rocket ou W3 Total Cache qui peuvent remplir cette tâche. Speed Analysis se chargera d’ailleurs de vous les recommander si WordPress est détecté lors de l’analyse :

Un concept extensible

Nous avons jusqu’ici décrit des optimisations de contenu des fichiers CSS, mais n’avons pas interrogé la pertinence de ce contenu. Des outils comme PurifyCSS parcourent l’ensemble de votre site et déterminent si les règles présentes à l’intérieur de vos fichiers CSS sont utiles ou non. Les règles inutiles sont purgées du fichier CSS final.

Si la théorie est séduisante, manipulez ces outils avec une grande précaution : si le parcours initial n’est pas exhaustif, alors l’outil ne sera pas exposé à certains besoins et peut considérer que des portions utiles du code doivent être nettoyées. Réservez donc ces outils à des usages avisés, lors d’audit réalisés à la demande, et pas dans une chaîne automatisée.

Sachez enfin que ces principes de minification et d’analyse de l’usage s’appliquent aussi bien aux fichiers CSS, qu’à d’autres ressources, comme les fichiers JavaScript ou encore les pages HTML.Peut-être aurons-nous l’occasion d’en parler dans un futur article !

Speed Analysis en vidéo

Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !

Voir la vidéo