Core Web Vitals verbessern: Ladezeit, Stabilität und Interaktivität optimieren

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die Google verwendet, um die tatsächliche Nutzererfahrung einer Website zu bewerten. Sie messen Ladegeschwindigkeit, visuelle Stabilität und Reaktionsfähigkeit – die drei Dinge, die Besucher am meisten frustrieren, wenn sie nicht stimmen.

• LCP (Largest Contentful Paint) – wie schnell wird das größte sichtbare Element geladen? Ziel: unter 2,5 Sekunden
• INP (Interaction to Next Paint) – wie schnell reagiert die Seite auf Klicks und Eingaben? Ziel: unter 200 ms
• CLS (Cumulative Layout Shift) – wie stabil bleibt das Layout beim Laden? Ziel: unter 0,1

LCP verbessern: Ladezeit des Hauptinhalts optimieren

Der Largest Contentful Paint misst, wann das größte sichtbare Element (Hero-Bild, Headline, Video) vollständig gerendert ist. Ein langsamer LCP entsteht häufig durch unkomprimierte Bilder, zu viel JavaScript oder langsame Server.

• Bilder in WebP/AVIF ausliefern – spart 30–50 % Dateigröße gegenüber JPEG/PNG
• Hero-Bild preloaden – mit <link rel="preload"> oder fetchpriority="high"
• Nicht benötigtes JavaScript deferren – alles, was below-the-fold ist, erst später laden
• Server-Response-Zeit reduzieren – CDN nutzen, statisches Hosting bevorzugen (z. B. Vercel, Netlify)
• CSS minimieren – ungenutztes CSS entfernen, kritisches CSS inlinen

CLS beheben: Layout-Verschiebungen vermeiden

Cumulative Layout Shift misst, wie stark sich sichtbare Elemente beim Laden verschieben. Typisches Problem: Ein Bild lädt nach und drückt den Text nach unten. Oder eine Schrift wird nachgeladen und ändert Zeilenhöhen.

• Explizite Breite und Höhe für alle Bilder und Videos setzen – der Browser reserviert den Platz vorab
• Font-Display: swap verwenden oder Schriften in der CSS-Datei hosten statt von Google Fonts nachladen
• Keine dynamischen Inhalte über dem Fold einfügen – Banner, Cookie-Hinweise oder Ads verschieben das Layout
• Aspect-Ratio-Boxen nutzen – mit CSS aspect-ratio für Medien-Container

INP verbessern: Interaktivität und Reaktionszeit

Interaction to Next Paint hat 2024 den alten FID-Wert abgelöst. Er misst die gesamte Verzögerung zwischen einem User-Event (Klick, Tap, Tastendruck) und dem nächsten Frame-Update. Ein schlechter INP entsteht durch zu viel JavaScript, das den Main Thread blockiert.

• JavaScript-Bundles verkleinern – Code-Splitting und Lazy Loading für Below-the-fold-Komponenten
• Schwere Berechnungen auslagern – mit requestIdleCallback oder Web Workers
• Third-Party-Scripts minimieren – jedes Analytics-/Chat-/Tracking-Script blockiert den Main Thread
• React-Hydration optimieren – bei SSR/SSG nur interaktive Teile hydrieren

Core Web Vitals messen: Die richtigen Tools

Es gibt zwei Arten von Daten: Lab-Daten (simuliert im Browser) und Field-Daten (echte Nutzer). Google nutzt Field-Daten aus dem Chrome UX Report für das Ranking. Trotzdem sind Lab-Tools unverzichtbar für die Diagnose.

• Google PageSpeed Insights – zeigt Lab- und Field-Daten, konkrete Empfehlungen pro Metrik
• Chrome DevTools → Lighthouse – detaillierte Audit-Ergebnisse direkt im Browser
• Google Search Console → Core Web Vitals – aggregierte Field-Daten Ihrer gesamten Website
• Web Vitals Chrome Extension – Echtzeit-Messung während Sie surfen

Warum Core Web Vitals für Ihr Ranking wichtig sind

Core Web Vitals sind ein bestätigter Google-Rankingfaktor – Teil der „Page Experience Signals". Sie allein machen keine schlechte Seite gut, aber bei zwei inhaltlich gleichwertigen Seiten gewinnt die mit besserer Nutzererfahrung. Für lokale KMU-Websites kann das den Unterschied zwischen Seite 1 und 2 bedeuten.

Darüber hinaus wirken sich gute Vitals direkt auf Conversion-Raten aus: Schnellere Seiten haben nachweislich niedrigere Absprungraten und höhere Formular-Abschlüsse. Performance ist kein technisches Nerd-Thema – sie ist ein Umsatzfaktor.