Löschen Sie HTML-Code sofort, um die Dateigröße zu reduzieren und die Ladegeschwindigkeit der Webseite zu verbessern.
Einleitung
Das HTML, an dem Sie arbeiten, und das HTML, das im Browser ankommt, müssen nicht dieselbe Datei sein. Während Sie eine Seite bauen, machen Einrückung und Zeilenumbrüche die Struktur leicht nachvollziehbar, und Kommentare im Markup erklären Abschnitte oder halten etwas für später fest. Der Browser braucht davon nichts, um die Seite richtig darzustellen — er braucht nur gültige, saubere Tags. Minifizieren streicht heraus, was allein für menschliche Lesende dasteht, sodass dieselbe Seite als kleinere Datei beim Browser ankommt.
Wie dieses Werkzeug Ihr HTML minifiziert
- Alle Kommentare werden entfernt, ausnahmslos. Jeder
<!-- ... -->-Block wird gestrichen, auch die alten bedingten Kommentare für den Internet Explorer und jeder Kommentar, den Sie vielleicht behalten wollten, etwa ein Lizenz- oder Urhebervermerk. Eine Entsprechung zur „diesen einen behalten“-Regel, die der CSS-Minifier dieser Seite unterstützt, gibt es hier nicht — wenn ein Kommentar zählt, behalten Sie ihn in Ihrer Arbeitsfassung und verlassen Sie sich nicht darauf, dass er die Minifizierung übersteht. - Der Inhalt in
<pre>-,<code>-,<script>- und<textarea>-Tags behält seinen Leerraum exakt. Zeilenumbrüche und Abstände tragen innerhalb dieser Tags Bedeutung — ein Codebeispiel oder ein vorformatierter Textblock käme falsch heraus, würde man sein inneres Spacing zusammenziehen —, und dieses Werkzeug lässt diesen Leerraum unangetastet. - Leerraum an anderen Stellen wird zusammengezogen, nicht gelöscht. Eine Folge aus Leerzeichen, Tabulatoren oder Zeilenumbrüchen zwischen zwei Inline-Elementen — etwa einem Link mitten im Satz — wird auf ein einzelnes Leerzeichen verkürzt statt ganz entfernt, damit benachbarte Wörter nicht zusammenkleben. Nur der Abstand zwischen strukturellen Tags der obersten Ebene und innerhalb von
<head>fällt vollständig weg, denn dort wird ohnehin nie etwas als sichtbarer Fließtext dargestellt. - Ein abschließender Schrägstrich bei selbstschließenden Tags wird vereinheitlicht. Aus
<img src="photo.jpg" />wird<img src="photo.jpg">— beides ist gültiges HTML, und die kürzere Form spart bei jedem selbstschließenden Tag der Seite ein paar Zeichen.
Das eine echte Risiko: Kommentare in vorformatiertem Inhalt
Weil das Entfernen der Kommentare in einem ersten Durchgang über Ihre gesamte Eingabe läuft, bevor dieses Werkzeug überhaupt hinsieht, in welchem Tag etwas steht, kann es einen gewöhnlichen, zum Löschen bestimmten Kommentar nicht von dem wörtlichen Text <!-- ... --> unterscheiden, den Sie in einem <pre>- oder <code>-Block absichtlich zeigen — etwa in einem Tutorial-Beispiel, das vorführt, wie ein HTML-Kommentar aussieht. In genau diesem Fall würde der Beispieltext herausgestrichen, obwohl der Leerraum drumherum im selben Block korrekt erhalten bleibt. Betroffen ist nur Text, der die Zeichen <!-- und --> buchstäblich innerhalb eines vorformatierten Blocks enthält; gewöhnliche Codebeispiele ohne Kommentarsyntax als Teil des Gezeigten berührt das nicht.
Was Sie vor dem Minifizieren wissen sollten
Dieses Werkzeug ändert allein die Formatierung — es stellt keine Elemente um, führt keine Tags zusammen und nimmt nichts aus der tatsächlichen Struktur der Seite heraus. Eine Größengrenze für das Eingefügte gibt es nicht, weil Sie direkt mit Text arbeiten und keine Datei hochladen; das vollständige HTML einer Seite lässt sich, auch wenn es lang ist, genauso einfügen und verarbeiten wie ein kurzer Ausschnitt.
Wie bei jedem Minifier lohnt es sich, die minifizierte Ausgabe vor dem Veröffentlichen im Browser zu laden — nicht weil die Umwandlung unzuverlässig wäre, sondern weil es gute Übung ist, vor dem Live-Gang zu bestätigen, dass eine Seite aussieht und sich verhält wie erwartet, genau wie man alles andere vor dem Einreichen oder Veröffentlichen Korrektur liest.
Wann dieses Werkzeug das richtige ist
- Eine Seite fürs Veröffentlichen vorbereiten, wenn Sie mit dem Bearbeiten fertig sind. Arbeiten Sie beim Bauen weiter mit der lesbaren Fassung und minifizieren Sie einmal, kurz bevor es live geht — nicht als Arbeitsformat.
- Seitengewicht sparen bei knappem Hosting oder langsamer Verbindung. Eine kleinere HTML-Datei lädt schneller, was im Schulnetz oder auf einem Handy im Mobilfunk mehr ausmacht, als man meinen würde.
- Quelltexte vergleichen, um zu sehen, wie produktives HTML wirklich aussieht. Der Quelltext einer echten Website zeigt oft kompaktes HTML, das mit Handgeschriebenem wenig gemein hat — die eigene Seite zu minifizieren und beides nebeneinanderzulegen, macht handfest sichtbar, warum das so ist.
Ein Beispiel
Eine Schülerin stellt für den Webdesign-Unterricht eine persönliche Portfolioseite fertig, in deren Markup noch Kommentare aus früheren Entwürfen stehen, dazu ein Codebeispiel in einem <pre>-Block, das zeigt, wie ein HTML-Kommentar aussieht — als Teil der Erklärung, was sie gelernt hat. Vor der Abgabe fügt sie die ganze Seite hier ein. Die dargestellte Seite sieht aus und verhält sich genau wie zuvor, die übrig gebliebenen Entwurfskommentare sind weg, und die Datei ist kleiner — aber das Kommentarbeispiel im Codeausschnitt ist ebenfalls verschwunden, weil es zufällig die wörtlichen Zeichen <!--/--> enthielt. Dieses eine Beispiel so anzupassen, dass es die exakte Kommentarsyntax vermeidet, oder diesen Abschnitt vom Minifizieren auszunehmen, löst das Problem.
Häufige Fragen
Ändert Minifizieren das Aussehen meiner Seite?
Nein. Tags und Struktur bleiben erhalten — es ändern sich nur Formatierung, Leerraum und Kommentare, und nichts davon beeinflusst die Darstellung.
Was passiert mit Kommentaren in meinem HTML?
Sie werden alle entfernt, ausnahmslos — anders als beim CSS-Minifier dieser Seite lässt sich kein Kommentar als „behalten“ markieren.
Bleibt Leerraum in einem <pre>- oder <code>-Block erhalten?
Ja, Abstände und Zeilenumbrüche innerhalb dieser Tags und ebenso in <script> und <textarea> bleiben genau so, wie Sie sie geschrieben haben. Die eine Ausnahme: Enthält dieser Inhalt buchstäblich Kommentarsyntax (<!-- -->) als angezeigten Text, wird sie zusammen mit echten Kommentaren entfernt, weil das Entfernen der Kommentare geschieht, bevor dieses Werkzeug hinsieht, in welchem Tag es steht.
Gibt es eine Größengrenze?
Nein — Sie fügen Text ein und laden keine Datei hoch, es gibt hier also keine feste Grenze wie bei den Datei-Upload-Werkzeugen dieser Seite.
Wird mein Code irgendwo gespeichert?
Nein. Das eingefügte HTML wird verarbeitet, um das minifizierte Ergebnis zu erzeugen, und danach weder als Datei abgelegt noch aufbewahrt; festgehalten wird nur, dass das Werkzeug benutzt wurde, nicht der Code selbst.
Welche verwandten Werkzeuge gibt es?
Für andere Codeformate nehmen Sie CSS Minifier und JavaScript Minifier zum Minifizieren oder CSS Beautifier und JavaScript Beautifier, um den Vorgang umzukehren.
