Was sind Core Web Vitals?
Core Web Vitals sind Googles Metriken für die Nutzererfahrung auf Websites. Sie messen drei Aspekte: Ladegeschwindigkeit, Interaktivität und visuelle Stabilität. Seit 2021 sind sie ein offizieller Ranking-Faktor – schlechte Werte können Ihre Position in den Suchergebnissen beeinflussen.
Die drei Metriken im Detail
LCP – Largest Contentful Paint
Was es misst: Wie schnell lädt das größte sichtbare Element (meist ein Bild oder Textblock)?
Zielwert: Unter 2,5 Sekunden
Typische Probleme:
- Langsame Server-Antwortzeiten
- Render-blockierende Ressourcen (CSS, JavaScript)
- Große, unkomprimierte Bilder
- Fehlende Priorisierung wichtiger Ressourcen
INP – Interaction to Next Paint
Was es misst: Wie schnell reagiert die Seite auf Nutzerinteraktionen (Klicks, Tippen, Tastatureingaben)?
Zielwert: Unter 200 Millisekunden
Typische Probleme:
- Lange JavaScript-Ausführungszeiten
- Zu viel JavaScript im Main Thread
- Event Handler, die den Thread blockieren
- Third-Party-Scripts, die die Interaktivität beeinträchtigen
CLS – Cumulative Layout Shift
Was es misst: Wie stark verschieben sich Elemente während des Ladens?
Zielwert: Unter 0,1
Typische Probleme:
- Bilder ohne definierte Größe
- Dynamisch eingefügte Inhalte (Ads, Embeds)
- Web Fonts, die Layout-Shifts verursachen
- Inhalte, die oberhalb des Viewports eingefügt werden
Praktische Optimierungen
1. Bilder richtig laden
Das größte Potenzial liegt oft bei Bildern. Nutzen Sie moderne Formate und optimierte Ladestrategien:
// Next.js Image Component
import Image from 'next/image';
<Image
src="/hero.jpg"
width={1200}
height={600}
priority // Für Above-the-fold-Bilder
placeholder="blur" // Verhindert CLS
/>Checkliste für Bilder:
- WebP oder AVIF statt JPEG/PNG
- Responsive srcset für verschiedene Bildschirmgrößen
- Lazy Loading für Bilder unterhalb des Viewports
- Immer width und height angeben (verhindert CLS)
- priority-Attribut für Hero-Bilder
2. JavaScript optimieren
JavaScript ist oft der größte Performance-Killer. Reduzieren Sie die Bundle-Größe und verzögern Sie nicht-kritische Scripts:
// Dynamischer Import für Code-Splitting
const HeavyComponent = dynamic(
() => import('./HeavyComponent'),
{ ssr: false, loading: () => <Skeleton /> }
);
// Third-Party-Scripts verzögern
<Script
src="https://analytics.example.com"
strategy="lazyOnload"
/>Checkliste für JavaScript:
- Analysieren Sie Ihr Bundle mit webpack-bundle-analyzer
- Code-Splitting: Laden Sie nur, was gebraucht wird
- Tree Shaking: Entfernen Sie ungenutzten Code
- Verzögern Sie Third-Party-Scripts (Analytics, Chat-Widgets)
- Vermeiden Sie lange Tasks im Main Thread (> 50ms)
3. Fonts optimieren
Web Fonts verursachen oft Layout-Shifts und blockieren das Rendering:
/* Font-Display für schnelleres Rendering */
@font-face {
font-family: 'Custom Font';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* oder optional */
}Checkliste für Fonts:
- Nur WOFF2 verwenden
- font-display: swap oder optional
- Fonts preloaden für kritische Texte
- Systemfonts als Fallback definieren
- Anzahl der Font-Varianten minimieren
4. Server-Antwortzeit verbessern
Ein langsamer Server macht alle anderen Optimierungen zunichte:
Checkliste für Server:
- CDN für statische Assets nutzen
- Caching-Header korrekt setzen
- Datenbank-Queries optimieren
- Edge Functions für dynamische Inhalte
- Komprimierung aktivieren (Brotli > Gzip)
Tools zur Messung
Lighthouse (Chrome DevTools)
Schnelle Analyse einzelner Seiten. Zeigt konkrete Verbesserungsvorschläge.
PageSpeed Insights
Kombiniert Lab-Daten (Lighthouse) mit echten Nutzerdaten (Chrome UX Report).
Web Vitals Extension
Browser-Extension, die Core Web Vitals in Echtzeit anzeigt.
Search Console
Zeigt, wie Google Ihre Core Web Vitals über die gesamte Website bewertet. Wichtig für die Priorisierung.
Priorisierung: Wo anfangen?
1. Messen Sie zuerst: Nutzen Sie Search Console für einen Überblick
2. Fokussieren Sie auf die wichtigsten Seiten: Homepage, Landingpages, Produktseiten
3. Beheben Sie die größten Probleme zuerst: Meist sind es Bilder oder JavaScript
4. Testen Sie auf echten Geräten: Lighthouse simuliert Mid-Range-Geräte, echte Nutzer haben oft schlechtere Verbindungen
Fazit
Core Web Vitals sind kein Hexenwerk. Die meisten Probleme lassen sich mit bewährten Best Practices lösen: Bilder optimieren, JavaScript reduzieren, Layout-Shifts vermeiden. Der Aufwand lohnt sich – nicht nur für SEO, sondern für eine bessere Nutzererfahrung.