Core Web Vitals: Die wichtigsten Metriken einfach erklärt

Gemeinsam mit weiteren Aspekten der Page Experience sorgen gute Core Web Vitals für ein stabiles Laden der Seiten und für zufriedenere Nutzer.

Trotz der zahlreichen Faktoren für die Page Experience ist davon auszugehen, dass die Core Web Vitals einen besonders hohen Einfluss auf die gesamte Nutzererfahrung haben. Man sollte sie also nicht unterschätzen: sie verhelfen zu besseren Conversion Rates und weniger Absprüngen und können ebenfalls bessere SEO-Rankings begünstigen.

Im Folgenden erfahrt ihr mehr zu den drei Kennzahlen– Largest Contentful Paint, Cumulative Layout Shift und Interaction to Next Paint – sowie der Einschätzung und Optimierung dieser Werte.

Die drei Kennzahlen

Largest Contentful Paint (LCP) – Ladegeschwindigkeit

Der LCP misst die Ladegeschwindigkeit des Hauptinhalts bzw. wann dieser im Viewport gerendert wird. Es geht also um den Zeitpunkt, an dem das größte sichtbare Element geladen wird. Dies ist meist ein großes Bild, Hero-Banner oder auch ein großer Textblock.

Die Ladegeschwindigkeit hängt dabei von verschiedenen Faktoren ab, besonders unoptimierte Bilder und Videos, große CSS und Javascript-Dateien oder auch nachladende Inhalte, Webfonts und co. verlangsamen dabei den Largest Contentful Paint.

Interaction to Next Paint (INP) – Reaktionsschnelligkeit

Der INP ersetzte 2024 den First Input Delay (FID) und misst die Reaktionsschnelligkeit der Seite. Während der FID misst, wie schnell eine Seite auf die erste Benutzerinteraktion reagiert (Verzögerung Klick bis Start der Eventverarbeitung), misst der INP die langsamste „typische“ Zeitspanne (98. Perzentil aller Interaktionen) der Interaktionen während eines Seitenbesuchs: von Klick bis zur tatsächlichen sichtbaren Änderung im UI.

Große oder schlecht strukturierte JavaScript-Dateien haben einen negativen Einfluss auf den INP, genauso wie komplexe Animationen, große Bilder und Third-Party-Widgets.

Cumulative Layout Shift (CLS) – Visuelle Stabilität

Der CLS misst die Stabilität des Layouts. Ein guter CLS sichert, dass es möglichst keine Verschiebungen von Inhalten beim Laden oder Aktualisieren einer Seite gibt – dies passiert häufig, wenn Bilder nachträglich geladen werden oder
Werbeelemente verzögert Platz beanspruchen.
Um dies zu vermeiden, sollten Bilder oder Videos ohne feste Größe sowie komplexe Animationen vermieden werden, da sie unerwartete Sprünge im Layout hervorrufen können.

Relevanz als Rankingfaktor

Die Core Web Vitals sind aktuell keine direkten Rankingfaktoren, können aber durchaus indirekten Einfluss auf das Ranking von Webseiten haben. Sie sind als indirekter Rankingfaktor redaktionellen Aspekten etc. deutlich untergeordnet und werden durch ihren Einfluss auf das Nutzerverhalten vor allem dann relevant, wenn zwei Seiten inhaltlich gleichwertig sind. Eine Optimierung lohnt sich aus Rankingsicht daher besonders bei stark umkämpften Keywords.

Da es in der Suchmaschinenoptimierung jedoch nicht nur um Rankings, sondern um den strategischen Ausbau des organischen Erfolgs geht, sollten die Core Web Vitals keinesfalls unterschätzt werden: sie bilden die technische Grundlage der Nutzererfahrung und wirken sich nachweislich direkt auf Conversion Rate und Absprungrate aus. Das zeigt sich auch in der eigenen Erfahrung, denn wir alle haben vermutlich schon einmal eine Seite verlassen, wenn sie zu lange geladen hat oder technisch unprofessionell wirkte.

Obwohl eine Optimierung also aus Rankingsicht nur in manchen Fällen relevant ist, ist sie Pflicht für alle, die SEO professionell und ganzheitlich betreiben möchten.

