Die meisten Seiten sind langsam
aus demselben Grund.

Zuerst messen, dann ändern

Ohne Messung ändert man auf Verdacht. Zwei Werte reichen für den Anfang:

• LCP (Largest Contentful Paint): Wann ist das größte sichtbare Element da? Unter 2,5 Sekunden gilt als gut.
• CLS (Cumulative Layout Shift): Wie stark springt das Layout beim Laden? Unter 0,1 gilt als gut.

Dazu kommt INP (Interaction to Next Paint) – die Reaktionszeit auf Eingaben, seit März 2024 anstelle von FID. Unter 200 Millisekunden gilt als gut.

Ursache 1: Bilder — fast immer der größte Posten

Bilder machen bei den meisten Seiten den Löwenanteil der übertragenen Daten aus. Und fast immer sind sie um ein Vielfaches größer, als sie sein müssten.

1. Richtige Größe. Ein Bild, das 600 Pixel breit angezeigt wird, muss nicht 4000 Pixel breit sein. Das ist der häufigste und größte Fehler.
2. Modernes Format. WebP oder AVIF statt JPEG spart bei gleicher Qualität einen erheblichen Teil.
3. Nachladen, was unten steht. Bilder außerhalb des sichtbaren Bereichs mit loading="lazy" laden.
4. Maße angeben. Breite und Höhe im HTML verhindern das Springen des Layouts beim Laden — das ist der direkteste Hebel auf CLS.

Ursache 2: Skripte, die niemand braucht

Jedes eingebundene Skript kostet – beim Laden und beim Ausführen. Typische Kandidaten: Analyse-Werkzeuge, Chat-Fenster, Bewertungs-Anzeigen, Karten, Schieberegler für Bilder, Animationsbibliotheken.

Der ehrliche Test: Geh die Liste durch und frag bei jedem Eintrag, was passieren würde, wenn er weg wäre. Bei mindestens der Hälfte lautet die Antwort: nichts.

Was bleibt, sollte verzögert geladen werden (defer), damit es das Anzeigen der Seite nicht aufhält.

Ursache 3: Schriften

Schriften blockieren das Anzeigen von Text, bis sie geladen sind. Drei Maßnahmen, die zusammen fast alles lösen:

• Schriften selbst ausliefern statt von einem fremden Server. Das spart eine zusätzliche Verbindung — und löst gleichzeitig ein Datenschutzthema.
• Nur die Schnitte laden, die vorkommen. Vier Gewichte, die niemand benutzt, sind vier unnötige Dateien.
• font-display: swap setzen. Dann erscheint der Text sofort in einer Ersatzschrift und wird ausgetauscht, sobald die richtige da ist.

Was am meisten bringt, in dieser Reihenfolge

1. Bilder verkleinern und ins richtige Format bringen.
2. Bildmaße im HTML angeben.
3. Skripte aussortieren, Rest verzögert laden.
4. Schriften lokal, reduziert, mit swap.
5. Caching einschalten, damit Wiederkehrer nichts neu laden.

Punkt eins und zwei lösen bei den meisten Seiten den Großteil des Problems. Wer mit Punkt fünf anfängt, optimiert an der falschen Stelle.