Minifier du HTML

Comment ça marche

Collez le HTML d'une page ou d'un modèle d'e-mail dans le volet de gauche ; la version minifiée apparaît à droite. Les retraits et retours à la ligne partent d'abord : les espaces entre balises de bloc (div, p, li, tr) sont entièrement supprimés, les suites d'espaces dans le texte sont ramenées à une seule. Une espace unique entre deux éléments en ligne est gardée, car dans une phrase comme Tous les articles à <strong>-20 %</strong> elle se voit sur la page. Les commentaires <!-- ... --> sont supprimés ; les commentaires conditionnels écrits pour l'ancien Internet Explorer (<!--[if IE]>) restent même avec ce réglage. Les espaces en trop à l'intérieur des balises sont nettoyés, mais les guillemets des attributs ne sont jamais retirés. Le CSS de <style> et le JavaScript de <script> sont minifiés aussi, et les données structurées application/ld+json tiennent sur une ligne. Un script illisible est laissé tel quel et compté dans la ligne de résultat. Le contenu de <pre> et <textarea> n'est jamais touché. La ligne de résultat donne la taille avant et après en octets, le nombre de commentaires supprimés et de blocs minifiés.

Cet outil est aussi connu sous le nom de minifier html, minifier du html en ligne, compresser html, html minify, supprimer espaces html, minificateur html.

Qu'est-ce que Minification HTML ?

La minification HTML retire les caractères qui ne servent qu'au développeur, comme les retraits, les retours à la ligne et les commentaires, tout en gardant exactement le même affichage. Le gain dépend de la page : les modèles très indentés et très commentés y gagnent le plus. Souvent, le plus gros gain vient du CSS et du JavaScript intégrés à la page, que cet outil compresse avec des minificateurs dédiés.

Qu'est-ce que Commentaire conditionnel ?

Un commentaire conditionnel est un commentaire HTML particulier de la forme <!--[if IE]> ... <![endif]--> dont seules les anciennes versions d'Internet Explorer, ainsi qu'Outlook basé sur Word, lisent et appliquent le contenu. Tous les autres navigateurs le prennent pour un commentaire ordinaire et le sautent. Rare aujourd'hui sur les sites, il reste courant dans les modèles d'e-mail pour corriger Outlook ; un minificateur ne doit donc pas le supprimer.

Pourquoi une minification prudente ?

En HTML, les espaces ne sont pas toujours inutiles. L'espace entre deux éléments en ligne (Karim <b>Benali</b>) se voit ; sans elle, les mots se collent. Le retrait dans <pre> fait partie d'un exemple de code ou d'un poème. L'outil ne supprime donc que les espaces qui ne peuvent pas changer la page : entre balises de bloc et les espaces répétées dans le texte. L'espace insécable (&nbsp;) n'est pas traitée comme un espace ordinaire et reste en place.

Certaines astuces des minificateurs agressifs sont écartées exprès : les guillemets d'attributs restent (pas de class=carte), les balises fermantes ne sont pas omises, les attributs vides ne sont pas raccourcis. Ces astuces font gagner quelques centaines d'octets de plus mais cassent certains moteurs de modèles et clients e-mail. Une mise en garde : l'espace entre des éléments de liste placés côte à côte en CSS (display: inline-block) est aussi supprimée ; si votre menu compte sur cet écart, donnez-le avec une marge CSS.

Quel réglage pour quel usage

Modèle d'e-mail : supprimez les commentaires et minifiez le code intégré. Certains clients e-mail, dont Gmail, coupent les messages au-delà d'une certaine taille, et la minification aide à rester en dessous. Les commentaires conditionnels peuvent être nécessaires pour Outlook ; l'outil les garde donc de lui-même.

Gardez les commentaires si la page utilise une bibliothèque qui fonctionne avec eux, comme Knockout, ou s'ils servent de repères à un système de gestion de contenu. Ne touchez pas à <style>/<script> si un script contient des repères de moteur de modèles comme {{ }} : le minificateur les prendrait pour du JavaScript et ne saurait pas les lire. Si vous voulez seulement lire le code, l'outil Formater du HTML fait le chemin inverse.

Questions fréquentes

Comment minifier du HTML ?

Collez le code dans le volet de gauche de cette page. Le volet de droite le montre sans commentaires ni espaces inutiles, avec le CSS et le JavaScript intégrés compressés. Copiez-le ou téléchargez-le en fichier .html ; la ligne de résultat indique les octets gagnés.

Minifier le HTML peut-il casser la mise en page ?

Cet outil ne supprime que les espaces qui ne peuvent pas changer l'affichage : entre balises de bloc et les espaces répétées dans le texte. L'espace unique entre éléments en ligne, et tout le contenu de <pre> et <textarea>, sont gardés. Seule exception : des éléments de liste mis côte à côte en CSS perdent l'espace qui les séparait ; donnez-leur une marge CSS.

Pourquoi mes commentaires <!--[if IE]> sont-ils restés ?

Ce sont des commentaires conditionnels : l'ancien Internet Explorer et certaines versions d'Outlook les lisent et exécutent le code qu'ils contiennent. Sans eux, la mise en page pourrait se casser dans ces logiciels ; l'outil les garde donc avec tous les réglages.

Mon code est-il envoyé à un serveur ?

Non. La minification, y compris celle du CSS et du JavaScript, se fait entièrement dans votre navigateur ; votre HTML ne quitte pas cette page.