Was sind Core Web Vitals und warum sind sie wichtig?
Core Web Vitals (CWV) sind drei Metriken, die Google zur Bewertung der Nutzererfahrung einer Website verwendet. Seit dem Page Experience Update 2021 fließen sie direkt in das Google-Ranking ein. Websites mit schlechten CWV-Werten verlieren Sichtbarkeit – unabhängig von der Content-Qualität.
| Metrik | Was sie misst | Gut | Verbesserungsbedarf | Schlecht |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Ladezeit des größten sichtbaren Elements | < 2,5s | 2,5s – 4s | > 4s |
| CLS (Cumulative Layout Shift) | Unerwartete Layoutverschiebungen | < 0,1 | 0,1 – 0,25 | > 0,25 |
| INP (Interaction to Next Paint) | Reaktionszeit auf Nutzerinteraktionen | < 200ms | 200ms – 500ms | > 500ms |
INP hat FID (First Input Delay) im März 2024 ersetzt. INP misst alle Interaktionen während einer Sitzung, nicht nur die erste – es ist damit deutlich strenger.
LCP verbessern: Die 4 wichtigsten Maßnahmen
1. Hero-Image als AVIF/WebP ausliefern
Das LCP-Element ist meist das Hero-Bild oder die H1-Überschrift. Bei Bildern: Konvertieren Sie PNG/JPG zu AVIF (60-80% kleiner) und WebP (30-50% kleiner). Nutzen Sie `<picture>`-Elemente für progressive Auslieferung.
In Next.js: Nutzen Sie die `<Image>`-Komponente mit `priority` für das LCP-Element. Sie optimiert automatisch Format, Größe und Lazy Loading.
2. Preload für kritische Ressourcen
Fügen Sie `<link rel="preload">` für das LCP-Bild und kritische Fonts im `<head>` hinzu. Der Browser lädt diese Ressourcen sofort, ohne auf das HTML-Parsing zu warten.
3. Server Response Time (TTFB) reduzieren
Ein langsamer Server verzögert alles. Ziel: TTFB unter 800ms. Maßnahmen: CDN nutzen (Cloudflare, Vercel Edge), Server-Caching aktivieren, Datenbankabfragen optimieren.
4. Render-Blocking Resources eliminieren
CSS und JavaScript im `<head>` blockieren das Rendering. Lösung: Kritisches CSS inline einbetten, nicht-kritisches CSS mit `media="print"` laden, JavaScript mit `defer` oder `async` ausführen.
CLS verbessern: Layout-Verschiebungen stoppen
- ▸Immer width und height für Bilder und Videos angeben – verhindert Platzhalter-Sprünge
- ▸Werbebanner und Embeds mit fester Höhe reservieren (aspect-ratio CSS)
- ▸Webfonts mit font-display: swap und Preload stabilisieren
- ▸Dynamisch eingefügte Inhalte (Banners, Cookie-Hinweise) am unteren Bildschirmrand platzieren
- ▸Animationen nur mit transform und opacity – nie mit top/left/width/height
INP verbessern: Interaktivität optimieren
INP misst, wie schnell die Seite auf Klicks, Taps und Tastatureingaben reagiert. Häufige Ursachen für schlechte INP-Werte:
- ▸Zu viel JavaScript im Main Thread (Long Tasks > 50ms)
- ▸Schwere Event-Handler ohne Debouncing
- ▸Drittanbieter-Scripts (Chat-Widgets, Analytics) blockieren den Main Thread
- ▸React/Next.js: Unnötige Re-Renders durch fehlende Memoization
Nutzen Sie den Chrome DevTools Performance-Tab, um Long Tasks zu identifizieren. Alles über 50ms im Main Thread ist ein INP-Risiko.
Core Web Vitals messen: Die richtigen Tools
| Tool | Typ | Stärke |
|---|---|---|
| PageSpeed Insights | Lab + Field Data | Schnellste Übersicht, Google-Daten |
| Chrome DevTools (Lighthouse) | Lab Data | Detaillierte Diagnose lokal |
| Google Search Console | Field Data (real) | Echte Nutzerdaten aus Chrome |
| WebPageTest | Lab Data | Tiefste Analyse, Wasserfall-Diagramm |
| Vercel Analytics | Field Data | Ideal für Next.js-Projekte |
Lab Data (PageSpeed Insights, Lighthouse) und Field Data (Search Console) können stark abweichen. Field Data zeigt echte Nutzererfahrungen – das ist, was Google für das Ranking nutzt.
Unser Fazit
Core Web Vitals sind kein einmaliges Projekt, sondern kontinuierliche Pflege. Die größten Hebel: Bildoptimierung (AVIF/WebP), Preloading kritischer Ressourcen und JavaScript-Reduktion. Mit Next.js und Vercel erreichen die meisten Projekte grüne CWV-Werte ohne großen Aufwand – die Plattform optimiert vieles automatisch.