Langsame Seiten beheben und Core Web Vitals verbessern
Core Web Vitals messen, wie schnell sich eine Seite anfühlt: wie schnell der Hauptinhalt erscheint, wie schnell sie reagiert und wie stabil sie bleibt. Für jeden Wert gibt es eine kurze Liste typischer Ursachen.
Die drei Werte, auf die du achten solltest
| Metrik | Misst | Gut |
|---|---|---|
| LCP | Wann der Hauptinhalt erscheint | 2,5 s oder weniger |
| INP | Wie schnell die Seite auf Eingaben reagiert | 200 ms oder weniger |
| CLS | Wie stark sich das Layout verschiebt | 0,1 oder weniger |
Führe den Page Speed Test aus, um deine Werte zu sehen. Die Ergebnisse schwanken zwischen den Durchläufen, und ein frisch veröffentlichtes Deployment kann langsamer wirken, bis die Caches gefüllt sind. Teste deshalb mehr als einmal.
Lab-Tests simulieren einen Seitenaufruf. Felddaten stammen von echten Chrome-Nutzern, und genau diese verwendet Google für die Bewertung der Seitenerfahrung. Eine neue Seite hat unter Umständen noch keine Felddaten.
Ein langsames LCP beheben
Das größte Element ist meist ein Hero-Bild oder eine Überschrift. Fang beim Bild an:
- Komprimiere es und skaliere es auf die Größe, in der es angezeigt wird, und nutze WebP oder AVIF.
- Lade das Hauptbild niemals verzögert (Lazy Loading) und sag dem Browser, dass es wichtig ist:
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="...">- Prüfe, ob der Server schnell antwortet. Langsames Hosting bremst alles danach aus, also nutze ein CDN und cache dein HTML, wo es geht.
- Aktiviere die Komprimierung und überprüfe sie mit dem Website Compression Test.
Ein langsames INP beheben
Der INP-Wert ist schlecht, wenn JavaScript den Browser ständig beschäftigt, sodass Taps und Klicks warten müssen. Häufige Ursachen sind Drittanbieter-Skripte wie Chat-Widgets und Tracker.
- Entferne Skripte, die du nicht brauchst, und lade die übrigen mit
defer. - Verschiebe aufwendige Aufgaben, bis die Seite geladen ist oder jemand sie tatsächlich braucht.
- Teile lange Aufgaben in kleinere Stücke auf, damit der Browser dazwischen reagieren kann.
Ein hohes CLS beheben
Inhalte springen, wenn etwas spät geladen wird und alles nach unten schiebt.
- Gib jedem Bild und jedem Video eine
widthund eineheight. - Reserviere Platz für Werbung und Einbettungen mit einer festen Mindesthöhe.
- Füge keine Banner über Inhalten ein, die bereits geladen sind.
Wo du anfangen solltest
Kümmere dich zuerst um deine meistbesuchten Vorlagen. Eine Startseite, eine Produktseite und eine Blogbeitrag-Vorlage decken meist den größten Teil einer Website ab. Ändere immer nur eine Sache und teste erneut, damit du weißt, was geholfen hat.
