Auf den ersten Blick scheinen Leerzeichen in HTML-Markup bedeutungslos — der Browser stellt ohnehin alles korrekt dar. Aber an ein paar Stellen im Dokument ist das eine Ausnahme, wo das Entfernen von Whitespace das Aussehen der Seite tatsächlich verändert.
Was gefahrlos entfernt werden kann
Ein Minifier entfernt HTML-Kommentare <!-- ... -->, überflüssige Leerzeichen und Zeilenumbrüche zwischen Tags, Anführungszeichen um Attribute ohne Leerzeichen im Wert und manchmal optionale schließende Tags wie </li>.
Der klassische Fehler: zwei Wörter verschmelzen zu einem
Ein einzelnes Leerzeichen zwischen zwei Inline-Elementen ist ein sichtbarer Zwischenraum auf der gerenderten Seite, nicht nur Formatierung im Quelltext. <span>Hallo</span> <span>Welt</span> wird als „Hallo Welt" mit Zwischenraum dargestellt; wird dieses Leerzeichen unbedacht entfernt, entsteht lautlos „HalloWelt" ohne Trennung. Ein sorgfältiger Minifier entfernt nur Whitespace, der keine visuelle Auswirkung hat — etwa zwischen Block-Elementen — und lässt Leerzeichen zwischen Inline-Elementen unberührt.
Minifizierung versus Lesbarkeit während der Entwicklung
Während der Entwicklung bleibt HTML meist mit Einrückung formatiert, weil sich so die Struktur in den DevTools leichter erkennen lässt. Minifizierung wird erst auf den finalen Build vor der Veröffentlichung angewendet, wenn menschliche Lesbarkeit keine Rolle mehr spielt.
Wofür man das braucht
- Die Größe einer HTML-Seite vor der Veröffentlichung reduzieren.
- Entwicklerkommentare aus der finalen Markup-Version entfernen.
- Fehler vermeiden, indem Leerzeichen nur dort entfernt werden, wo es wirklich sicher ist.
Warum lange, zusammengesetzte Wörter beim Umbruch eine Rolle spielen
Deutsche Komposita wie „Rechtsschutzversicherungsgesellschaften" können ohne weiches Trennzeichen (­) an schmalen Bildschirmen kaum sinnvoll umbrechen, weil der Browser dort keine natürliche Trennstelle findet. Minifizierung selbst entfernt solche Trennzeichen nicht, sofern sie im Quelltext stehen — sie betrifft nur Whitespace zwischen Tags. Wichtig ist nur, ein bewusst gesetztes ­ innerhalb eines Wortes nicht mit entfernbarem Leerraum zu verwechseln: Ein Minifier, der zu aggressiv vorgeht und auch Entities anfasst, kann genau diese Umbruchstellen kaputtmachen.