Core Web Vitals einfach erklärt: LCP, INP & CLS verbessern.
Kurz gesagt
Die Core Web Vitals messen Ladegeschwindigkeit (LCP unter 2,5 Sekunden), Reaktionsfähigkeit (INP unter 200 Millisekunden) und visuelle Stabilität (CLS unter 0,1). Sie sind Teil der Page Experience, aber ein Faktor unter vielen. Für Nutzer sind sie trotzdem entscheidend, weil langsame Seiten Besucher verlieren.
Google misst mit den Core Web Vitals, wie sich eine Seite für echte Besucher anfühlt: Wie schnell erscheint der Hauptinhalt, wie schnell reagiert sie auf Klicks, und springt beim Laden etwas herum? Drei Kennzahlen fassen das zusammen.
Wichtig zur Einordnung: Gute Werte garantieren kein Top-Ranking. Sie sind ein Puzzleteil neben Inhalt, Relevanz und Vertrauen. Sie sind aber der Teil, den du technisch am sichersten verbessern kannst, und sie wirken direkt auf Absprungrate und Anfragen.
Die drei Kennzahlen im Überblick
LCP – Largest Contentful Paint
Misst, wann der größte sichtbare Inhalt geladen ist, meist Hero-Bild oder Überschrift. Gut: höchstens 2,5 Sekunden. Über 4 Sekunden gilt als schlecht.
INP – Interaction to Next Paint
Misst, wie schnell die Seite auf Eingaben wie Klicks, Taps oder Tastendrücke reagiert. Gut: höchstens 200 Millisekunden. INP hat im März 2024 den früheren Wert FID abgelöst.
CLS – Cumulative Layout Shift
Misst, wie stark sich Elemente beim Laden verschieben, zum Beispiel wenn ein Banner nachlädt und der Text springt. Gut: höchstens 0,1.
So misst du deine Werte
- PageSpeed Insights zeigt Labordaten und, wenn genug Traffic vorhanden ist, echte Nutzerdaten.
- Google Search Console enthält den Bericht „Core Web Vitals“ mit betroffenen URL-Gruppen.
- Chrome DevTools (Lighthouse) eignet sich zum Testen während der Entwicklung.
- Unterscheide Labordaten (simulierte Messung) und Felddaten (echte Nutzer): Für Google zählen die Felddaten.
Neue Seiten haben anfangs zu wenig Besucher für Felddaten. Dann liefern nur die Labordaten eine Orientierung.
LCP verbessern
- Hero-Bild in modernem Format (WebP oder AVIF) und in passender Größe ausliefern.
- Das wichtigste Bild mit Priorität laden, alle anderen verzögert.
- Schnelles Hosting mit Server in Deutschland und effektives Caching.
- Render-blockierende Skripte und unnötige Schriftarten reduzieren.
INP verbessern
- Weniger und kleineres JavaScript ausliefern, besonders Drittanbieter-Skripte.
- Lange Aufgaben aufteilen, damit der Browser zwischendurch auf Eingaben reagieren kann.
- Chat-Widgets, Tracking und Karten erst laden, wenn sie gebraucht werden.
CLS verbessern
- Für Bilder, Videos und Werbeflächen feste Breiten und Höhen angeben.
- Schriftarten lokal einbinden und Platzhalter definieren, damit der Text nicht springt.
- Keine Inhalte oberhalb bereits geladener Inhalte einfügen, zum Beispiel Cookie-Banner, die den Text nach unten schieben.
Warum moderne Technik hier hilft
Frameworks wie Next.js liefern vorgerenderte HTML-Seiten, laden nur den nötigen Code und optimieren Bilder automatisch. Das macht gute Werte deutlich leichter als bei Seiten mit vielen Plugins. Mehr zum Vergleich steht im Ratgeber WordPress vs. Next.js.
Trotzdem gilt: Auch die beste Technik lässt sich durch zu große Bilder oder zu viele Fremdskripte ausbremsen. Performance ist eine laufende Aufgabe. Bei uns gehört sie zur SEO-Optimierung.
Häufige Fragen
Sind Core Web Vitals ein Rankingfaktor?
Was ist ein guter PageSpeed-Wert?
Warum sind meine mobilen Werte schlechter als am Desktop?
Wie schnell verbessern sich die Werte nach Änderungen?
Passende Themen
WordPress oder Next.js?
Wie die Technik-Entscheidung die Geschwindigkeit beeinflusst.
Checkliste Unternehmenswebsite
Technik ist nur ein Teil einer guten Website.
SEO-Grundlagen für kleine Unternehmen
Wo Performance in der SEO-Reihenfolge steht.
SEO-Optimierung als Leistung
Performance und Struktur aus einer Hand.