← PageScore

Core Web Vitals erklärt

Was sind LCP, INP und CLS? Wie beeinflussen Core Web Vitals dein Google-Ranking und wie verbesserst du sie? Alles Wichtige verständlich erklärt.

Was sind Core Web Vitals?

Core Web Vitals sind ein Satz von drei Metriken, die Google als besonders wichtig für die Nutzererfahrung einer Website betrachtet. Seit 2021 fließen sie direkt in das Google-Ranking ein. Sie messen, wie schnell eine Seite lädt, wie reaktionsschnell sie auf Interaktionen reagiert und wie visuell stabil sie während des Ladens ist.

Google verwendet zwei Datenquellen für die Bewertung: Lab Data (synthetische Tests wie Lighthouse) und Field Data (echte Nutzerdaten aus dem Chrome User Experience Report). Für das Ranking zählen die Field Data.

LCP — Largest Contentful Paint

LCP misst, wie lange es dauert, bis das größte sichtbare Element im Viewport gerendert ist. Das ist typischerweise ein Hero-Bild, ein großer Textblock oder ein Video-Poster.

Zielwerte

• Gut: ≤ 2,5 Sekunden
• Verbesserungsbedarf: 2,5 – 4,0 Sekunden
• Schlecht: > 4,0 Sekunden

So verbesserst du LCP

• Server-Response optimieren: TTFB (Time to First Byte) unter 200ms halten. Nutze CDN, Server-Caching und schnelles Hosting.
• Render-Blocking Ressourcen eliminieren: Kritisches CSS inline laden, JavaScript mit defer laden.
• Bilder optimieren: Verwende das richtige Format (WebP/AVIF), korrekte Dimensionen und <link rel="preload"> für das LCP-Bild.
• Prioritäten setzen: Nutze das fetchpriority="high"-Attribut für das LCP-Element.

<!-- LCP-Bild vorrangig laden -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" fetchpriority="high" alt="Hero" width="1200" height="600">

INP — Interaction to Next Paint

INP misst die Reaktionsgeschwindigkeit der Seite auf Nutzerinteraktionen wie Klicks, Taps und Tastatureingaben. Es erfasst die Verzögerung vom Input bis zum nächsten visuellen Update. INP hat im März 2024 den älteren FID (First Input Delay) als Core Web Vital abgelöst.

Zielwerte

• Gut: ≤ 200 Millisekunden
• Verbesserungsbedarf: 200 – 500 Millisekunden
• Schlecht: > 500 Millisekunden

So verbesserst du INP

• Lange Tasks aufteilen: JavaScript-Aufgaben, die länger als 50ms dauern, blockieren den Main Thread. Teile sie mit requestAnimationFrame, setTimeout oder der Scheduler API auf.
• Weniger JavaScript laden: Entferne ungenutzten Code, nutze Code-Splitting und Dynamic Imports.
• Input-Handler optimieren: Event-Handler sollten schnell sein. Aufwendige Berechnungen in Web Worker auslagern.
• Layout Thrashing vermeiden: Lese-Operationen (z.B. offsetHeight) nicht mit Schreib-Operationen (z.B. style.height) mischen.

CLS — Cumulative Layout Shift

CLS misst, wie stark sich Elemente auf der Seite während des Ladens unerwartet verschieben. Jeder hat das erlebt: Du willst auf einen Button klicken, aber plötzlich springt der Inhalt nach unten, weil ein Bild oder eine Werbeanzeige geladen wurde.

Zielwerte

• Gut: ≤ 0,1
• Verbesserungsbedarf: 0,1 – 0,25
• Schlecht: > 0,25

So verbesserst du CLS

• Größenangaben für Medien: Setze immer width und height auf Bildern und Videos. Oder nutze aspect-ratio in CSS.
• Platzhalter für dynamische Inhalte: Reserviere Platz für Werbung, Embeds und dynamisch geladene Inhalte.
• Fonts richtig laden: Nutze font-display: swap zusammen mit size-adjust für die Fallback-Schrift, um den Layout-Shift beim Laden zu minimieren.
• Keine Inhalte oberhalb des Viewports einfügen: Lade keine Banner oder Cookie-Hinweise ein, die den bestehenden Inhalt nach unten schieben. Nutze stattdessen Overlays.

/* Fallback-Font mit size-adjust */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
}

/* Aspect-Ratio für Bilder */
img, video {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

Core Web Vitals und SEO

Core Web Vitals sind Teil der „Page Experience Signals", die Google für das Ranking berücksichtigt. Sie sind kein alleiniger Faktor — relevanter Inhalt wiegt schwerer. Aber bei vergleichbaren Inhalten kann eine bessere Page Experience den entscheidenden Unterschied machen.

Google verwendet das 75. Perzentil der Field Data. Das bedeutet: 75% deiner echten Nutzer müssen die „Gut"-Schwellenwerte erreichen, damit die Metrik als bestanden gilt.

Tools zur Messung

• PageScore: Prüft die Performance deiner Website und zeigt dir die wichtigsten Metriken auf einen Blick.
• Google Search Console: Zeigt Core Web Vitals für deine gesamte Website basierend auf echten Nutzerdaten.
• Chrome DevTools (Lighthouse): Lab-Daten für einzelne Seiten.
• web.dev/measure: Googles offizielles Messtools mit detaillierten Empfehlungen.
• Chrome UX Report (CrUX): Die Rohdaten, die Google für das Ranking verwendet.

Tipp: Lab-Daten eignen sich hervorragend zum Debuggen, aber für das Ranking zählen nur die Field Data. Behalte beides im Auge.