HTML minifizieren

Der Leerraum, der zählt – und der, der nicht zählt

In HTML ist ein Leerzeichen zwischen zwei Inline-Elementen ein echtes Leerzeichen, und genau das unterscheidet einen sorgfältigen Minifier von einem, der Seiten kaputt macht. Fasst man den Zeilenumbruch zwischen zwei Links zusammen, laufen die Wörter auf dem Bildschirm ineinander; fasst man die Einrückung in einem pre-Block oder einer textarea zusammen, ändert sich der Inhalt selbst, denn dort ist Leerraum Inhalt. Deshalb wird Leerraum nur dort entfernt, wo er nachweislich nicht dargestellt wird, und dort, wo er dargestellt wird, exakt so belassen. Ein Minifier, der jedes Leerzeichen gleichermaßen entfernt, liefert eine kleinere Datei und eine sichtbar fehlerhafte Seite.

Kommentare fallen weg, denn sie sind für die Person gedacht, die den Quelltext pflegt, nicht für die Leser – mit Ausnahme bedingter Kommentare, die Anweisungen sind und keine Notizen. Überflüssige Attribute werden entfernt: Ein type="text/javascript" an einem script-Element ist seit einem Jahrzehnt der Standard, und method="get" an einem Formular sagt nur, was ein Formular ohnehin tut.

Das Entfernen von Attribut-Anführungszeichen ist gültiges HTML und standardmäßig ausgeschaltet – mit Absicht. Die Spezifikation erlaubt einen Attributwert ohne Anführungszeichen, sofern er keine Leerzeichen oder heiklen Zeichen enthält, und Browser kommen damit bestens zurecht. Template-Engines oft nicht: Ein Blade-, Twig-, Handlebars- oder JSX-Ausdruck in einem Attribut ohne Anführungszeichen wird nicht mehr korrekt geparst, und der Fehler taucht beim Build in einer Datei auf, die niemand lesen möchte. Die Ersparnis ist gering, das Risiko nicht – deshalb muss man es bewusst einschalten.

Der ehrliche Maßstab für den Gewinn ist die Größe nach der Komprimierung, nicht davor. Server liefern HTML mit gzip oder Brotli komprimiert aus, und diese Algorithmen sind bei wiederholtem Leerraum extrem gut – ein Dokument, das sich von 100 KB auf 70 KB minifizieren lässt, schrumpft bei der Übertragung womöglich nur von 12 KB auf 11 KB. HTML zu minifizieren lohnt sich, bringt aber von den dreien am wenigsten; beim Stylesheet und beim Skript steckt das eigentliche Gewicht.

Wenn Sie etwas anderes brauchen

Für eine ganze Website statt einer einzelnen Datei gehört das in den Build und nicht in einen Browser-Tab. Jedes aktuelle Framework und jeder Static-Site-Generator minifiziert HTML beim Build, und wer es von Hand macht, hört damit auf, sobald es jemand vergisst. Die Bibliotheken dahinter lassen sich bis auf einzelne Transformationen konfigurieren – das lohnt sich, wenn eine bestimmte Regel Probleme macht.

Bevor Sie das Markup optimieren, prüfen Sie, wie schwer die Seite tatsächlich ist. Auf fast jeder echten Website ist das HTML ein Rundungsfehler neben den Bildern, den Schriften und dem JavaScript – Lighthouse oder der Netzwerk-Tab des Browsers sagt es Ihnen in Sekunden, und meist lautet die Antwort, dass ein nicht optimiertes Titelbild mehr kostet als jedes Byte Markup auf der Seite.