Größe des HTML

Was geprüft

Gemessen wird die Größe des HTML-Dokuments nach dem Entpacken; die übertragene Größe steht zusätzlich im Beleg. Bis 200 KB ist der Punkt unauffällig. Fehlende Kompression bewertet der Punkt „Kompression“, hier nicht noch einmal.

Wie relevant

Niedrig über 200 KB, Mittel über 1 MB. Das HTML muss der Browser vollständig lesen, bevor er die Seite aufbauen kann; sehr große Dokumente verzögern das erste Anzeigen.

Warum

Großes HTML entsteht oft durch eingebettete Daten (JSON für Skripte, eingebettete Bilder als Base64), wiederholtes Markup von Seitenbaukästen oder inline eingefügtes CSS. Das belastet langsame Verbindungen und Geräte mit wenig Rechenleistung.

Wie beheben

Suchen Sie im Quelltext nach großen eingebetteten Blöcken: Base64-Bilder, lange Skriptdaten, doppelte Menüs (Desktop und Mobil getrennt). Lagern Sie diese in eigene, zwischenspeicherbare Dateien aus und reduzieren Sie verschachtelte Builder-Container.

Nebenwirkung: Ausgelagertes CSS oder JavaScript erzeugt zusätzliche Abrufe und kann ohne passendes Caching langsamer sein. Vergleichen Sie Größe und Ladezeit vor und nach der Änderung; nach Optimierungs-Plugins Cache leeren.

WordPress: Seitenbaukästen und Optimierungs-Plugins, die „kritisches CSS“ oder ganze Stylesheets inline einbetten, vergrößern das HTML. Prüfen Sie die Einstellungen für Inline-CSS und ob Bilder als Base64 eingebettet werden.

Codebeispiel

HTML (eingebettetes Bild auslagern)

<!-- vorher: Bild als Base64 im HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">

<!-- nachher: eigene Datei, zwischenspeicherbar -->
<img src="/bilder/logo.png" alt="Logo" width="200" height="60">

Weiterführende Quellen

• https://web.dev/articles/dom-size-and-interactivity
• https://developer.chrome.com/docs/lighthouse/performance/dom-size