HTML minimieren

So funktioniert es

Fügen Sie das HTML einer Seite oder E-Mail-Vorlage in das linke Feld ein; rechts erscheint die minimierte Fassung. Zuerst verschwinden Einrückungen und Zeilenumbrüche: Leerraum zwischen Block-Tags (div, p, li, tr) wird ganz entfernt, mehrere Leerzeichen im Text werden zu einem. Ein einzelnes Leerzeichen zwischen zwei Inline-Elementen bleibt, denn in einem Satz wie Alle Artikel <strong>20 %</strong> günstiger ist es auf der Seite sichtbar. <!-- ... -->-Kommentare werden entfernt; bedingte Kommentare für den alten Internet Explorer (<!--[if IE]>) bleiben auch bei dieser Einstellung. Überflüssige Leerzeichen innerhalb von Tags werden bereinigt, Anführungszeichen um Attributwerte aber nie entfernt. CSS in <style> und JavaScript in <script> werden ebenfalls minimiert, strukturierte Daten in application/ld+json kommen auf eine Zeile. Ein Skript, das sich nicht lesen lässt, bleibt unverändert und wird in der Ergebniszeile gezählt. Inhalte von <pre> und <textarea> werden nie angefasst. Die Ergebniszeile nennt die Größe vorher und nachher in Byte, die Zahl entfernter Kommentare und die Zahl minimierter Blöcke.

Dieses Werkzeug ist auch als html minimieren, html minimieren online, html komprimieren, html minifier, html verkleinern, leerzeichen aus html entfernen bekannt.

Was ist HTML minimieren?

Beim Minimieren von HTML werden die Zeichen entfernt, die nur für Entwickler da sind — Einrückungen, Zeilenumbrüche, Kommentare —, während die Seite genau gleich dargestellt wird. Wie viel das bringt, hängt von der Seite ab: Tief eingerückte, kommentarreiche Vorlagen gewinnen am meisten. Die größte Ersparnis steckt oft im eingebetteten CSS und JavaScript, das dieses Werkzeug mit eigenen Minimierern verkleinert.

Was ist Bedingter Kommentar?

Ein bedingter Kommentar ist ein besonderer HTML-Kommentar der Form <!--[if IE]> ... <![endif]-->, dessen Inhalt nur alte Internet-Explorer-Versionen und das auf Word basierende Outlook lesen und anwenden. Alle anderen Browser behandeln ihn als gewöhnlichen Kommentar und überspringen ihn. Auf Websites ist er heute selten, in E-Mail-Vorlagen für Outlook-Korrekturen aber noch verbreitet; ein Minimierer darf ihn deshalb nicht löschen.

Warum vorsichtig minimieren?

Leerraum in HTML ist nicht überall bedeutungslos. Das Leerzeichen zwischen zwei Inline-Elementen (Anna <b>Schmidt</b>) ist sichtbar; fehlt es, kleben die Wörter zusammen. Die Einrückung in <pre> gehört zu einem Codebeispiel oder Gedicht. Dieses Werkzeug entfernt deshalb nur Leerraum, der die Seite sicher nicht verändert: zwischen Block-Tags und doppelte Leerzeichen im Text. Ein geschütztes Leerzeichen (&nbsp;) zählt nicht als Leerraum und bleibt.

Manches, was aggressive Minimierer tun, unterbleibt bewusst: Anführungszeichen um Attribute bleiben (kein class=karte), schließende Tags werden nicht weggelassen, leere Attribute nicht verkürzt. Das spart noch ein paar hundert Byte, bricht aber manche Template-Engines und E-Mail-Programme. Ein Hinweis: Leerraum zwischen Listenpunkten, die per CSS nebeneinanderstehen (display: inline-block), wird ebenfalls entfernt; braucht Ihr Menü diese Lücke, geben Sie den Abstand per CSS-margin vor.

Welche Einstellung wofür

E-Mail-Vorlage: Kommentare entfernen, eingebetteten Code minimieren. Manche E-Mail-Programme, darunter Gmail, kürzen Nachrichten ab einer bestimmten Größe; Minimieren hilft, die Vorlage darunter zu halten. Bedingte Kommentare können für Outlook nötig sein, das Werkzeug behält sie daher von selbst.

Kommentare behalten sollten Sie, wenn die Seite eine Bibliothek nutzt, die mit Kommentaren arbeitet (etwa Knockout), oder wenn Kommentare Markierungen eines Redaktionssystems sind. <style>/<script> nicht anfassen sollten Sie, wenn ein Skript Platzhalter einer Template-Engine wie {{ }} enthält; ein Minimierer hält sie für JavaScript und kann sie nicht lesen. Wenn Sie den Code nur lesen wollen, arbeitet das Werkzeug HTML formatieren in die Gegenrichtung.

Häufige Fragen

Wie minimiere ich HTML?

Fügen Sie den Code links auf dieser Seite ein. Rechts erscheint er ohne Kommentare und überflüssigen Leerraum, das enthaltene CSS und JavaScript ebenfalls verkleinert. Kopieren Sie ihn oder laden Sie ihn als .html-Datei herunter; die Ergebniszeile zeigt die Ersparnis in Byte.

Kann HTML-Minimieren das Layout zerstören?

Dieses Werkzeug entfernt nur Leerraum, der die Darstellung nicht ändern kann: zwischen Block-Tags und doppelte Leerzeichen im Text. Ein einzelnes Leerzeichen zwischen Inline-Elementen sowie alles in <pre> und <textarea> bleibt erhalten. Einzige Ausnahme sind per CSS nebeneinander gesetzte Listenpunkte: Der Leerraum zwischen ihnen fällt weg, geben Sie ihnen einen CSS-margin.

Warum blieben meine <!--[if IE]>-Kommentare stehen?

Das sind bedingte Kommentare: Der alte Internet Explorer und manche Outlook-Versionen lesen sie und führen den Code darin aus. Ohne sie könnte das Layout dort zerfallen; das Werkzeug behält sie deshalb bei jeder Einstellung.

Wird mein Code an einen Server geschickt?

Nein. Das Minimieren läuft samt CSS- und JavaScript-Minimierer vollständig in Ihrem Browser; Ihr HTML verlässt diese Seite nicht.