HTML-Minifier

Leichteres HTML, schnellere Seiten

Von Menschen geschriebenes (oder von Seitenbaukästen erzeugtes) HTML steckt voller Einrückungen, Zeilenumbrüche und Kommentare. Browser brauchen sie nicht. Der HTML-Minifier entfernt die unnötigen Zeichen, und die Seite funktioniert genauso; er zeigt außerdem die HTML-Zeichen davor und die Zeichen des minifizierten HTML danach, damit Sie sehen, wie viel Sie gespart haben.

Leichteres HTML lädt schneller, vor allem in Mobilfunknetzen, und es ist die erste Datei, die der Browser braucht, bevor er überhaupt etwas anzeigen kann.

Minifizieren Sie eine Kopie für die Produktion und behalten Sie Ihren Originalcode lesbar zum Bearbeiten.

So verwenden Sie den HTML-Minifier

1. Fügen Sie Ihren HTML-Code ein.
2. Senden Sie ab, um ihn zu minifizieren.
3. Vergleichen Sie die Zeichenzahl.
4. Kopieren Sie das minifizierte HTML und testen Sie die Seite vor dem Veröffentlichen.

Beispiele

Eine kleine Seite

Eingabe:

<!DOCTYPE html>
<html>
  <head>
    <title> My page </title>
  </head>
  <body>
    <!-- main nav -->
    <p class="intro">
      Hello   <b>world</b>
    </p>
  </body>
</html>

Ausgabe:

<!DOCTYPE html><html><head><title>My page</title><body><p class=intro>Hello <b>world</b>

Leerzeichen und der Kommentar verschwinden, die Anführungszeichen um intro werden entfernt, und schließende Tags, die HTML weglassen darf (wie </p>, </body> und </html>), werden gestrichen. Browser zeigen es genauso an.

Typische Anwendungen

• Statische HTML-Seiten und Landingpages verkleinern.
• HTML-E-Mail-Vorlagen komprimieren (manche E-Mail-Programme kürzen große Nachrichten).
• HTML-Schnipsel und Widgets verkleinern, die auf anderen Websites eingebettet werden.
• Produktionsversionen vorbereiten, wenn Sie kein Build-Tool haben.
• HTML-E-Mail-Vorlagen vor dem Versand verkleinern, nachdem Sie sie in den wichtigsten E-Mail-Programmen getestet haben.

Tipps und Wissenswertes

• Behalten Sie die Originaldatei lesbar. Minifizierter Code ist schwer zu bearbeiten.
• Leerzeichen in <pre> und <textarea> zählen; prüfen Sie diese Teile nach dem Minifizieren.
• Gmail kürzt E-Mails ab etwa 102 KB: Große HTML-E-Mails zu minifizieren kann sie also vollständig halten.
• Serverseitige Komprimierung (gzip oder Brotli) kommt zur Minifizierung hinzu, für noch kleinere Übertragungen.
• Minifizieren Sie auch Ihre Styles und Skripte mit dem CSS-Minifier und dem JS-Minifier.

Sonderfälle und Grenzen

• Optionale schließende Tags werden entfernt; das bleibt gültiges HTML, kann aber Tools verwirren, die überall geschlossene Tags erwarten, etwa manche E-Mail-Editoren oder XML-Parser. Testen Sie, bevor Sie das Ergebnis dort einsetzen.
• Leerzeichen in <pre> und <textarea> bleiben erhalten, weil sie dort eine Bedeutung haben.
• Template-Tags (wie {{ }} oder <?php ?>) können verändert werden. Minifizieren Sie das fertig erzeugte HTML, nicht die Templates.
• Inline-CSS und -JavaScript werden ebenfalls minifiziert: Prüfen Sie, ob die Seite noch funktioniert.

Häufige Fragen

Was macht die HTML-Minifizierung?

Sie entfernt Zeichen, die Browser nicht brauchen, etwa überflüssige Leerzeichen, Zeilenumbrüche und Kommentare, und macht die Datei kleiner.

Kann die Minifizierung meine Seite kaputt machen?

Selten, aber leerzeichenempfindliche Inhalte und Inline-Skripte können betroffen sein. Testen Sie die minifizierte Version immer.

Hilft minifiziertes HTML bei SEO?

Indirekt. Schnellere Seiten verbessern die Nutzererfahrung und die Core Web Vitals. Suchmaschinen lesen minifiziertes HTML problemlos.

Um wie viel wird mein HTML kleiner?

Das hängt von der Menge an Leerzeichen und Kommentaren ab. Bei handgeschriebenem HTML sind 10 % bis 30 % Ersparnis üblich.

Sollte ich das HTML meines CMS minifizieren?

Meist erledigt das ein Cache- oder Performance-Plugin im laufenden Betrieb. Nutzen Sie dieses Tool für statische Seiten, fertig erzeugte Templates und E-Mail-HTML.

Ähnliche Tools

• CSS-Minifier: Minifizieren Sie Ihr CSS, indem Sie alle unnötigen Zeichen entfernen.
• JS-Minifier: Minifizieren Sie Ihr JS, indem Sie alle unnötigen Zeichen entfernen.
• HTML-Tag-Entferner: Entfernen Sie ganz einfach alle HTML-Tags aus einem Textblock.
• HTML-Entity-Konverter: Codieren oder decodieren Sie die HTML-Entities eines beliebigen Textes.
• Textgrößen-Rechner: Ermitteln Sie die Größe eines Textes in Byte (B), Kilobyte (KB) oder Megabyte (MB).