Core Web Vitals erklärt: LCP, INP und CLS (und wie Sie sie verbessern)

Core Web Vitals sind drei Metriken, mit denen Google das reale Erlebnis einer Seite misst: wie schnell sie lädt, wie schnell sie reagiert und wie stabil sie beim Laden ist. Sie gehören zu den Page-Experience-Signalen, die Google beim Ranking berücksichtigt – und, wichtiger noch, sie spiegeln wider, wie Besucher Ihre Website tatsächlich erleben.

Die drei Core Web Vitals

Eine Seite besteht, wenn mindestens 75 % der echten Besuche (das 75. Perzentil) bei allen drei Metriken den Grenzwert „gut“ erreichen.

INP hat im März 2024 First Input Delay (FID) als Core Web Vital abgelöst. INP ist strenger: Es berücksichtigt die Reaktionsfähigkeit aller Interaktionen während des Besuchs, nicht nur der ersten.

Felddaten vs. Labordaten

Felddaten stammen von echten Chrome-Nutzern und werden im Chrome UX Report (CrUX) über ein rollierendes 28-Tage-Fenster erfasst. Diese Daten nutzt Google für die Page Experience. Sie finden sie im Core-Web-Vitals-Bericht der Search Console und in PageSpeed Insights.

Labordaten stammen aus einem simulierten Test, etwa Lighthouse, auf einem festen Gerät und Netzwerk. Sie eignen sich hervorragend zur Fehlersuche und zum Testen von Änderungen, werden von Google aber nicht fürs Ranking genutzt – und können INP nicht direkt messen (Total Blocking Time ist der nächste Labor-Näherungswert).

Seiten mit wenig Traffic haben eventuell nicht genug Felddaten; dann kann Google Daten ähnlicher Seiten oder der gesamten Website (des „Ursprungs“) heranziehen.

Largest Contentful Paint (LCP)

LCP markiert den Zeitpunkt, an dem das größte Bild oder der größte Textblock im sichtbaren Bereich fertig gerendert ist – meist das Hero-Bild, eine große Überschrift oder das Vorschaubild eines Videos.

LCP lässt sich in vier Teile zerlegen, die auf die Lösung hinweisen:

1. Time to First Byte – wie lange der Server zum Antworten braucht
2. Ressourcen-Ladeverzögerung – wie lange es dauert, bis der Browser mit dem Download der LCP-Ressource beginnt
3. Ressourcen-Ladezeit – wie lange der Download dauert
4. Element-Renderverzögerung – die Zeit zwischen Download und Darstellung

So verbessern Sie LCP

• Beschleunigen Sie den Server: Seiten-Caching, ein CDN, schnelleres Hosting und weniger Datenbankabfragen
• Machen Sie das LCP-Bild früh auffindbar: Verwenden Sie ein normales <img> im HTML (kein CSS-Hintergrund und kein per JavaScript eingefügtes Bild) und ergänzen Sie fetchpriority="high"
• Laden Sie das LCP-Bild niemals lazy
• Optimieren Sie das Bild: passende Abmessungen, WebP oder AVIF, gute Komprimierung
• Reduzieren Sie render-blockierende Ressourcen: kritisches CSS inline einbinden, nicht kritisches JavaScript verzögert laden
• Nutzen Sie preconnect zu benötigten Drittanbieter-Ursprüngen wie einem Bild-CDN

Interaction to Next Paint (INP)

INP misst die Verzögerung zwischen einer Nutzerinteraktion – Klick, Tippen oder Tastendruck – und der nächsten sichtbaren Aktualisierung auf dem Bildschirm. Gemeldet wird eine der langsamsten Interaktionen während des Besuchs.

Schlechter INP entsteht meist durch zu viel JavaScript auf dem Main Thread, sodass der Browser nicht schnell reagieren kann.

So verbessern Sie INP