Desktop vs. Mobile

Die Einschätzung der Werte findet für Desktop und Mobile getrennt statt, da sich Smartphones und Desktops in Hardwareleistung, Rendering-Verhalten und natürlich auch Layout unterscheiden. Eine Seite kann also für eine Geräteart gut abschneiden und die Core Web Vitals „bestehen“, während der andere Gerätetyp schlechte Werte verzeichnet.

Besonders relevant sind dabei die mobilen Ergebnisse, denn auch technisch gilt „mobile first“.

Messung und Einordnung

Der aktuelle Stand der Core Web Vitals kann sowohl in der Search Console, über die Google Pagespeed Insights (https://pagespeed.web.dev/) als auch in den Chrome DevTools eingesehen werden.

Die Einordnung findet dabei in drei Kategorien statt (gut, verbesserungswürdig, schlecht), wird nach Gerätetyp aufgeschlüsselt und geht häufig mit einer Abschlussbewertung in „bestanden/ nicht bestanden“ einher. Die Core Web Vitals gelten nur dann als bestanden, wenn alle drei Werte als „gut“ angesehen werden.

Zur Einordnung werden dabei folgende Messwerte verwendet:

Interaction to Next Paint: gut ≤ 200 ms, verbesserungswürdig >200 bis 500 ms, schlecht > 500 ms

Largest Contentful Paint: gut ≤ 2,5 s, verbesserungswürdig > 2,5 s bis 4 s, schlecht > 4 s

Cumulative Layout Shift: gut ≤ 0,1, verbesserungswürdig > 0,1 bis 0,25, schlecht > 0,25

Core Web Vitals optimieren

Bei den PageSpeed Insights und der Google Search Console werden konkrete Verbesserungsvorschläge angegeben, doch es gibt auch generelle Empfehlungen, die man beachten kann, um Core Web Vitals technisch versiert zu optimieren. Neben den drei Metriken sollte man dabei generell die Websitegröße im Blick behalten und
die Größe kritischer Ressourcen (CSS, JS, Above-the-Fold-Bilder) möglichst gering halten.

5 Tipps zur Optimierung der visuellen Stabilität (CLS)

1. Breite und Höhe für Bilder und Medien angeben – damit diese nicht nachträglich angepasst werden.
2. Platz für dynamischen Content reservieren – z. B. für Banner, Ads oder Kommentare.
3. Komplexe CSS- oder JavaScript-Animationen begrenzen – stattdessen z.B. Transform-Eigenschaften nutzen.
4. Webfonts & kritisches CSS vorab laden – das verhindert sogenannten„Flash of Unstyled Text”.
5. Kein Lazy Loading ohne Platzhalter – Platzhalter oder Skeleton-Elemente helfen der Stabilität.

5 Tipps zur Optimierung derLadegeschwindigkeit (LCP)

1. Server-Caching nutzen – um häufig geladene Ressourcen effizient bereitzustellen.
2. Bilder und Medien optimieren – z.B. durch Nutzung moderner Formate wie WebP oder AVIF sowie Komprimierung.
3. CSS und JavaScript minimieren – durch Entfernen unbenutzten Codes oder Kombinieren von Dateien.
4. Unnötige Plugins identifizieren und entfernen – im Bestfall regelmäßig.
5. Lazy Loading nur für untere Inhalte einsetzen – „above the fold“ sofort laden.

5 Tipps zur Optimierung der Reaktionsgeschwindigkeit (INP)

1. Animationen reduzieren und vereinfachen – z.B. wo möglich durch einfache CSS-Transformationen statt aufwendigem JavaScript.
2. Drittanbieter-Skripte prüfen und reduzieren – Externe Tools wie Tracker, Chat-Widgets oder Werbeskripte wenn sinnvoll entfernen.
3. Serverantwortzeit verbessern – durch performantes Hosting, optimierte Datenbanken und Caching.
4. Content Delivery Network einsetzen – für Laden der Inhalte vom nächstgelegenen Server aus.
5. Rechenintensive Aufgaben auslagern – damit Klicks und Eingaben ohne Verzögerung verarbeitet werden können.