Minimisez instantanément le code HTML pour réduire la taille du fichier et améliorer la vitesse de chargement du site.
Introduction
Le HTML que vous écrivez pour travailler et le HTML qui parvient au navigateur n'ont pas besoin d'être le même fichier. Pendant que vous construisez une page, l'indentation et les retours à la ligne rendent la structure facile à suivre, et les commentaires laissés dans le balisage expliquent les sections ou vous servent de pense-bête. Le navigateur n'a besoin de rien de tout cela pour afficher la page correctement : il lui suffit de balises valides et bien formées. La minification retire ce qui n'est là que pour un lecteur humain, si bien que la même page arrive au navigateur sous la forme d'un fichier plus léger.
Comment cet outil minifie votre HTML
- Tous les commentaires sont supprimés, sans exception. Chaque bloc
<!-- ... -->est retiré, y compris les anciens commentaires conditionnels d'Internet Explorer et tout commentaire que vous auriez souhaité garder, par exemple une mention de licence ou d'attribution. Il n'existe pas ici d'équivalent de la convention « garde celui-ci » que prend en charge le minificateur CSS de ce site : si un commentaire compte pour vous, conservez-le dans votre copie de travail et ne comptez pas sur lui pour survivre à la minification. - Le contenu placé dans les balises
<pre>,<code>,<script>et<textarea>garde ses espaces exacts. À l'intérieur de ces balises, les retours à la ligne et l'espacement ont un sens, et un exemple de code ou un bloc de texte préformaté s'afficherait de travers si son espacement interne était compacté ; cet outil laisse donc ces espaces intacts. - Ailleurs, les espaces sont compactés, pas effacés. Une suite d'espaces, de tabulations ou de retours à la ligne entre deux éléments en ligne, par exemple un lien au milieu d'une phrase, est réduite à un seul espace plutôt que supprimée, afin que deux mots voisins ne se retrouvent pas collés. Seul l'espace entre les balises structurelles de premier niveau et celui situé dans
<head>disparaît entièrement, puisque rien là ne s'affiche jamais comme du texte courant. - La barre d'auto-fermeture finale est normalisée.
<img src="photo.jpg" />devient<img src="photo.jpg">: les deux formes sont du HTML valide, et la plus courte économise quelques caractères sur chaque balise auto-fermante de la page.
Le seul vrai risque : les commentaires dans du contenu préformaté
Comme la suppression des commentaires s'effectue en première passe sur l'ensemble de ce que vous avez collé, avant que l'outil ne regarde dans quelle balise chaque chose se trouve, il ne peut pas distinguer un commentaire ordinaire destiné à disparaître du texte littéral <!-- ... --> que vous affichez volontairement dans un bloc <pre> ou <code> : c'est le cas, par exemple, d'un exemple de code dans un tutoriel qui montre à quoi ressemble un commentaire HTML. Dans ce cas précis, le texte de l'exemple est retiré, alors même que l'espacement autour de lui, dans le même bloc, est bien conservé. Cela ne concerne que du texte contenant littéralement les caractères <!-- et --> à l'intérieur d'un bloc préformaté ; les exemples de code ordinaires, qui n'incluent pas la syntaxe des commentaires parmi ce qu'ils montrent, ne sont pas touchés.
À savoir avant de minifier
Cet outil ne change que la mise en forme : il ne réordonne pas les éléments, ne fusionne pas les balises et ne retire rien à la structure réelle de la page. Aucune limite de taille ne s'applique à ce que vous collez, puisque vous travaillez directement sur du texte au lieu d'envoyer un fichier : le HTML complet d'une page, même longue, se colle et se traite comme un court extrait.
Comme avec n'importe quel minificateur, mieux vaut ouvrir le résultat minifié dans un navigateur avant de le publier. Non pas parce que la conversion serait peu fiable, mais parce qu'il est de bonne pratique de vérifier qu'une page s'affiche et se comporte comme prévu avant sa mise en ligne, exactement comme on relit n'importe quoi d'autre avant de le rendre ou de le publier.
Quand cet outil est le bon choix
- Préparer une page à la publication, une fois les modifications terminées. Continuez à travailler sur la version lisible pendant que vous construisez la page, et minifiez une seule fois, juste avant la mise en ligne : ce n'est pas un format de travail.
- Alléger une page sur un hébergement limité ou une connexion lente. Un fichier HTML plus petit se télécharge plus vite, ce qui compte davantage qu'on ne le croit sur un réseau d'établissement ou sur un téléphone en données mobiles.
- Comparer du code source pour voir à quoi ressemble vraiment le HTML en production. Afficher le source d'un vrai site révèle souvent un HTML compact qui n'a rien à voir avec ce que l'on écrit à la main : minifier sa propre page et comparer les deux côte à côte est une façon concrète de comprendre pourquoi.
Exemple
Un élève termine la page de portfolio personnel d'un cours de création web, avec des commentaires laissés un peu partout dans le balisage au fil des brouillons et, dans un bloc <pre>, un exemple de code montrant à quoi ressemble un commentaire HTML, en guise d'illustration de ce qu'il a appris. Avant de rendre son projet, il colle ici la page entière. La page affichée se présente et se comporte exactement comme avant, les commentaires de brouillon ont disparu et le fichier est plus léger, mais l'exemple de commentaire placé dans le bloc de code a disparu lui aussi, puisqu'il contenait précisément les caractères littéraux <!-- et -->. Pour éviter l'ennui, il suffit de retoucher ce seul exemple afin qu'il n'emploie pas exactement la syntaxe des commentaires, ou de laisser cette section en dehors de ce qui est minifié.
Questions fréquentes
La minification change-t-elle l'apparence de ma page ?
Non. Les balises et la structure sont préservées : seuls la mise en forme, les espaces et les commentaires changent, et rien de cela n'influe sur l'affichage de la page.
Qu'advient-il des commentaires dans mon HTML ?
Ils sont tous supprimés, sans exception : aucun moyen de marquer un commentaire comme à conserver, contrairement au minificateur CSS de ce site.
Les espaces dans un bloc <pre> ou <code> sont-ils conservés ?
Oui, l'espacement et les retours à la ligne placés dans ces balises, ainsi que dans <script> et <textarea>, restent exactement tels que vous les avez écrits. La seule exception : si ce contenu comporte littéralement la syntaxe des commentaires (<!-- -->) comme texte que vous affichez, elle est retirée en même temps que les vrais commentaires, puisque leur suppression intervient avant que l'outil ne regarde dans quelle balise elle se trouve.
Y a-t-il une limite de taille ?
Non : vous collez du texte, vous n'envoyez pas de fichier, il n'y a donc pas de limite fixe comme sur les outils de ce site qui traitent des fichiers envoyés.
Mon code est-il enregistré quelque part ?
Non. Le HTML collé est traité pour produire le résultat minifié ; il n'est ni stocké sous forme de fichier ni conservé ensuite. Seul le fait que l'outil a été utilisé est enregistré, pas le code lui-même.
Quels outils associés puis-je utiliser ?
Pour les autres formats de code, utilisez CSS Minifier et JavaScript Minifier pour minifier, ou CSS Beautifier et JavaScript Beautifier pour faire le chemin inverse.
