Minifier du CSS

Où partent vraiment les octets

L'essentiel du gain vient des espaces et des commentaires, qui dans une feuille de style écrite à la main représentent beaucoup — l'indentation, les lignes vides entre les règles et les titres de section qui rendent un gros fichier navigable sont du pur surpoids une fois le fichier servi. Au-delà, les valeurs sont raccourcies d'une manière qui ne peut pas en changer le sens : une couleur écrite #ffffff devient #fff, 0px devient 0 car zéro n'a pas besoin d'unité, le zéro initial de 0.5em disparaît, et margin: 10px 10px 10px 10px se réduit à margin: 10px.

Ce qui n'est délibérément pas fait, c'est la catégorie risquée. Fusionner des règles aux déclarations identiques, ou les réordonner, modifie la cascade — et la cascade est la partie du CSS où deux règles de même spécificité sont départagées par celle qui vient en dernier. Un minifieur qui réordonne agressivement produira un fichier plus léger et, dans une grande feuille de style, une page subtilement différente. Les déclarations en double sont d'ailleurs souvent volontaires, laissées comme solutions de repli pour les anciens navigateurs qui ignorent la seconde.

Les règles imbriquées et la syntaxe moderne des plages de media queries sont refusées plutôt que minifiées, et la raison mérite d'être expliquée, car c'est l'inverse de ce que font la plupart des outils. L'analyseur utilisé ici est antérieur à ces deux fonctionnalités, et quand il rencontre quelque chose qu'il ne comprend pas, il ne signale aucune erreur — il le supprime en silence : un bloc imbriqué disparaît tout simplement du résultat, et la page perd des styles sans que rien ne l'ait signalé. Refuser le fichier est la réponse honnête. Si votre feuille de style utilise l'imbrication native ou @media (400px <= width <= 700px), utilisez l'un des outils ci-dessous.

Comme pour le balisage, jugez le résultat après compression. Les feuilles de style sont servies compressées en gzip ou en brotli, et ces algorithmes gèrent déjà très bien les espaces répétés — si bien qu'un fichier réduit de 30 % par la minification ne diminuera peut-être que de 5 % sur le réseau. Le gain est réel, et plus modeste que le chiffre affiché.

Si vous cherchez autre chose

Lightning CSS est le bon outil pour les feuilles de style modernes : il comprend l'imbrication, les plages de media queries, les fonctions de couleur et tout ce qui a été ajouté ces dernières années, minifie plus fort que n'importe quel outil plus ancien, et transpile au passage la nouvelle syntaxe pour les anciens navigateurs. esbuild --minify style.css est presque aussi bon et extrêmement rapide. Tous deux ont leur place dans une étape de build plutôt que dans un onglet de navigateur.

Le gain de loin le plus important consiste généralement à supprimer les règles que vous n'utilisez pas. Un site construit sur un framework utilitaire ou une bibliothèque de composants livre couramment des feuilles de style dont la majeure partie ne correspond à rien sur la page — et PurgeCSS, ou le build du framework lui-même, les réduira d'un ordre de grandeur. Minifier du CSS inutilisé donne du CSS inutilisé plus léger ; le supprimer est la vraie solution.