• Reduzieren und teilen Sie JavaScript auf: ungenutzte Bibliotheken entfernen, Code splitten und Funktionen erst bei Bedarf laden
• Zerlegen Sie lange Tasks: Tasks über 50 ms blockieren den Main Thread; geben Sie dem Browser zwischen Arbeitsschritten die Kontrolle zurück
• Prüfen Sie Drittanbieter-Skripte: Tag-Manager, Chat-Widgets, A/B-Testing-Tools und Werbeskripte sind häufige Übeltäter
• Halten Sie das DOM schlank: Sehr große Seiten machen jede Aktualisierung langsamer
• Geben Sie sofort visuelles Feedback auf eine Interaktion und erledigen Sie schwere Arbeit danach

Cumulative Layout Shift (CLS)

CLS misst unerwartete Layoutverschiebungen – das ärgerliche Erlebnis, wenn ein Button genau in dem Moment wegspringt, in dem Sie tippen. Bewertet wird, wie viel Inhalt sich bewegt und wie weit.

So verbessern Sie CLS

• Setzen Sie Breite und Höhe bei Bildern und Videos oder nutzen Sie CSS aspect-ratio, damit Platz reserviert wird
• Reservieren Sie Platz für Anzeigen, Embeds und iframes mit Containern fester Größe
• Fügen Sie keine Inhalte oberhalb bestehender Inhalte ein, etwa Banner, die die Seite nach dem Laden nach unten schieben
• Verwenden Sie font-display: swap mit Bedacht und laden Sie wichtige Webfonts vor, oder nutzen Sie Fallback-Font-Metriken, damit Text nicht neu umbricht
• Animieren Sie mit transform, nicht mit Eigenschaften wie top oder height, die eine Layoutberechnung auslösen

Ein praktischer Ablauf

1. Prüfen Sie den Core-Web-Vitals-Bericht der Search Console, um zu sehen, welche URL-Gruppen bei welcher Metrik durchfallen
2. Wählen Sie eine repräsentative URL aus jeder durchfallenden Gruppe
3. Führen Sie einen Labortest durch, um zu diagnostizieren, was langsam ist
4. Beheben Sie Probleme auf Template-Ebene – die meisten betreffen alle Seiten mit demselben Layout
5. Validieren Sie: Starten Sie die Validierung in der Search Console nach dem Deployment; Felddaten brauchen bis zu 28 Tage, um Verbesserungen abzubilden

Wie stark beeinflussen Core Web Vitals das Ranking?

Google hat klargestellt, dass Page Experience ein Signal unter vielen ist und Relevanz sowie hilfreiche Inhalte wichtiger sind. Eine schnelle Seite mit schwachen Inhalten überholt keine großartige Seite. Sind Seiten aber ähnlich relevant, kann ein besseres Erlebnis helfen – und schnellere Seiten konvertieren durchweg besser, was unabhängig vom Ranking zählt.

Plattformspezifische Tipps

WordPress

• Nutzen Sie ein Caching-Plugin oder Caching auf Hosting-Ebene, um die Serverantwortzeit zu senken
• Wählen Sie ein schlankes Theme; schwere Page-Builder bringen oft viel CSS und JavaScript mit
• Prüfen Sie Plugins: Jedes kann Skripte auf allen Seiten einbinden und INP verschlechtern
• Nutzen Sie ein Bildoptimierungs-Plugin, das WebP oder AVIF ausliefert und Breiten- und Höhenattribute ergänzt
• Verzögern oder entfernen Sie Drittanbieter-Skripte, die nicht auf jeder Seite nötig sind

Shopify

• Überprüfen Sie installierte Apps – viele binden Skripte auf allen Seiten ein, auch wenn sie dort nicht genutzt werden
• Nutzen Sie die integrierten responsiven Bildfunktionen des Themes
• Begrenzen Sie die Anzahl von Abschnitten und Slidern auf der Startseite
• Komprimieren und skalieren Sie Bilder vor dem Hochladen

Individuelle und JavaScript-lastige Websites

