HTML Minifier

Was ist HTML-Minimierung?

HTML-Minimierung ist der Prozess, die Größe eines HTML-Dokuments zu reduzieren, ohne zu verändern, wie der Browser es darstellt. Ein HTML-Minifier entfernt Zeichen, die nur der Lesbarkeit für Entwickler dienen: Leerzeichen zwischen Tags, Kommentare, optionale schließende Tags und redundante Attributwerte. Das Ergebnis ist funktional identisch mit dem Original, aber kleiner in der Bytegröße – das bedeutet schnellere Downloads und kürzere Zeit bis zum ersten Seitenaufbau für Nutzer.

Browser parsen HTML in einen DOM-Baum und verwerfen dabei die meisten Leerzeichen. Eine Folge von Leerzeichen und Zeilenumbrüchen zwischen zwei div-Tags hat keinen visuellen Effekt auf die gerenderte Seite. Kommentare werden vom Parser ebenfalls ignoriert. Die Minimierung nutzt diese Regeln, indem sie entfernt, was der Parser ohnehin verwerfen würde, sodass diese Daten gar nicht erst über das Netzwerk übertragen werden müssen.

Die Einsparungen durch HTML-Minimierung variieren je nach Dokument. Stark kommentierte Templates, serverseitig gerenderte Seiten mit tiefer Einrückung und CMS-Ausgaben mit Inline-Stilen erzielen durch die Minimierung oft eine Größenreduzierung von 15–30 %. Bei kleinen Dokumenten sind die absoluten Einsparungen gering, aber bei Websites mit hohem Datenverkehr summieren sich selbst wenige Kilobytes pro Seitenaufruf über Millionen von Anfragen zu echten Bandbreiteneinsparungen.

Warum diesen HTML Minifier verwenden?

HTML einfügen und sofort minimierte Ausgabe erhalten. Keine Build-Tools zu installieren, keine Konfigurationsdateien, keine Konten erforderlich.

Anwendungsfälle für HTML Minifier

Was HTML-Minimierung entfernt

Ein vollwertiger HTML-Minifier wendet mehrere Transformationen über die bloße Leerzeichenentfernung hinaus an. Die folgende Tabelle listet die gängigsten Techniken auf, geordnet von der sichersten (immer verlustfrei) bis zur aggressivsten (kann in Randfällen zu Problemen führen, wenn sie blind angewendet wird).

Minimierung vs. Gzip-Komprimierung

Entwickler fragen manchmal, ob Minimierung noch notwendig ist, wenn der Server bereits Gzip- oder Brotli-Komprimierung anwendet. Die kurze Antwort: Ja, und sie ergänzen sich am besten gegenseitig.

Minimierung reduziert die Eingabe, die Gzip verarbeitet, sodass auch die komprimierte Ausgabe kleiner wird. Googles PageSpeed-Richtlinien empfehlen, beide Methoden anzuwenden. Auf einer typischen Seite spart die Minimierung 15–25 % der rohen Größe, und Gzip komprimiert das Ergebnis um weitere 60–80 %. Kombiniert kann die Gesamtübertragungsgröße auf 10–20 % des ursprünglichen, nicht minimierten und unkomprimierten Dokuments sinken.

Code-Beispiele

Im Folgenden finden Sie funktionierende Beispiele zur HTML-Minimierung in vier Umgebungen. Jedes Beispiel entfernt Kommentare und reduziert Leerzeichen.

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

Häufig gestellte Fragen