HTML-Kompressor

Warum HTML überhaupt minifizieren

Das HTML, das Sie für Menschen schreiben, ist voll von Dingen, die Browser nicht benötigen: Einrückungen, Zeilenumbrüche zwischen Tags, Kommentare von Entwicklern und das eine oder andere leere Attribut. Nichts davon beeinflusst, wie die Seite dargestellt wird, aber alles davon fügt Bytes hinzu. Multiplizieren Sie diese Bytes mit jedem Besucher und jedem Seitenaufruf, und die Verschwendung wird zu echter Bandbreite und echter Wartezeit. Die Minifizierung entfernt die kosmetischen Zeichen, sodass das Markup, das über die Leitung übertragen wird, so klein ist, wie es der Browser benötigt, und nicht kleiner.

Kleineres HTML bedeutet ein schnelleres erstes Byte aussagekräftigen Inhalts, geringere Bandbreitenkosten für Hosting und CDN sowie ein besseres Erlebnis bei langsamen oder volumenbegrenzten Mobilverbindungen. Auf Websites mit hohem Traffic summieren sich die Einsparungen, und da HTML die allererste Ressource ist, die ein Browser herunterlädt, hilft seine Verkleinerung dabei, dass die Seite früher mit der Darstellung beginnt.

Was der Kompressor entfernt

Jede Option zielt auf eine bestimmte Quelle von Überladung ab. "HTML-Kommentare entfernen" löscht Entwicklernotizen und auskommentierten Code, den Besucher nie zu sehen bekommen. "Unnötigen Leerraum entfernen" reduziert die Folgen von Leerzeichen, Tabulatoren und Zeilenumbrüchen zwischen Tags, die nur der Lesbarkeit dienen. "Leere Attribute entfernen" verwirft Attribute ohne Wert, und "Optionale HTML-Tags entfernen" lässt schließende Tags weg, deren Auslassung die HTML-Spezifikation erlaubt, etwa die End-Tags für Listenelemente in bestimmten Kontexten.

"Boolesche Attribute zusammenfassen" ist ein kleiner, aber sauberer Gewinn: Attribute wie disabled oder checked benötigen in HTML keinen Wert, sodass eine ausgeschriebene Form wie disabled gleich der Zeichenkette disabled auf nur den Attributnamen verkürzt wird. Zusammen entfernen diese Durchläufe Zeichen, die keinerlei Auswirkung auf die Darstellung haben, weshalb die Standard-Minifizierung für wohlgeformte Seiten sicher ist.

Ein durchgerechnetes Beispiel

Stellen Sie sich einen Ausschnitt mit einer vier Leerzeichen breiten Einrückung, einem HTML-Kommentar über einem div und einem Kontrollkästchen-input vor, das mit checked gleich der Zeichenkette checked geschrieben ist. Nach der Komprimierung werden die Einrückung und der Zeilenumbruch reduziert, sodass die Tags direkt aneinander liegen, der Kommentar verschwindet vollständig, und das Kontrollkästchen wird einfach zu einem input mit dem nackten Attribut checked. Die Seite sieht im Browser genau gleich aus und verhält sich genau gleich, aber die Byte-Anzahl sinkt, und das Statistikfeld meldet die ursprüngliche Größe, die komprimierte Größe und den eingesparten Prozentsatz, sodass Sie den Gewinn für Ihre konkrete Datei sehen können.

Was sicher zu entfernen ist und was riskant ist

Die Grenze, die zu beachten ist, ist Leerraum, von dem die Seite tatsächlich abhängt. Innerhalb von pre- und textarea-Elementen ist jedes Leerzeichen und jeder Zeilenumbruch signifikant: Es wird wortgetreu dargestellt, sodass dessen Reduzierung die Ausgabe sichtbar verändern würde. Dieselbe Vorsicht gilt für Elemente, deren CSS white-space so setzt, dass die Formatierung erhalten bleibt. Kommentare lassen sich in der Regel sicher entfernen, doch manche sind funktionstragend, etwa veraltete bedingte Kommentare für den Internet Explorer oder Kommentare, die ein Templating-System oder Framework als Markierungen liest; deren Löschung kann das Verhalten beschädigen.