• Nutzen Sie serverseitiges Rendering oder statische Generierung, damit Inhalte ohne Warten auf JavaScript erscheinen
• Splitten Sie Code nach Routen und laden Sie Komponenten bei Bedarf
• Messen Sie den INP echter Nutzer mit der JavaScript-Bibliothek web-vitals und senden Sie ihn an Ihre Webanalyse, um langsame Interaktionen zu erkennen

Echte Nutzerdaten selbst messen

Search Console und PageSpeed Insights zeigen aggregierte Chrome-Daten – aber nur für Seiten mit genug Traffic und mit Verzögerung. Um Core Web Vitals für jede Seite und jeden Besucher zu sehen, ergänzen Sie Real User Monitoring (RUM). Die Open-Source-Bibliothek web-vitals meldet LCP, INP und CLS aus den Browsern der Besucher; die Werte können Sie an Google Analytics 4 oder ein anderes Analysetool senden. RUM erfasst außerdem, welches Element der LCP war und welche Interaktion am langsamsten – genau das, was Sie zur Behebung brauchen.

Ein Hinweis zu Total Blocking Time und Speed Index

Lighthouse meldet neben den Core Web Vitals weitere Metriken. Total Blocking Time (TBT) misst, wie lange der Main Thread beim Laden blockiert war, und korreliert mit INP. First Contentful Paint (FCP) markiert, wann überhaupt erstmals etwas erscheint. Speed Index misst, wie schnell sich der sichtbare Bereich füllt. Das sind nützliche Diagnosewerte, aber keine Core Web Vitals.

Verbreitete Mythen

• „Für Rankings braucht man 100 Punkte in PageSpeed.“ Nein. Für die Page Experience zählt das Bestehen der Core-Web-Vitals-Grenzwerte in den Felddaten, und Relevanz zählt weit mehr.
• „Core Web Vitals sind nur für Google wichtig.“ Schnellere, stabilere Seiten verbessern Conversions und Zufriedenheit bei jedem Besucher, egal woher er kommt.
• „Mehr Caching-Plugins helfen.“ Mehrere Caching- oder Optimierungs-Plugins übereinander verursachen oft Konflikte. Nutzen Sie eine gut konfigurierte Lösung.

Das Wichtigste in Kürze

• Core Web Vitals messen Laden (LCP), Reaktionsfähigkeit (INP) und visuelle Stabilität (CLS).
• Gute Grenzwerte sind LCP ≤ 2,5 s, INP ≤ 200 ms und CLS ≤ 0,1 beim 75. Perzentil echter Besuche.
• Entscheidend sind Felddaten echter Chrome-Nutzer; Labortests dienen der Diagnose.
• LCP verbessert sich meist durch schnellere Server und besser optimierte Hero-Bilder.
• INP verbessert sich, wenn Sie JavaScript reduzieren und aufteilen, besonders Drittanbieter-Skripte.
• CLS verbessert sich, wenn Sie Platz für Bilder, Anzeigen und Embeds reservieren.

Häufige Fragen

Warum unterscheiden sich meine Labor- und Feldwerte?

Labortests simulieren ein Gerät und ein Netzwerk. Felddaten spiegeln die Geräte, Netzwerke und das Verhalten Ihrer echten Besucher wider – einschließlich Interaktionen, die Labortests nicht ausführen.

Wie lange dauert es, bis Verbesserungen in der Search Console sichtbar werden?

Felddaten umfassen die letzten 28 Tage, daher dauert es bis zu vier Wochen, bis eine Korrektur vollständig abgebildet ist.

Spielen Core Web Vitals auf dem Desktop eine Rolle?

Ja. Google bewertet Mobilgeräte und Desktop getrennt. Mobil ist es meist schwerer zu bestehen, weil Geräte und Netzwerke langsamer sind.

Was ist ein guter PageSpeed-Wert?

90 oder mehr ist gut. Der Wert ist aber eine Laborzusammenfassung; für die Page Experience zählt das Bestehen der Core Web Vitals in den Felddaten.