La réponse courte
La minification est un nettoyage des espaces et des commentaires. Une feuille de style écrite avec une propriété par ligne, des commentaires et une indentation de quatre espaces devient une seule ligne compacte que le navigateur interprète exactement de la même façon. Rien ne change à l'écran ; seul le nombre d'octets envoyés sur le réseau diminue.
L'outil ci-dessous gère le HTML, le CSS et le JavaScript. Choisissez le langage, réglez Action sur Minifier, collez votre code ou ouvrez un fichier : le résultat s'affiche à droite avec la taille avant et après et le gain obtenu. Copiez-le ou téléchargez-le sous forme de fichier. Votre code est traité dans le navigateur et n'est pas envoyé.
Essayez ici : Minifier CSS
Ouvrir la page complète de l'outilCe que la minification retire, et ce qu'elle doit garder
Un minifieur n'est sûr que s'il comprend assez bien le langage pour savoir quels caractères ont un sens. Retirer le mauvais espace casse le code sans prévenir, c'est pourquoi les règles diffèrent d'un langage à l'autre.
Certains outils vont plus loin que les espaces. Les bundlers JavaScript comme Terser ou esbuild renomment aussi les variables locales en une seule lettre et suppriment le code inaccessible ; les outils CSS comme cssnano ou Lightning CSS raccourcissent les couleurs (#ffffff en #fff) et fusionnent les règles. On gagne davantage, mais c'est une transformation de votre code, pas un simple nettoyage, et elle a sa place dans un processus de build testé. Le minifieur de cette page s'arrête volontairement aux commentaires et aux espaces, ce qui permet de l'utiliser sans risque sur n'importe quel extrait, même sans tests automatisés.
- CSS : les commentaires et les retours à la ligne partent, mais l'espace d'un sélecteur descendant comme .menu a doit rester, et calc(1px + 2px) a besoin des espaces autour du + et du moins. Les commentaires de licence qui commencent par /*! sont en général conservés.
- JavaScript : les commentaires et l'indentation partent, mais les chaînes, les template literals et les expressions régulières ne doivent pas être touchés. Dans du code sans points-virgules, un retour à la ligne peut terminer une instruction, donc certains retours à la ligne doivent rester.
- HTML : les espaces entre éléments de bloc partent et les suites d'espaces sont réduites à un seul, mais l'espace entre deux liens dans une phrase est visible et doit rester. Le contenu des balises pre et textarea est conservé tel quel.
Combien fait gagner la minification ?
Le gain dépend de la façon dont le fichier a été écrit. Les fichiers très commentés et largement indentés réduisent le plus. Voici des fourchettes habituelles pour du code écrit à la main, avant compression par le serveur :
| Type de fichier | Gain habituel de la minification | Ce qui fait la différence |
|---|---|---|
| CSS | 15 à 30 pour cent | Commentaires, indentation, une propriété par ligne |
| JavaScript (espaces seulement) | 20 à 40 pour cent | Commentaires et indentation ; les noms longs restent |
| JavaScript (avec renommage) | 40 à 70 pour cent | Variables locales raccourcies par un bundler |
| HTML | 10 à 25 pour cent | Indentation et commentaires entre les éléments |
Minifier ou compresser en gzip ? Les deux
Les serveurs et les CDN compressent en général les fichiers texte en gzip ou en Brotli avant de les envoyer, ce qui réduit déjà le CSS et le JavaScript d'environ 60 à 80 pour cent. La compression est très efficace sur les espaces répétés : le gain supplémentaire de la minification est donc plus faible après compression qu'avant, souvent de l'ordre de 5 à 20 pour cent de la taille compressée.
Cela vaut quand même la peine. Les fichiers minifiés sont analysés un peu plus vite, les commentaires contenant des notes internes n'arrivent jamais chez le public, et le gain s'accumule à chaque page vue. Des outils comme Lighthouse et PageSpeed Insights signalent depuis longtemps le CSS et le JavaScript non minifiés pour cette raison. Vérifiez aussi que la compression est bien activée : dans les outils de développement du navigateur, ouvrez l'onglet Réseau, cliquez sur un fichier CSS et cherchez un en-tête de réponse content-encoding avec gzip ou br.
Les façons de minifier, d'un fichier à un site entier
La bonne méthode dépend de la fréquence à laquelle le code change.
- Un fichier ou un extrait : collez-le dans l'outil ci-dessus. Pratique pour des scripts intégrés dans un CMS, une feuille de style de modèle d'e-mail, un widget que vous livrez à un client, ou pour voir combien un fichier gagnerait.
- Un site avec une étape de build : laissez le bundler s'en charger. Vite, webpack, Parcel et esbuild minifient les builds de production par défaut, donc il suffit en général de lancer la commande de build de production.
- Un site sans étape de build : beaucoup de CMS (WordPress via des extensions de cache, par exemple) et certains CDN proposent une option de minification automatique. Testez les pages après l'avoir activée, car une minification HTML ou JavaScript trop agressive est la cause la plus fréquente d'une mise en page ou d'un script cassé après ce genre de réglage.
- Frameworks côté serveur : ASP.NET, Django, Rails ou Symfony ont tous des pipelines d'assets ou des paquets qui minifient au moment de la publication.
Quand le code minifié casse, et comment réparer
La plupart des problèmes viennent d'un code d'origine qui dépend de quelque chose que le minifieur modifie, ou d'un minifieur trop agressif. Voici les suspects habituels :
- Points-virgules manquants et minifieur JavaScript agressif : une ligne qui commence par ( ou [ se retrouve collée à la précédente. Gardez les retours à la ligne (comme le fait cet outil) ou ajoutez les points-virgules.
- Deux fichiers concaténés après minification : si le premier ne se termine pas par un point-virgule, le second peut être lu comme un appel de fonction. Terminez chaque fichier correctement ou laissez un bundler les assembler.
- Hacks CSS et syntaxe inhabituelle : d'anciens hacks pour vieux navigateurs qui dépendent d'espaces précis peuvent cesser de fonctionner. Supprimez ceux dont vous n'avez plus besoin.
- Code qui lit son propre texte ou le nom de ses fonctions : les minifieurs qui renomment le cassent, ceux qui ne touchent qu'aux espaces non.
- Erreurs de syntaxe dans la source : un minifieur ne peut pas les corriger. L'outil de cette page signale les chaînes, commentaires et balises non fermés avec la ligne et la colonne : corrigez d'abord l'original.
Les bonnes habitudes
Ne modifiez jamais directement un fichier minifié. Gardez la source lisible dans votre gestion de versions et traitez la copie minifiée comme un résultat de build qu'on peut regénérer à tout moment. Si vous devez lire le fichier minifié de quelqu'un d'autre, réglez Action sur Formater dans le même outil pour retrouver une indentation lisible.
Si vous utilisez un outil de build, générez des source maps pour la production. Elles permettent aux outils de développement du navigateur d'afficher les lignes d'origine pendant le débogage, tandis que les visiteurs téléchargent toujours le petit fichier.