Was es ist
Bevor ein Browser irgendeinen Teil einer Seite anzeigen kann, muss er zuerst das HTML-Dokument der Seite vollständig herunterladen (oder zumindest genug davon, um loszulegen) — das ist getrennt von Bildern, Videos oder anderen Medien, die danach nachgeladen werden. Dieser Check betrachtet speziell die Größe dieses ursprünglichen HTML-Dokuments selbst und markiert es, wenn es ungewöhnlich groß geworden ist.
HTML-Dokumente blähen sich typischerweise auf, wenn viel Inhalt direkt eingebettet ist — große Blöcke aus Styling-Code, Skripten oder wiederholtem Inhalt, die direkt in die Seite eingefügt wurden —, statt in separaten, wiederverwendbaren Dateien gehalten zu werden, die der Browser einmal laden und zwischenspeichern kann.
Warum es wichtig ist
Ein größeres HTML-Dokument braucht messbar länger zum Herunterladen und Verarbeiten, bevor der Browser überhaupt anfangen kann, irgendetwas darzustellen — das verzögert das Allererste, was ein Besucher sieht, nicht nur nachrangigen Inhalt weiter unten auf der Seite. Dieser Effekt ist bei langsameren mobilen Verbindungen noch ausgeprägter, wo jedes zusätzliche Datenstück echte, spürbare Zeit hinzufügt, bevor sich die Seite reaktionsschnell anfühlt.
Eine aufgeblähte HTML-Datei ist außerdem häufig ein Symptom für ein tieferliegendes strukturelles Problem — Inhalt oder Code, der eigentlich in separate, zwischenspeicherbare Dateien gehört hätte, wird stattdessen quer über die Seite oder sogar über jede Seite der Website hinweg mehrfach eingebettet.
So behebst du es
- Finde heraus, was den Großteil der Datei ausmacht — die Entwicklertools des Browsers können die Größenverteilung der Ressourcen einer Seite anzeigen, einschließlich des HTML-Basisdokuments selbst.
- Verschiebe große Blöcke von Inline-CSS (Styling-Code) in eine separate
.css-Datei, die der Browser einmal laden und über mehrere Seiten hinweg wiederverwenden kann, statt sie auf jeder Seite erneut inline zu wiederholen. - Verschiebe größere Inline-JavaScript-Blöcke aus demselben Grund in separate
.js-Dateien. - Prüfe den Code der Seite auf versehentlich doppelten Inhalt (denselben Block, der mehrfach vorkommt) und entferne die Duplikate.
- Nutzt du einen Website-Baukasten, wird das normalerweise für dich verwaltet — eine ungewöhnlich große Seite liegt hier eher an einem aufwendigen eigenen Code-Einbau als an der Plattform selbst, prüfe also alle selbst hinzugefügten Code-Blöcke.