Core Web Vitals

Was sind Core Web Vitals?

Core Web Vitals sind drei Leistungskennzahlen, die Google als besonders wichtig fuer die Nutzererfahrung definiert hat. Sie sind seit 2021 ein offizieller Ranking-Faktor im Google-Algorithmus und Teil des Page-Experience-Signals. Die Metriken messen drei Aspekte: Ladegeschwindigkeit, Interaktivitaet und visuelle Stabilitaet.

Die drei Metriken im Detail

LCP (Largest Contentful Paint)

Misst die Ladezeit des groessten sichtbaren Elements im Viewport (Bild, Video-Poster oder Textblock). Zielwert: unter 2,5 Sekunden. Haeufige Ursachen fuer schlechtes LCP: zu grosse Bilder, langsamer Server, render-blockierendes CSS/JavaScript, langsame Schriftarten-Auslieferung.

INP (Interaction to Next Paint)

Ersetzt seit Maerz 2024 den frueheren FID (First Input Delay). INP misst die Reaktionszeit bei allen Nutzerinteraktionen waehrend des gesamten Seitenbesuchs: Klicks, Taps und Tastatureingaben. Zielwert: unter 200 Millisekunden. Schlechte INP-Werte deuten auf blockierendes JavaScript, zu viele Event-Listener oder aufwaendige DOM-Manipulationen hin.

CLS (Cumulative Layout Shift)

Misst unerwartete Layoutverschiebungen waehrend des Ladevorgangs. Zielwert: unter 0,1. Haeufige Ursachen: Bilder ohne explizite width/height-Angaben, nachladende Werbung oder Embeds, dynamisch eingefuegte Inhalte und Webfonts, die beim Laden Textgroesse aendern (FOUT/FOIT).

Warum sind Core Web Vitals wichtig?

Google nutzt Core Web Vitals als Teil des Page-Experience-Signals. Seiten mit guten Werten erhalten einen Ranking-Vorteil, besonders wenn der Content mit Wettbewerbern vergleichbar ist. Wichtiger noch: Bessere Ladezeiten fuehren zu niedrigeren Absprungraten (minus 24 % pro Sekunde schneller) und hoeheren Conversion-Rates.

Optimierung

• Bilder komprimieren und in modernen Formaten (WebP, AVIF) ausliefern
• width und height Attribute fuer alle Bilder und Embeds angeben (gegen CLS)
• Kritisches CSS inline laden, unkritisches CSS deferred
• JavaScript minimieren, aufteilen (Code Splitting) und asynchron laden
• Server-Response-Zeit unter 200ms halten (CDN, Caching, HTTP/2)
• Schriftarten mit font-display: swap und preload ausliefern
• Third-Party-Scripts minimieren (jedes externe Script ist ein Risiko fuer INP und LCP)

Messung: Lab-Daten vs. Feld-Daten

• Lab-Daten: Lighthouse, PageSpeed Insights (simulierte Messung unter Standardbedingungen)
• Feld-Daten (CrUX): Chrome User Experience Report, echte Nutzerdaten der letzten 28 Tage. Google nutzt Feld-Daten fuer das Ranking.
• Tools: Google PageSpeed Insights, Lighthouse, Chrome DevTools, WebPageTest, Search Console (Core Web Vitals Bericht)