Minification : expliqué simplement.

La minification consiste à retirer d'un fichier tout ce dont le navigateur n'a pas besoin pour l'exécuter : espaces, retours à la ligne, commentaires et noms de variables trop longs. Le résultat est un fichier plus léger qui se comporte exactement comme l'original. Elle concerne surtout le HTML, le CSS et le JavaScript, les trois types de fichiers que chaque page web télécharge avant de s'afficher.

Des fichiers plus légers circulent plus vite sur le réseau, ce qui améliore le temps de chargement et des métriques comme le Largest Contentful Paint. Sur une connexion mobile lente, la différence est nettement perceptible.

Un minificateur analyse le code, puis le réécrit sous la forme valide la plus compacte. Pour le CSS, il supprime les espaces, les commentaires et les unités redondantes. Pour le JavaScript, il peut aussi raccourcir les noms de variables locales (on parle de « mangling ») et retirer le code qui ne sera jamais exécuté.

/* Avant */
.button {
color: #ffffff;
margin: 0px 0px 0px 0px;
}

/* Après */
.button{color:#fff;margin:0}

La version minifiée est illisible pour un humain. C'est pourquoi les équipes conservent le code source lisible dans leur dépôt et ne livrent que la version minifiée en production.

• HTML : retire les commentaires, les espaces superflus et les guillemets d'attributs facultatifs.
• CSS : fusionne les valeurs raccourcies, retire les commentaires et raccourcit les couleurs.
• JavaScript : supprime les commentaires, raccourcit les identifiants et retire le code mort.
• JSON et SVG : peuvent aussi être minifiés, car ce sont des formats texte.

Ces trois techniques sont souvent confondues, mais elles répondent à des problèmes différents et fonctionnent mieux ensemble.

Un fichier minifié profite encore de Gzip ou de Brotli, avec généralement une réduction de poids supplémentaire de 60 à 80 %.

• Minifiez lors du build, jamais à la main, et gardez le code source lisible sous gestion de versions.
• Générez des source maps pour retrouver le code d'origine à partir d'une erreur en production.
• Testez la version minifiée : un mangling JavaScript agressif peut casser un code qui dépend des noms de fonctions.
• Ne minifiez pas deux fois un fichier et évitez de retoucher les scripts tiers déjà minifiés.
• Associez minification, cache navigateur et CDN pour un effet maximal.

Le poids des pages est l'un des gains de performance les plus simples à obtenir, et nous l'intégrons à chaque projet. Dans nos missions de création et développement de site web, nous vérifions que le CSS, le JavaScript et le HTML sont minifiés, compressés et mis en cache correctement, puis nous mesurons le résultat avec les Core Web Vitals afin que le gain de vitesse soit réel.