Seit 2021 sind Core Web Vitals ein offizieller Google-Rankingfaktor. Trotzdem bestehen laut Google nur 39% aller Websites den Core Web Vitals Assessment. Das bedeutet: 61% aller Websites haben einen messbaren Nachteil im Ranking — und die meisten Betreiber wissen es nicht einmal. In diesem Guide erklären wir jede Metrik im Detail, zeigen Ihnen wie Sie sie messen und geben konkrete Optimierungsstrategien mit Code-Beispielen.
Die drei Core Web Vitals im Detail
| Metrik | Was sie misst | Guter Wert | Schlechter Wert | Typische Ursache |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Ladezeit des größten sichtbaren Elements | < 2,5 Sekunden | > 4 Sekunden | Große Bilder, langsamer Server, render-blocking CSS/JS |
| FID (First Input Delay) / INP | Reaktionszeit auf erste Nutzer-Interaktion | < 100ms / < 200ms | > 300ms / > 500ms | JavaScript-Main-Thread-Blocking, große Bundle-Size |
| CLS (Cumulative Layout Shift) | Visuelle Stabilität (springende Elemente) | < 0,1 | > 0,25 | Bilder ohne Dimensionen, nachladende Fonts, dynamische Inhalte |
LCP optimieren: Die 5 wichtigsten Maßnahmen
- 01Server-Antwortzeit (TTFB) unter 200ms — Edge-Hosting (Vercel, Cloudflare) statt Shared Hosting
- 02Hero-Bild mit priority-Attribut und korrekten sizes laden — kein Lazy Loading für Above-the-Fold-Inhalte
- 03Kritisches CSS inline rendern — Next.js macht das automatisch mit dem App Router
- 04Fonts mit font-display: swap laden und lokal hosten — verhindert FOIT (Flash of Invisible Text)
- 05Bilder als WebP/AVIF mit automatischer Größenanpassung — Next.js Image-Komponente erledigt das
// Hero-Bild mit Priority — wird sofort geladen
<Image
src="/hero.jpg"
alt="Hero-Bild"
width={1200}
height={600}
priority // Kein Lazy Loading für LCP-Element!
sizes="100vw"
/>CLS vermeiden: Warum Bilder immer Dimensionen brauchen
Der häufigste CLS-Verursacher: Bilder ohne width und height. Wenn der Browser nicht weiß, wie groß ein Bild wird, reserviert er keinen Platz — und wenn das Bild dann lädt, springt der gesamte Content nach unten. Die Lösung ist trivial: Immer width und height angeben. Bei Next.js Image ist das Pflicht — ein cleverer Framework-Zwang, der CLS-Probleme von vornherein verhindert.
Vorher-Nachher: Reales Projekt
| Metrik | Vorher (WordPress) | Nachher (Next.js) | Veränderung |
|---|---|---|---|
| LCP | 4,1 Sekunden | 0,9 Sekunden | –78% |
| FID | 220ms | 8ms | –96% |
| CLS | 0,32 | 0,01 | –97% |
| Lighthouse Performance | 38 | 98 | +158% |
| Google Ranking (Haupt-Keyword) | Seite 2, Platz 14 | Seite 1, Platz 3 | +11 Positionen |
Tools zum Messen
- 01Google PageSpeed Insights — Lab-Daten + Feld-Daten aus dem Chrome UX Report
- 02Google Search Console → Core Web Vitals Report — zeigt Probleme auf URL-Ebene
- 03Lighthouse (Chrome DevTools) — detaillierte Diagnose mit Optimierungsvorschlägen
- 04Web Vitals Extension (Chrome) — Real-Time CWV-Overlay beim Browsen
- 05WebPageTest.org — Wasserfall-Analyse und filmstrip-Vergleich von verschiedenen Standorten
Warum Core Web Vitals mehr als ein Rankingfaktor sind
Core Web Vitals messen die User Experience — und die beeinflusst nicht nur das Ranking, sondern direkt Ihre Conversion Rate. Studien zeigen: Eine Verbesserung des LCP um 100ms steigert die Conversion Rate um 1,1%. Ein CLS unter 0,1 reduziert die Bounce Rate um 24%. Eine Seite, die in unter 2 Sekunden lädt, hat 3x höhere Engagement-Raten als eine, die 5 Sekunden braucht. Performance ist kein technisches Detail — es ist ein Business-KPI.
Wir optimieren jede Website auf Lighthouse 90+. Wenn Ihre Website langsam ist, lassen Sie uns reden — die Performance-Analyse ist kostenlos.
