Team Story05.10.25

Core Web Vitals: So misst du Performance richtig

Google bewertet Websites seit 2021 nach Core Web Vitals. Was steckt hinter LCP, CLS und INP — und wie verbessert man diese Metriken gezielt, ohne das Design zu kompromittieren?

LCP, CLS, INP — die drei Kernmetriken erklärt

Seit dem Page Experience Update bewertet Google Websites nicht mehr nur nach Inhalt, sondern auch nach Nutzererfahrung. Core Web Vitals sind dabei das zentrale Messinstrument — drei Kennzahlen, die direkt Einfluss auf das Ranking haben.

LCP (Largest Contentful Paint) misst, wie schnell das größte sichtbare Element lädt. CLS (Cumulative Layout Shift) erfasst unerwartete Verschiebungen im Layout während des Ladevorgangs. INP (Interaction to Next Paint) bewertet die Reaktionsfähigkeit auf Nutzereingaben — seit März 2024 der offizielle Ersatz für FID.

Praktische Verbesserungen: Bilder mit expliziten Dimensionen versehen verhindert CLS. Kritische Ressourcen per Preload laden reduziert LCP. Schwere JavaScript-Bundles splitten und lazy loaden verbessert INP. Mit Tools wie Lighthouse, PageSpeed Insights und dem Chrome User Experience Report lässt sich der Status jederzeit prüfen.

Typische Fehler und wie du sie behebst

Der häufigste LCP-Killer ist das Hero-Bild: Wenn es nicht preloaded wird und der Browser es erst nach dem Parsen des gesamten Stylesheets anfordert, verzögert sich der LCP deutlich. Abhilfe schafft ein explizites Preload-Tag im Head oder — bei modernen Frameworks wie Nuxt — die fetchpriority="high"-Direktive auf dem img-Element.

CLS entsteht oft durch Werbebanner, Schriftarten oder Embeds ohne reservierten Platz. Fonts mit font-display: swap zu laden und für alle Medienelemente Breite und Höhe im HTML zu definieren, löst den Großteil der Layout-Shift-Probleme. INP-Schwächen hängen dagegen meist an langen JavaScript-Tasks, die den Main Thread blockieren — hier helfen Code-Splitting und Web Workers.

Messen, priorisieren, kontinuierlich verbessern

Core Web Vitals sind keine einmalige Optimierungsaufgabe — sie erfordern kontinuierliche Beobachtung. Der Chrome User Experience Report (CrUX) liefert echte Felddaten von echten Nutzern, während Lighthouse synthetische Labordaten produziert. Beide ergänzen sich: Lighthouse zeigt Potenziale, CrUX zeigt die tatsächliche Nutzererfahrung.

Praxistipp: Google Search Console zeigt Core Web Vitals direkt gruppiert nach Seitentyp. So lässt sich schnell erkennen, ob das Problem bei Produktseiten, dem Blog oder der Startseite liegt. Priorisiere die Seiten mit dem meisten Traffic — dort ist der Hebel am größten.