Core Web Vitals verständlich erklärt: LCP, INP und CLS – und wie Sie sie verbessern

Wenn eine Webseite langsam lädt oder beim Scrollen springt, merken Besucher das sofort – und Google auch. Mit den Core Web Vitals hat Google drei Kennzahlen definiert, die genau diese Nutzererfahrung messen. Sie sind ein Rankingfaktor, vor allem aber ein guter Indikator dafür, ob Ihre Seite Besucher hält oder vertreibt.

Die drei Kennzahlen

LCP – Largest Contentful Paint

Misst, wann das größte sichtbare Element im ersten Bildschirmbereich geladen ist – meist das Hero-Bild oder die Hauptüberschrift. Gut sind Werte bis 2,5 Sekunden. Ein hoher LCP entsteht durch zu große Bilder, langsame Server, render-blockierende Skripte oder Schriften, die erst spät geladen werden.

INP – Interaction to Next Paint

Misst, wie schnell die Seite auf Eingaben reagiert – Klicks, Tippen, Tastatureingaben – über den gesamten Besuch hinweg. INP hat im März 2024 den früheren Wert FID abgelöst und ist deutlich strenger. Gut sind Werte bis 200 Millisekunden. Ursachen für schlechte Werte sind vor allem zu viel JavaScript: Tracking-Skripte, Chat-Widgets, Slider-Bibliotheken und Plugins, die den Browser blockieren.

CLS – Cumulative Layout Shift

Misst, wie stark sich Inhalte während des Ladens verschieben – etwa wenn ein nachgeladenes Bild oder Banner den Text nach unten drückt. Gut sind Werte bis 0,1. Typische Ursachen sind Bilder ohne festgelegte Größe, nachträglich eingeblendete Cookie-Banner und Werbeflächen sowie Web-Schriften, die die Textbreite verändern.

Labordaten und Felddaten

Tools wie PageSpeed Insights zeigen zwei Arten von Werten: Felddaten aus dem Chrome User Experience Report – also echte Messungen Ihrer Besucher der letzten 28 Tage – und Labordaten aus einer simulierten Messung. Für das Ranking zählen die Felddaten. Kleine Seiten mit wenig Traffic haben oft keine Felddaten; dann sind Labordaten und die Search Console Ihre Orientierung.

Maßnahmen, die wirklich wirken

1. Bilder optimieren: Moderne Formate (WebP, AVIF), passende Größen für jedes Gerät, Lazy Loading für alles unterhalb des sichtbaren Bereichs – aber nicht für das Hero-Bild.
2. Schriften lokal hosten und vorladen: Nur die benötigten Schnitte, mit font-display: swap und passenden Fallback-Metriken, um Layoutsprünge zu vermeiden.
3. JavaScript reduzieren: Jedes Plugin, jedes Tracking-Skript kostet. Unnötige Skripte entfernen, den Rest verzögert laden, Tag-Manager aufräumen.
4. Caching und Hosting: Server-Caching, ein Content Delivery Network und PHP-Version auf aktuellem Stand. Ein günstiges Shared Hosting ist häufig der eigentliche Engpass.
5. Platz reservieren: Breite und Höhe für Bilder, Videos und Einbettungen festlegen, Cookie-Banner nicht den Inhalt verschieben lassen.
6. Schlankes Theme: Überladene Themes und Page-Builder-Ballast sind bei WordPress die häufigste Ursache schlechter Werte. Ein individuell aufgebautes Theme ohne unnötige Funktionen ist meist schneller als jede Optimierung im Nachhinein.

Wie Sie vorgehen

Messen Sie zuerst: PageSpeed Insights für einzelne Seiten, die Search Console für die gesamte Webseite. Priorisieren Sie nach Wirkung – meist bringen Bilder, Hosting und JavaScript die größten Sprünge. Messen Sie danach erneut und dokumentieren Sie die Verbesserung. Und behalten Sie die Werte im Blick: Jedes neue Plugin und jedes neue Tracking-Skript kann sie wieder verschlechtern.