Seit Google Core Web Vitals als Ranking-Faktor eingeführt hat, stellen sich viele Website-Betreiber die gleiche Frage: Was genau messe ich da eigentlich — und warum ist meine Seite "schlecht", obwohl sie sich doch ganz normal anfühlt?
In diesem Artikel erklären wir alle drei Metriken, zeigen reale Schwellenwerte und geben praktische Tipps zur Verbesserung.
Was sind Core Web Vitals?
Core Web Vitals sind drei Metriken, mit denen Google die Nutzererfahrung auf Websites misst. Sie wurden 2020 vorgestellt und sind seit 2021 ein offizieller Ranking-Faktor.
Das Ziel: Google möchte nicht nur die relevanteste, sondern auch die nutzerfreundlichste Website belohnen. Gute Werte verbessern Ihr SEO-Ranking messbar.
Die drei Metriken messen:
- LCP (Largest Contentful Paint) — Wie schnell lädt der wichtigste sichtbare Inhalt?
- INP (Interaction to Next Paint) — Wie schnell reagiert die Seite auf Eingaben?
- CLS (Cumulative Layout Shift) — Springt das Layout während des Ladens?
1. LCP — Largest Contentful Paint
Was wird gemessen?
LCP misst, wie lange es dauert, bis das größte sichtbare Inhaltselement in der oberen Seitenhälfte (above the fold) vollständig geladen ist.
Das ist meist:
- Ein Hero-Bild
- Ein großes Textelement (H1 oder Intro-Text)
- Ein Video-Thumbnail
Schwellenwerte (Stand 2026)
| Bewertung | LCP |
|---|---|
| ✅ Gut | ≤ 2,5 Sekunden |
| ⚠️ Verbesserung nötig | 2,5 – 4,0 Sekunden |
| ❌ Schlecht | > 4,0 Sekunden |
Google misst am 75. Perzentil — also 75 % Ihrer Nutzer müssen diesen Wert erreichen.
Häufige LCP-Probleme
Langsamer Server: Wenn Ihr Hosting antwortet wie ein Beamter vor der Rente, leidet der LCP. Lösung: Hosting-Upgrade, CDN (Content Delivery Network), Server-Caching.
Hero-Bild nicht priorisiert: In Next.js muss das LCP-Bild das priority-Attribut haben:
<Image src="/hero.webp" alt="Hero" priority />
Zu große Bilder: Ein 4 MB großes JPEG als Hero ist ein LCP-Killer. Komprimieren, in WebP/AVIF konvertieren.
Render-blocking Resources: JavaScript oder CSS, das das Rendering blockiert. Lösung: CSS in den <head>, JavaScript mit defer oder async laden.
2. INP — Interaction to Next Paint
Was wurde aus FID?
FID ist Geschichte. First Input Delay wurde am 12. September 2024 vollständig abgelöst. Wenn Sie noch FID-Werte sehen, ignorieren Sie diese für aktuelle Bewertungen.
Was misst INP?
INP (Interaction to Next Paint) misst die Reaktionszeit der Seite auf alle Nutzerinteraktionen während des Besuchs: Klicks, Tastatureingaben, Touch-Events.
Es wird der schlechteste Wert aller Interaktionen einer Session herangezogen (in der Praxis: der 98. Perzentil der Interaktionen).
Schwellenwerte
| Bewertung | INP |
|---|---|
| ✅ Gut | ≤ 200ms |
| ⚠️ Verbesserung nötig | 200 – 500ms |
| ❌ Schlecht | > 500ms |
Häufige INP-Probleme
Zu viel JavaScript auf dem Main Thread: Wenn JavaScript Berechnungen blockiert, kann die Seite nicht sofort auf Eingaben reagieren. Lösung: Code-Splitting, Web Workers, schwere Berechnungen auslagern.
Zu viele Event Listener: Hunderte von Event Listenern auf einer Seite verlangsamen Reaktionen. Delegation nutzen.
Unnötige Third-Party Scripts: Analytics, Chat-Widgets, Social Media Embeds — jedes Script belastet den Main Thread. Nur laden, was nötig ist, und mit defer laden.
3. CLS — Cumulative Layout Shift
Was wird gemessen?
CLS misst, wie viel sich das Layout der Seite während des Ladens unerwartet verschiebt. Wer schon einmal auf einen Button klicken wollte, der im letzten Moment nach unten gerutscht ist — das ist CLS in Aktion.
Der Score ist eine Zahl (kein Zeitscore): Er berechnet sich aus Größe und Verschiebungsweite der betroffenen Elemente.
Schwellenwerte
| Bewertung | CLS |
|---|---|
| ✅ Gut | ≤ 0,1 |
| ⚠️ Verbesserung nötig | 0,1 – 0,25 |
| ❌ Schlecht | > 0,25 |
Häufige CLS-Probleme
Bilder ohne Dimensionen: Wenn Bilder keine width und height Attribute haben, weiß der Browser nicht, wie viel Platz er reservieren soll.
// Schlecht — verursacht Layout Shift:
<img src="/bild.jpg" alt="..." />
// Gut — Dimensionen angeben:
<img src="/bild.jpg" alt="..." width={1200} height={630} />
// Next.js Image macht das automatisch:
<Image src="/bild.jpg" alt="..." width={1200} height={630} />
Fonts ohne font-display: swap: Wenn ein Custom Font lädt, wechselt der Browser von System-Font zu Custom Font — das verursacht einen Layout Shift, wenn die Fonts unterschiedliche Zeichenbreiten haben.
Dynamisch geladene Inhalte: Cookie-Banner, Newsletter-Popups, Ads die nachträglich geladen werden und Inhalte nach unten schieben.
Lösungen:
min-heightfür Container reservieren die dynamischen Content laden- Cookie-Banner absolut positionieren, nicht im Textfluss
- Skeleton-Screens nutzen während Content lädt
Core Web Vitals messen — So geht's
Google PageSpeed Insights
pagespeed.web.dev — kostenlos, keine Installation, zeigt Lab- und Felddaten.
Chrome Lighthouse (DevTools)
F12 → Lighthouse → Analyze page load. Schnell für lokale Tests.
Google Search Console
Unter "Nutzererfahrung → Core Web Vitals" sehen Sie aggregierte Felddaten für alle Ihre Seiten. Hier landen auch schlechte Seiten im Bericht.
Web Vitals Chrome Extension
Zeigt LCP, INP und CLS in Echtzeit während Sie surfen.
Core Web Vitals und Ranking — Wie wichtig sind sie wirklich?
Core Web Vitals sind ein Ranking-Faktor, aber kein dominanter. Google hat mehrfach klargestellt:
"Core Web Vitals sind ein Tiebreaker-Signal — bei gleichwertigem Content gewinnt die bessere User Experience."
In der Praxis bedeutet das: Wer guten Content hat und schlechte Core Web Vitals, rankt trotzdem besser als schlechter Content mit perfekten Vitals. Aber wer gleich guten Content hat und bessere Vitals gewinnt.
Für Websites im kompetitiven Umfeld (z.B. "Webdesign Bielefeld") können Core Web Vitals den Unterschied zwischen Platz 3 und Platz 1 ausmachen.
Kurz-Zusammenfassung
| Metrik | Was sie misst | Zielwert |
|---|---|---|
| LCP | Ladegeschwindigkeit des Hauptinhalts | ≤ 2,5s |
| INP | Reaktionsgeschwindigkeit auf Eingaben | ≤ 200ms |
| CLS | Layout-Stabilität während des Ladens | ≤ 0,1 |
Die häufigsten Quick-Wins:
- Hero-Bild mit
prioritypreloaden - Bilder in WebP konvertieren und Dimensionen angeben
- Schriften mit
font-display: swapladen - Unnötige Third-Party-Scripts entfernen oder lazy loaden