Was sind Core Web Vitals?

Die Core Web Vitals (CWV) sind ein Satz von drei spezifischen Metriken, die von Google definiert wurden, um die tatsächliche Nutzererfahrung (Real User Monitoring) auf Webseiten zu bewerten. Sie wurden im Juni 2021 als offizieller Ranking-Faktor im Rahmen des Page Experience Updates eingeführt.

Die drei aktuellen Metriken (2025) sind:

• LCP (Largest Contentful Paint): Misst die wahrgenommene Ladegeschwindigkeit. Gut: < 2.5s
• INP (Interaction to Next Paint): Misst die Reaktionsfähigkeit auf Interaktionen. Gut: < 200ms (ersetzte FID im März 2024)
• CLS (Cumulative Layout Shift): Misst die visuelle Stabilität. Gut: < 0.1

Google veröffentlicht die tatsächlichen CWV-Daten in der Google Search Console und im Chrome User Experience Report (CrUX), basierend auf echten Nutzerbesuchen.

CWV werden automatisch in Chrome-Browsern gemessen, wenn Nutzer eine Seite besuchen. Google sammelt diese Daten anonym und verwendet sie als Ranking-Signal.

Eine Seite wird als "bestanden" oder "nicht bestanden" bewertet, basierend darauf, ob das 75. Perzentil der Besuche die "guten" Schwellenwerte erfüllt:

• LCP: Wird ausgelöst, wenn das größte sichtbare Element (Hero-Bild, Haupttextblock) gerendert ist. Beeinflusst durch: Servergeschwindigkeit, CDN, falsches Lazy-Loading, blockierende Schriftarten.
• INP: Misst die schlechteste Verzögerung zwischen Interaktion (Klick, Tap, Tastatur) und visueller Antwort, unter Berücksichtigung ALLER Interaktionen auf der Seite. Beeinflusst durch: schweres JavaScript, Long Tasks, blockierter Main Thread.
• CLS: Berechnet, wie stark sich Elemente während des Ladens unerwartet verschieben. Beeinflusst durch: Bilder ohne Dimensionen, dynamisch eingefügte Anzeigen, Webfonts ohne Preload.

Konkrete Optimierungen zur Verbesserung jeder Metrik:

• LCP < 2.5s: Preload des LCP-Ressource, Bilder in WebP/AVIF, CDN, Serverantwort < 600ms, Entfernen von render-blockierenden Ressourcen.
• INP < 200ms: JavaScript in kleine Chunks unterteilen, Web Workers verwenden, schwere Third-Party-Skripte vermeiden, Debounce/Throttle bei Event Handlern.
• CLS < 0.1: width/height bei Bildern und Videos definieren, Platz für Ads reservieren, font-display: swap mit Preload verwenden, dynamisches Einfügen von Inhalten Above the Fold vermeiden.
• Kontinuierliches Monitoring: Implementieren Sie Real User Monitoring (web-vitals JS library), um Ihre eigenen Daten zu erhalten.
• Priorisierung Above the Fold: Kritische Ressourcen (Schriftarten, kritisches CSS, Hero-Bild) müssen zuerst geladen werden.
• HTTP/3 und Brotli: Verwenden Sie moderne Protokolle und effektive Komprimierung.
• Selektives Lazy-Load: Nur Bilder Below the Fold lazy-loaden, niemals das LCP-Bild.

Ein E-Commerce mit CWV unter dem Schwellenwert: LCP 4.8s, INP 280ms, CLS 0.28. Optimierungsplan:

1. LCP: Preload des Hero-Bildes + Migration zu WebP + CDN → LCP sinkt auf 1.9s
2. INP: Refactoring von JS, Aufteilung in Chunks, Entfernung unnötiger Bibliotheken → INP sinkt auf 150ms
3. CLS: Definition von Dimensionen bei allen Bildern, Platzreservierung für Banner → CLS sinkt auf 0.05

Ergebnis nach 2 Monaten: Alle 3 CWV im "guten" Bereich, 15% Verbesserung des organischen Rankings und 22% Reduzierung der Bounce Rate. Der organische Traffic steigt um 35%.