Core Web Vitals (CWV) sind eine Reihe von Metriken, die Google verwendet, um die reale Nutzererfahrung beim Laden einer Webseite zu messen. Seit dem Page Experience Update 2021 sind sie ein bestätigter Rankingfaktor. Sie zu verstehen — und zu verbessern — ist eine der wirkungsvollsten technischen SEO-Maßnahmen.
Die drei Core Web Vitals
LCP — Largest Contentful Paint
Was es misst: Wie lange das größte sichtbare Element auf der Seite zum Laden braucht. Das ist typischerweise ein Hero-Bild, eine große Überschrift oder ein Video-Thumbnail.
Guter Schwellenwert: Unter 2,5 Sekunden
Warum es wichtig ist: LCP ist ein Stellvertreter für wahrgenommene Ladegeschwindigkeit. Wenn der Hauptinhalt 5 Sekunden braucht, um zu erscheinen, erleben Nutzer die Seite als langsam — auch wenn das HTML sofort geladen wurde.
Häufige Ursachen für schlechtes LCP:
- Nicht optimierte Bilder (zu groß, falsches Format, nicht komprimiert)
- Render-blocking JavaScript oder CSS
- Langsame Serverantwortzeiten (TTFB über 0,8 Sekunden)
- Kein CDN für Assets
INP — Interaction to Next Paint
Was es misst: Die Latenz aller Nutzerinteraktionen (Klicks, Taps, Tastatureingaben) während eines Seitenbesuchs. INP ersetzte FID (First Input Delay) im März 2024.
Guter Schwellenwert: Unter 200ms
Warum es wichtig ist: INP erfasst die Reaktionsfähigkeit über den gesamten Besuch, nicht nur beim ersten Laden. Eine Seite, die schnell lädt, aber beim Klick auf ein Menü oder beim Absenden eines Formulars hängt, wird schlecht bewertet.
Häufige Ursachen für schlechtes INP:
- Schwere JavaScript-Ausführung, die den Main Thread blockiert
- Drittanbieter-Skripte (Chat-Widgets, Analytics, Werbetags)
- Nicht optimierte Event-Handler
- Große DOM-Bäume
CLS — Cumulative Layout Shift
Was es misst: Die Gesamtmenge unerwarteter Layout-Bewegungen während der Seitenlebensdauer. Berechnet durch Kombination von Impact-Fraction und Distance-Fraction jeder Verschiebung.
Guter Schwellenwert: Unter 0,1
Warum es wichtig ist: Layout-Verschiebungen verursachen, dass Nutzer das falsche Element anklicken. Spät ladende Werbeanzeigen, die Inhalte nach unten schieben, Bilder ohne angegebene Dimensionen und dynamisch eingefügte Banner sind die häufigsten Verursacher.
Häufige Ursachen für schlechten CLS:
- Bilder ohne
width- undheight-Attribute - Werbeanzeigen oder Einbettungen ohne reservierten Platz
- Web-Fonts, die wechseln und Textumbrüche verursachen (FOUT)
- Dynamisch eingefügter Inhalt über bestehendem Content
Wie Sie Ihre CWV messen
PageSpeed Insights
Gehen Sie zu pagespeed.web.dev. Geben Sie Ihre URL ein. Beachten Sie beide:
- Labordaten (simuliert, von Lighthouse) — nützlich für Entwicklungstests
- Felddaten (echte Nutzerdaten aus dem Chrome UX Report) — was für Rankings wirklich zählt
Konzentrieren Sie sich auf Felddaten. Labordaten können sich von der realen Performance unterscheiden, da sie keine JavaScript-Ausführung in echten Browsern und echten Netzwerkbedingungen berücksichtigen.
Google Search Console
Öffnen Sie Search Console → Nutzererfahrung → Core Web Vitals. Das zeigt aggregierte Echtnutzerdaten für Gruppen ähnlicher Seiten — Ihre genaueste Ansicht der Rankingauswirkung.
Die häufigsten Probleme beheben
Fix 1: LCP-Bild vorladen
Wenn Ihr LCP-Element ein Bild ist, laden Sie es im <head> vor:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
Das weist den Browser an, das Bild so früh wie möglich herunterzuladen, bevor CSS und JavaScript fertig geparst sind.
Fix 2: Bilder in WebP konvertieren
WebP-Bilder sind typischerweise 25–35 % kleiner als JPEG bei vergleichbarer Qualität. Next.js erledigt das automatisch über die <Image>-Komponente mit next/image.
Fix 3: Explizite Dimensionen für alle Bilder setzen
<img src="foto.webp" width="1200" height="630" alt="..." />
Ohne explizite Dimensionen kann der Browser keinen Platz reservieren, bevor das Bild lädt — was CLS verursacht, da es umgebenden Content verschiebt.
Fix 4: Nicht-kritisches JavaScript verzögern
Verschieben Sie Drittanbieter-Skripte (Analytics, Chat, Social Embeds) so, dass sie nach dem Hauptinhalt laden:
<script src="analytics.js" defer></script>
Fix 5: font-display: swap für Web-Fonts verwenden
@font-face {
font-family: 'MeinFont';
src: url('/fonts/mein-font.woff2') format('woff2');
font-display: swap;
}
Das verhindert unsichtbaren Text während des Font-Ladens. Der Kompromiss ist ein kurzes Aufblitzen von ungestyletem Text — für die meisten Seiten akzeptabel.
Priorisierung
Sie brauchen keinen perfekten Score auf jeder Metrik. Fokussieren Sie sich auf:
- Alle drei Metriken in den „Gut"-Bereich für Mobilgeräte bringen (das ist schwieriger als Desktop)
- Seiten priorisieren, die Umsatz oder Leads generieren (Startseite, Leistungsseiten, Landing Pages)
- Felddaten, nicht Labordaten, als Benchmark verwenden
Eine 5-Punkte-Verbesserung des LCP auf Ihrer Startseite bewegt die Nadel mehr als ein perfekter Score auf einem obskuren Blogbeitrag.
— KOSTENLOSER SEO-CHECK
Ihre Website hat mehr SEO-Potenzial als Sie denken.
Kostenloses 20-Min-Gespräch — wir schauen uns Ihre Rankings live an und zeigen Ihnen genau, wo der Traffic versteckt ist. Kein Pitch, keine Agenturfloskeln.
