Minifier le HTML avec le CSS et le JavaScript intégrés

Beaucoup de pages regroupent leur code dans un seul fichier: le balisage, une balise style contenant les règles CSS et une balise script portant la logique JavaScript cohabitent dans le même document. Ce format est courant pour une page de destination autonome, un composant exporté, un email enrichi, une démonstration ou une maquette qu'on veut pouvoir partager d'un bloc. L'inconvénient est que ces blocs intégrés, écrits pour être lisibles, accumulent indentation, sauts de ligne et commentaires dans les trois langages à la fois. Minifier seulement le balisage laisserait de côté une part importante du poids du fichier. C'est pourquoi cet outil traite aussi le contenu des balises style et script, pour compacter le document dans son intégralité.

La minification s'adapte à la nature de chaque bloc. Pour le CSS intégré, elle retire les espaces autour des accolades et des deux-points, supprime les commentaires et les points-virgules superflus, sans jamais modifier les sélecteurs ni les valeurs qui déterminent l'apparence. Pour le JavaScript, elle élimine l'indentation, les lignes vides et les commentaires, en préservant la syntaxe et la logique du programme. Le balisage, lui, est compacté comme d'habitude, par retrait des espaces inutiles entre les éléments. Chaque langage suit ainsi ses propres règles, mais le principe demeure identique: on ne supprime que ce qui est sans effet sur le résultat. La page rendue et son comportement à l'exécution restent rigoureusement les mêmes.

L'intérêt de traiter les trois langages ensemble apparaît vite sur le poids final. Le JavaScript est souvent le contenu le plus verbeux d'un document: noms de variables explicites, indentation profonde et commentaires abondants s'y accumulent, et sa minification apporte fréquemment la plus forte réduction. Le CSS intégré, avec ses règles alignées et espacées pour la lisibilité, se compacte lui aussi de façon notable. En additionnant ces gains à ceux du balisage, une passe unique allège le fichier bien plus qu'une minification limitée aux seules balises. Vous évitez surtout de jongler entre plusieurs outils spécialisés et de recoller manuellement les morceaux, avec le risque d'erreur que cela suppose. Un seul document entre, un seul document compacté en sort.

Comme pour toute minification, gardez à l'esprit que l'opération se pense à sens unique dans votre flux de travail. Le CSS et le JavaScript compactés perdent leur indentation, leurs sauts de ligne et leurs commentaires: ils restent parfaitement exécutables, mais deviennent très difficiles à relire et à déboguer. Ne travaillez donc jamais sur la version minifiée. Conservez systématiquement le document source, avec ses trois langages sous leur forme lisible et commentée, dans votre dépôt ou à côté du livrable. Pour toute évolution, modifiez cette source, puis relancez la minification afin de régénérer la version compacte. Cette habitude vous épargne les allers-retours pénibles dans un fichier illisible et garantit que votre code reste maintenable sur la durée.

Traiter le CSS et le JavaScript en même temps que le balisage soulève une question légitime de confidentialité, car ces blocs contiennent parfois de la logique métier, des clés d'affichage ou des commentaires internes. Avec cet outil, rien de tout cela ne quitte votre navigateur. L'ensemble de la minification, pour les trois langages, s'exécute en local sur le document que vous collez ou le fichier que vous chargez. Aucun contenu n'est téléversé vers un serveur, aucun n'est conservé. Vous pouvez donc compacter une page en cours de développement, un prototype ou un composant propriétaire sans l'exposer à un tiers. L'outil demeure entièrement gratuit, sans inscription, sans quota et sans filigrane ajouté à votre code.