Core Web Vitals einfach erklärt: LCP, INP und CLS

Google misst, wie sich eine Website für echte Besucher anfühlt, und fasst das in drei Kennzahlen zusammen: den Core Web Vitals. Das klingt technisch, ist aber gut zu verstehen.

Die drei Werte

LCP: Wie schnell ist das Wichtigste sichtbar?

Largest Contentful Paint misst, wann das größte sichtbare Element geladen ist, meist das Titelbild oder die Hauptüberschrift. Gut sind 2,5 Sekunden oder weniger.

INP: Wie schnell reagiert die Seite?

Interaction to Next Paint misst, wie lange es dauert, bis die Seite nach einem Tippen oder Klick sichtbar reagiert. Gut sind 200 Millisekunden oder weniger. INP hat im März 2024 den älteren Wert FID abgelöst.

CLS: Springt die Seite?

Cumulative Layout Shift misst, wie stark sich Inhalte beim Laden verschieben. Kennst du das: Du willst auf einen Link tippen, und plötzlich rutscht ein Bild darüber? Gut ist ein Wert von 0,1 oder weniger.

Die Werte und Grenzen stammen von Google (Quelle: web.dev/articles/vitals). Eine Seite gilt als gut, wenn mindestens 75 Prozent der Seitenaufrufe den Grenzwert erreichen.

Warum das für dich zählt

Google nutzt die Core Web Vitals als Teil der Bewertung der Nutzererfahrung (Quelle: developers.google.com/search/docs/appearance/core-web-vitals). Google sagt aber auch deutlich, dass gute Inhalte wichtiger sind. Der direkte Nutzen schneller Seiten liegt woanders: Besucher springen seltener ab, gerade auf dem Handy mit schwachem Netz.

So prüfst du deine Werte

• PageSpeed Insights (pagespeed.web.dev): Adresse eingeben, fertig. Oben stehen echte Nutzerdaten, sofern deine Seite genug Besucher hat, darunter ein Labortest.
• Google Search Console: Der Bericht „Core Web Vitals“ zeigt, welche Seiten gut sind und welche verbessert werden sollten.
• Lighthouse in den Entwicklertools von Chrome (F12) für einen schnellen Test zwischendurch.

Der Labortest schwankt von Durchlauf zu Durchlauf. Teste mehrmals und achte auf die Tendenz.

Typische Ursachen und Lösungen

• Schlechter LCP: meist zu große Bilder. Lösung: Bilder in modernen Formaten wie WebP oder AVIF und in passender Größe ausliefern, das Titelbild bevorzugt laden.
• Schlechter INP: zu viel JavaScript, oft durch Plugins, Chat-Fenster oder Tracking. Lösung: Unnötiges entfernen.
• Schlechter CLS: Bilder ohne feste Größe, nachladende Banner oder Schriften. Lösung: Breite und Höhe für Bilder angeben und Platz für eingeblendete Elemente freihalten.

Häufige Fragen

Mein Baukasten zeigt schlechte Werte. Was kann ich tun?

Bei Baukästen hast du wenig Einfluss auf den Code. Bilder verkleinern und unnötige Elemente entfernen hilft etwas. Grundlegend ändert sich meist erst etwas mit einem schlankeren System.

Muss ich in Lighthouse 100 Punkte haben?

Nein. Die Punktzahl stammt aus einem Labortest. Entscheidend ist, dass die drei Werte für echte Besucher im grünen Bereich liegen.