Minifier du HTML

Les espaces qui comptent, et ceux qui ne comptent pas

En HTML, un espace entre deux éléments en ligne est un vrai espace, et c'est ce qui distingue un minifieur soigneux d'un minifieur qui casse les pages. Supprimez le retour à la ligne entre deux liens et les mots se collent à l'écran ; supprimez l'indentation à l'intérieur d'un bloc pre ou d'un textarea et le contenu lui-même change, car les espaces y font partie du contenu. Les espaces ne sont donc supprimés que là où l'on peut prouver qu'ils ne s'affichent pas, et laissés strictement intacts ailleurs. Un minifieur qui retire tous les espaces sans distinction produira un fichier plus léger et une page visiblement fausse.

Les commentaires disparaissent, puisqu'ils s'adressent à celui qui maintient le code source et non au lecteur — à l'exception des commentaires conditionnels, qui sont des instructions et non des notes. Les attributs redondants sont retirés : un type="text/javascript" sur un élément script est la valeur par défaut depuis dix ans, et method="get" sur un formulaire ne dit que ce qu'un formulaire fait de toute façon.

Supprimer les guillemets des attributs donne du HTML valide, et l'option est désactivée par défaut, délibérément. La spécification autorise une valeur d'attribut sans guillemets à condition qu'elle ne contienne ni espace ni caractère problématique, et les navigateurs la gèrent parfaitement. Les moteurs de templates, souvent non : une expression Blade, Twig, Handlebars ou JSX dans un attribut sans guillemets n'est plus analysée correctement, et l'erreur apparaît au moment du build, dans un fichier que personne n'a envie de lire. Le gain est faible, le risque ne l'est pas : l'option est donc à activer soi-même.

La mesure honnête du gain se fait après compression, pas avant. Les serveurs envoient le HTML compressé en gzip ou en brotli, et ces algorithmes sont redoutablement efficaces sur les espaces répétés — si bien qu'un document qui passe de 100 KB à 70 KB une fois minifié peut ne passer que de 12 KB à 11 KB sur le réseau. Minifier le HTML vaut la peine, mais c'est le plus petit des trois gains : la feuille de style et le script sont là où se trouve le vrai poids.

Si vous cherchez autre chose

Pour un site plutôt qu'un fichier, cette étape a sa place dans le build, pas dans un onglet de navigateur. Tous les frameworks et générateurs de sites statiques actuels minifient le HTML au build, et le faire à la main signifie que cela cesse dès que quelqu'un oublie. Les bibliothèques qu'ils utilisent se configurent jusqu'à chaque transformation, ce qui vaut la peine quand une règle précise pose problème.

Avant d'optimiser le balisage, vérifiez ce que pèse réellement la page. Sur presque tous les vrais sites, le HTML est négligeable à côté des images, des polices et du JavaScript — Lighthouse ou le panneau réseau du navigateur vous le diront en quelques secondes, et la réponse est généralement qu'une image d'en-tête non optimisée coûte plus que tous les octets de balisage de la page.