Minifier et embellir HTML, CSS et JavaScript

Deux sens

Minifier retire tout ce dont un navigateur n’a pas besoin : espaces, sauts de ligne, commentaires, et en JavaScript même les longs noms de variables, pour que les fichiers se téléchargent plus vite. Embellir fait l’inverse et dispose le code avec une indentation et des sauts de ligne réguliers : c’est ainsi qu’on lit un fichier minifié ou qu’on range du code collé depuis ailleurs. Le poids avant et après s’affiche pour chaque résultat minifié.

Ce que fait chaque minifieur

• JavaScript, avec Terser : retire les espaces et les commentaires, et avec Raccourcir les noms de variables renomme les variables locales en lettres uniques. Compresser le code retire aussi le code qui ne peut jamais s’exécuter et simplifie les expressions. Raccourcir les noms de premier niveau va plus loin, ce qui n’est sûr que pour les scripts que d’autres scripts n’atteignent pas par des noms globaux. Retirer les appels console supprime les traces destinées au développement.
• CSS, avec CSSO : retire les espaces et les commentaires, raccourcit les couleurs et les valeurs, et avec Fusionner et réordonner les règles combine les règles qui partagent des sélecteurs ou des déclarations. Désactivez-le si vos styles dépendent de l’ordre des règles d’une façon que CSSO ne peut pas voir.
• HTML, avec html-minifier-terser : réduit les espaces entre les balises, retire les commentaires, et peut minifier en même temps le CSS et le JavaScript des balises <style> et <script>.

Les commentaires de licence qui commencent par /*! peuvent être gardés, car de nombreuses licences libres exigent que la mention accompagne le code.

Combien on gagne

Un JavaScript écrit à la main avec des commentaires perd généralement la moitié de son poids ou plus, et le CSS d’un cinquième à la moitié, selon la quantité d’espaces et de commentaires qu’il contenait. Le gain qui atteint les visiteurs est plus faible, car les serveurs compressent le texte à l’envoi avec gzip ou Brotli, qui retirent déjà une bonne part des répétitions. Minifier et compresser ensemble donnent tout de même les téléchargements les plus légers, et pour le JavaScript, les noms plus courts rendent aussi le code plus rapide à analyser.

Quand l’utiliser

Les outils de compilation modernes comme Vite, webpack et esbuild minifient automatiquement : cette page sert donc à tout le reste, un script sur un site simple, un extrait pour un modèle d’e-mail ou un CMS, vérifier ce qu’un outil de compilation produirait, ou lire le code minifié d’un site pendant un débogage. Gardez l’original lisible dans votre projet et publiez la copie minifiée ; le code minifié n’est pas fait pour être modifié.

En cas de problème

• Il signale une erreur de syntaxe. Le code ne s’analyse pas. Le message indique la ligne ; corrigez-la dans l’original.
• La page ne marche plus après la minification du JavaScript. Quelque chose dépend d’un nom qui a été raccourci, souvent via une variable globale. Désactivez Raccourcir les noms de premier niveau, puis Raccourcir les noms de variables.
• Les styles changent après la minification du CSS. Désactivez Fusionner et réordonner les règles.
• Des espaces ont disparu entre des éléments en ligne en HTML. Réduire les espaces peut coller des mots de part et d’autre des balises. Gardez une espace dans le texte, ou désactivez Réduire les espaces.