HTML-Optimierung: Eine Standardkonfiguration für HTMLMinifier

Kleiner, immer kleiner

Die Komprimierung und Minifizierung von HTML ist nützlich, um die Payload-Größe zu verringern und damit Performance zu verbessern. Als jemand, der sich auf die Optimierung von HTML und CSS spezialisiert hat, spreche ich gerne davon, dass HTML-Minifizierung kritisch ist und soweit gehen sollte, alle optionalen Tags und Anführungszeichen auszulassen. Auch wenn die Kenntnis und Ausübung solcher Optimierung wiederum aus persönlicher Sicht nützlich für jeden Entwickler ist, ist dies auf jeden Fall etwas, das automatisiert geschehen sollte.

Bei sum.cumo fordern wir von niemand im Frontend-Team, manuell allen Code zu optimieren, und alles Optionale auszulassen. Wir nehmen dafür den Weg der Automatisierung und des Toolings und setzen im Fall von HTML HTMLMinifier ein (npm). Es folgen hier die Einstellungen, zu denen wir uns entschieden haben und mit denen wir unsere Projekte füttern:

collapseInlineTagWhitespace: true,
collapseWhitespace: true,
conservativeCollapse: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
minifyURLs: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true

(Eine Erläuterung aller Werte findet sich in der Dokumentation zu HTMLMinifier.)

Wie sich herausstellt, ist diese Konfiguration ziemlich aggressiv, dadurch dass sie viel Markup entfernt. Wir haben aber im Betrieb festgestellt, dass diese Optionen sowie HTMLMinifier allgemein robust sind und sehr gut funktionieren, den Payload der entsprechenden Projekte zu reduzieren.

Ich habe mich in diesem Beitrag bewusst entschieden, nicht jede Einstellung durchzugehen, würde diese Möglichkeit aber offenlassen: Wenn Interesse daran besteht, alle HTMLMinifier-Einstellungsmöglichkeiten zu analysieren und festzuhalten, wie nützlich (oder nicht nützlich) sie sind, lasst es uns auf Twitter wissen. Dies gilt auch, wenn es nützlich wirkt, dass wir das interne Node-Modul dieser Konfiguration, welches wir in alle Projekte reinziehen, die HTMLMinifier benutzen, teilen und open-sourcen (das Modul ist basisch, aber wir könnten prüfen, es freizugeben).