Core Web Vitals sind eine Reihe spezifischer Metriken, mit denen Google die Nutzererfahrung von Webseiten bewertet. Seit 2021 sind sie ein direkter Rankingfaktor in der Google-Suche. Sie zu verstehen und zu verbessern ist sowohl für die Performance als auch für SEO unerlässlich.

Die drei Core Web Vitals

Largest Contentful Paint (LCP)

LCP misst die Ladeleistung — genauer gesagt, wann das größte sichtbare Inhaltselement im Viewport fertig gerendert wurde. Google bewertet LCP als gut, wenn er innerhalb von 2,5 Sekunden nach dem Seitenaufruf erreicht wird.

Typische LCP-Elemente:

Hero-Bilder
Große Textblöcke (H1-Überschriften ohne Bild darüber)
Hintergrundbilder mit überlagerten Inhalten

So verbessern Sie LCP:

Hero-Bilder optimieren und komprimieren (WebP/AVIF-Format verwenden)
Ein Content Delivery Network (CDN) einsetzen
Kritische Ressourcen mit <link rel="preload"> vorladen
Render-blockierendes JavaScript und CSS entfernen
Server-seitiges Rendering oder statische Generierung implementieren

Cumulative Layout Shift (CLS)

CLS misst die visuelle Stabilität — wie stark sich das Seitenlayout während des Ladevorgangs unerwarteterweise verschiebt. Ein guter CLS-Wert liegt bei 0,1 oder weniger.

Häufige Ursachen für Layout-Verschiebungen:

Bilder ohne explizite Breiten- und Höhenangaben
Werbeanzeigen, Einbettungen oder iFrames ohne reservierten Platz
Dynamisch eingefügte Inhalte oberhalb bestehender Elemente
Web-Schriftarten, die FOIT (Flash of Invisible Text) oder FOUT verursachen

So verbessern Sie CLS:

Für Bilder und Video-Elemente immer width und height setzen
Platz für Werbeanzeigen und dynamische Inhalte reservieren
font-display: optional für Web-Schriftarten verwenden
Keine Inhalte oberhalb bestehender Elemente einfügen, außer durch Benutzerinteraktion ausgelöst

Interaction to Next Paint (INP)

INP ersetzte im März 2024 First Input Delay (FID) als Core Web Vital. Es misst die Interaktivität — die Latenz aller Benutzerinteraktionen (Klicks, Taps, Tastatureingaben) während des gesamten Seitenlebenszyklus. Ein guter INP-Wert liegt bei 200 ms oder weniger.

So verbessern Sie INP:

Lange Aufgaben aufteilen (Aufgaben, die mehr als 50 ms im Haupt-Thread beanspruchen)
Nicht notwendiges JavaScript verzögert laden
Web Worker für rechenintensive Operationen einsetzen
Event-Handler so optimieren, dass sie schnell abschließen
Auswirkungen von Drittanbieter-Skripten minimieren

Core Web Vitals messen

Felddaten vs. Labordaten

Felddaten (Real User Monitoring) stammen von echten Nutzern über den Chrome User Experience Report (CrUX). Diese Daten verwendet Google für das Ranking. Zugriff über Google Search Console → Core Web Vitals-Bericht.

Labordaten stammen aus kontrollierten Tests wie Lighthouse, PageSpeed Insights oder Krokanti Audit. Labordaten eignen sich gut zur Fehlersuche, können aber von den Felddaten abweichen.

Werkzeuge

Krokanti Audit: Vollständigen Audit durchführen und alle drei CWVs mit Bestanden/Nicht-Bestanden-Bewertungen und konkreten Empfehlungen einsehen
Google PageSpeed Insights: Zeigt sowohl Labor- als auch Felddaten an
Chrome DevTools: Performance-Tab für detailliertes Profiling
Web Vitals Chrome-Erweiterung: Echtzeit-Überlagerung beim Surfen

Die geschäftlichen Auswirkungen

Forschungsergebnisse zeigen konsistent, dass die Verbesserung der Core Web Vitals zu messbaren Geschäftsergebnissen führt:

Jede Verbesserung von 100 ms bei LCP korreliert mit einem ~1 % Anstieg der Konversionsrate (Google/Deloitte)
Seiten mit gutem CLS verzeichneten 24 % weniger Sitzungsabbrüche (Google)
Die Verbesserung des INP kann die Absprungrate je nach Branche um 8–20 % senken

Eine praktische Checkliste

Überprüfen Sie vor Ihrem nächsten Deployment:

Alle Bilder haben explizite width- und height-Attribute
Hero-Bilder werden vorgeladen und in modernen Formaten ausgeliefert
Keine render-blockierenden Skripte im <head> ohne defer oder async
Web-Schriftarten verwenden font-display: swap oder optional
Keine unerwarteten Layout-Verschiebungen beim Scrollen oder Interagieren
Alle Klick- und Tap-Handler antworten in unter 200 ms

Führen Sie einen kostenlosen Audit Ihrer Website mit Krokanti Audit durch, um Ihre genauen Core Web Vitals-Werte zu sehen und spezifische, auf Ihre Website zugeschnittene Empfehlungen zu erhalten.