Seit 2021 verwendet Google Core Web Vitals als direkten Rankingfaktor. Im Jahr 2025, mit dem Update, das FID durch INP ersetzte, sind die Metriken noch anspruchsvoller geworden. Schauen wir uns an, was sie messen, warum sie wichtig sind und wie man sie konkret verbessern kann.
Die drei grundlegenden Metriken
LCP — Largest Contentful Paint
Misst die Zeit, die benötigt wird, bis der größte Inhalt der Seite (normalerweise ein Hero-Bild oder Textblock) sichtbar wird. Ziel: unter 2,5 Sekunden. Unter 4s liegt im Bereich 'verbesserungsbedürftig', darüber ist 'schlecht'.
INP — Interaction to Next Paint
Ersetzte FID im März 2024. Misst die Reaktionsfähigkeit der Website: Wie lange vergeht zwischen einer Benutzerinteraktion (Klick, Tippen, Eingabe) und der visuellen Reaktion der Seite. Ziel: unter 200ms.
CLS — Cumulative Layout Shift
Misst die visuelle Stabilität: wie stark sich Elemente beim Laden der Seite verschieben. Ein hoher CLS bedeutet springende Elemente, verschobener Text, Buttons die ihre Position ändern. Ziel: unter 0,1.
Häufigste Ursachen für hohen LCP
- Nicht optimierte Hero-Bilder (fehlendes fetchpriority='high' und Preload)
- Google-Fonts werden blockierend geladen
- Hoher TTFB durch langsame Server oder fehlende CDN
- Render-blockierendes CSS im <head>
- Bilder in nicht optimiertem Format (JPEG statt WebP/AVIF)
LCP verbessern: konkrete Strategien
Die wirkungsvollste Einzelmaßnahme ist das Hinzufügen von fetchpriority='high' zum Hero-Bild und, wenn möglich, eines <link rel='preload'>-Tags im <head>. Dies teilt dem Browser mit, dem Download dieser Ressource absolute Priorität zu geben.
Zweite Priorität: Fonts selbst hosten statt sie von Google Fonts zu laden. Eine externe Anfrage weniger bedeutet besseren LCP, besonders bei mobilen Verbindungen.
INP verbessern
INP ist oft am schwierigsten zu optimieren, da es davon abhängt, wie viel JavaScript der Browser im Hauptthread ausführt. Die wichtigsten Strategien:
- Drittanbieter-JavaScript reduzieren (Analytics, Chat, Widgets)
- requestIdleCallback für nicht dringende Operationen verwenden
- CSS-Animationen vermeiden, die Layout auslösen (width, height, top, left)
- transform und opacity für Animationen bevorzugen (GPU-beschleunigt)
- Nicht kritische Skripte mit defer oder async laden
CLS verbessern
CLS ist am einfachsten zu beheben. 90% der CLS-Probleme stammen von:
- Bilder ohne width- und height-Attribute — der Browser reserviert keinen Platz
- Webfonts, die FOUT verursachen (Flash of Unstyled Text)
- Drittanbieter-Anzeigen und Widgets ohne feste Abmessungen
- Dynamisch über bestehendem Inhalt eingefügte Elemente
Bei einem kürzlichen Audit einer Kundenwebsite haben wir den CLS von 0,42 auf 0,02 reduziert, indem wir allen Bildern explizite width- und height-Attribute hinzugefügt und font-display: swap für Webfonts verwendet haben.
Tools zum Messen
Google PageSpeed Insights ist der Ausgangspunkt. Aber beachten Sie: Es misst sowohl Lab-Daten (Simulation) als auch echte Daten (CrUX). Für eine korrekte Optimierung sollten Sie beides betrachten. WebPageTest bietet eine detailliertere Analyse. Chrome DevTools Performance Panel ist unverzichtbar für die INP-Diagnose.
Fazit
Core Web Vitals sind nicht nur Ranking-Metriken — sie sind ein Proxy für die reale Benutzererfahrung. Eine schnelle Website konvertiert besser, hat eine niedrigere Absprungrate und bindet Nutzer stärker. Optimierung ist keine einmalige Aktivität: Sie muss im Laufe der Zeit überwacht werden, besonders nach jedem Inhalts- oder Code-Update.