Die Optionen zur Minifizierung von CSS und JavaScript sind aus gutem Grund als experimentell gekennzeichnet. Das Minifizieren von Inline-CSS in style-Tags und -Attributen oder von JavaScript in script-Tags bedeutet, Code umzuschreiben, statt nur Layout-Leerraum zu entfernen, und es gibt Grenzfälle. Testen Sie eine Seite stets, nachdem Sie diese aktiviert haben, besonders wenn Ihre Skripte auf eine bestimmte Formatierung, kommentarbasierte Anweisungen oder fragile Zeichenkettenverarbeitung angewiesen sind.

Wie sich die Minifizierung zu gzip verhält

Server senden HTML fast immer mit gzip oder Brotli komprimiert, und man nimmt manchmal an, dass dies die Minifizierung überflüssig macht. Das tut es nicht. gzip ist hervorragend darin, sich wiederholenden Text zu komprimieren, sodass der relative Prozentsatz, den es zusätzlich zu minifiziertem HTML einspart, kleiner ist als bei rohem HTML, doch die beiden Techniken ergänzen einander: minifiziert und dann mit gzip komprimiert ist immer noch kleiner als formatiert und dann mit gzip komprimiert. Die Minifizierung verkleinert außerdem die Bytes, die der Browser nach der Dekomprimierung verarbeiten muss, und sie verringert die in Caches gespeicherte Größe.

Betrachten Sie sie als sich ergänzende Schichten. Die Minifizierung entfernt Inhalt, den der Browser nicht benötigt; gzip und Brotli komprimieren dann für den Transport, was übrig bleibt. Die Verwendung beider ergibt durchgehend die kleinste Nutzlast.

Wo die Minifizierung in eine Build-Pipeline passt

Auf einer Produktionswebsite findet die Minifizierung idealerweise automatisch als Teil eines Build- oder Deployment-Schritts statt, sodass die Quelle, die Sie bearbeiten, lesbar bleibt, während die Ausgabe, die Sie ausliefern, klein bleibt. Die meisten modernen Bundler und Static-Site-Generatoren enthalten eine Stufe zur HTML-Minifizierung, und dieses Tool ist eine schnelle Möglichkeit, dasselbe für eine einmalige Datei, eine handgebaute Landingpage, eine E-Mail-Vorlage oder einen Ausschnitt zu tun, den Sie gerade einbetten möchten.

Es ist außerdem praktisch zum Untersuchen und Lernen: Fügen Sie eine Seite ein, führen Sie sie aus und lesen Sie den Reduzierungsprozentsatz, um abzuschätzen, wie viel Ballast Ihr Markup mit sich trägt, was Gewohnheiten wie übermäßige Kommentare oder tief eingerückte Vorlagen offenlegen kann, die es an der Quelle anzugehen lohnt.

Häufige Fehler, die zu vermeiden sind

Der schädlichste Fehler ist, Inhalt zu minifizieren, der von Leerraum abhängt, und dann festzustellen, dass Text innerhalb eines pre-Blocks oder eines Codebeispiels seine Formatierung verloren hat; lassen Sie diese unangetastet oder überprüfen Sie sie sorgfältig. Ein weiterer ist das Entfernen bedingter Kommentare oder Anweisungskommentare, auf die sich etwas Nachgelagertes verlässt. Eine subtilere Falle ist, die minifizierte Datei direkt zu bearbeiten: Sobald der Leerraum weg ist, ist der Code schwer zu pflegen, halten Sie daher Ihre lesbare Quelle stets als die maßgebliche Quelle und behandeln Sie die minifizierte Version als ein generiertes Artefakt. Und wann immer Sie die experimentellen CSS- oder JS-Durchläufe aktivieren, testen Sie die fertige Seite, bevor Sie sie ausliefern.