La minification est un processus d'optimisation web qui consiste à supprimer les caractères inutiles (espaces, commentaires, sauts de ligne) des fichiers CSS, JavaScript et HTML sans modifier leur fonctionnalité. La minification réduit typiquement la taille des fichiers de 20 à 60 %, accélérant le téléchargement et améliorant le temps de chargement de vos pages web.
Lorsqu'un développeur écrit du code, il utilise des espaces, indentations, commentaires et noms de variables lisibles pour faciliter la maintenance. Ces éléments sont essentiels pour les humains mais totalement inutiles pour le navigateur. La minification supprime tout ce qui n'est pas nécessaire à l'exécution du code :
/* ... */, // ..., <!-- ... -->).calculateTotalPrice devient a (uglification).Ces deux techniques sont complémentaires et souvent confondues. Elles agissent à des niveaux différents :
Bonne pratique : Combinez les deux. Minifiez d'abord vos fichiers, puis servez-les avec la compression Brotli (ou Gzip). L'effet est cumulatif : un fichier JS de 200 Ko peut passer à 120 Ko après minification, puis à 30 Ko après compression Brotli.
| Type de fichier | Réduction moyenne | Outils recommandés |
|---|---|---|
| JavaScript | 40 – 60 % | Terser, esbuild, SWC |
| CSS | 25 – 50 % | cssnano, Lightning CSS, clean-css |
| HTML | 15 – 30 % | html-minifier-terser, HTMLMinifier |
| SVG | 30 – 50 % | SVGO, svgcleaner |
La minification s'intègre dans votre pipeline de build ou directement côté serveur. Voici les approches les plus courantes :
terser input.js -o output.min.js..map permettent de remonter aux fichiers originaux dans les outils de debug sans impacter la performance.Analysez gratuitement votre site pour détecter les ressources non minifiées et estimer le gain de performance potentiel.
