Core Web Vitals —
LCP, CLS und INP
vollständig erklärt
Core Web Vitals sind Googles offizielle Ladezeit-Ranking-Faktoren. Wer alle drei im grünen Bereich hat, rankt besser und verliert weniger Nutzer durch schlechte Performance. Mit Optimierungsplan-Generator für dein konkretes Problem.
Core Web Vitals — Definition und
Bedeutung als Ranking-Faktor
Core Web Vitals messen nicht ob eine Website technisch korrekt gebaut ist — sie messen ob sie sich gut anfühlt. Google hat sie 2020 angekündigt und 2021 als Ranking-Faktor eingeführt weil interne Daten zeigten: Nutzer verlassen langsame, instabile Websites schneller und konvertieren schlechter. Der ROI schneller Websites ist für Google und Website-Betreiber deckungsgleich.
2026 sind Core Web Vitals aus einem weiteren Grund wichtig: KI-Crawler wie die von Perplexity, Googles AI-System und Claude bevorzugen technisch saubere, schnell ladende Websites. Eine Seite die bei Nutzern schlecht performt, wird auch von KI-Systemen seltener gecrawlt und zitiert. Gute Core Web Vitals sind deshalb 2026 gleichzeitig gutes GEO (Generative Engine Optimization).
💡 40-Wort-Antwort: Core Web Vitals sind Googles drei Ladezeit-Ranking-Metriken: LCP (größtes Element geladen, Ziel unter 2,5 Sek.), INP (Reaktionszeit, Ziel unter 200ms) und CLS (visuelle Stabilität, Ziel unter 0,1). Seit 2021 offizieller Ranking-Faktor, seit 2026 auch GEO-relevant.
Offizieller Ranking-Faktor seit Google Page Experience Update Juni 2021
der Websites bestehen NICHT alle drei Core Web Vitals (Stand Nov. 2025)
weniger Conversions pro extra Sekunde Ladezeit auf Mobile
INP ersetzte FID (First Input Delay) als dritten Core Web Vital
LCP, CLS und INP —
alle drei Metriken auf einen Blick
Jede Metrik misst eine andere Dimension der Nutzererfahrung. Alle drei müssen grün sein für den vollen Ranking-Vorteil:
Misst wann das größte sichtbare Element im Viewport geladen ist — meist ein Hero-Bild oder großer Textblock. Aus Nutzersicht: „Wann ist die Seite fertig?“
Misst wie stark sich Seitenelemente während des Ladens unerwartet verschieben. Aus Nutzersicht: „Springt alles herum?“
Misst wie schnell die Seite auf Klicks, Taps und Tastendrücke reagiert. Seit März 2024 ersetzt INP den alten FID. Aus Nutzersicht: „Reagiert die Seite sofort?“
ℹ️ Field Data vs. Lab Data: Google bewertet immer Field Data (echte Nutzerdaten aus Chrome) — nicht Lab Data aus PageSpeed Insights. Field Data sammelt Google über den Chrome User Experience Report (CrUX). Seiten mit zu wenig Traffic haben oft keine Field Data → Google PageSpeed Insights zeigt dann nur Lab Data.
Wie verbessere ich den LCP-Wert
konkret und nachhaltig?
40-Wort-Antwort: LCP verbessern durch: Hero-Bild im WebP-Format komprimieren + preload-Hinweis im Header · Render-blocking CSS/JS mit defer/async laden · Hosting mit niedrigem TTFB (unter 800ms) · CDN für statische Ressourcen · Browser-Caching aktivieren.
LCP-Element identifizieren
Zuerst verstehen welches Element der LCP-Kandidat ist. In Google PageSpeed Insights → „Labordiagnose“ → „Größtes sichtbares Element“. Meist: Hero-Bild, H1-Überschrift oder großes Banner. Das LCP-Element bestimmt welche Maßnahmen am meisten bringen.
LCP-Bild optimieren (größter Hebel bei Bild-LCP)
Format: WebP statt JPG/PNG — 25–35% kleiner bei gleicher Qualität. Komprimierung: Squoosh.app oder TinyPNG (kostenlos). Dimensionen: Bild auf tatsächliche Darstellungsgröße skalieren — kein 4000px breites Bild für ein 800px-Hero. loading=“eager“ für LCP-Bilder: nie lazy loading auf dem LCP-Element.
Preload für LCP-Element
Der Browser soll das LCP-Element so früh wie möglich laden. Im <head> vor allen anderen Skripten einfügen:
Server-Antwortzeit (TTFB) verbessern
Time to First Byte (TTFB) unter 800ms ist Ziel. Langsamer Server = langsamer LCP. Maßnahmen: Caching-Plugin (WP Rocket, LiteSpeed Cache, W3 Total Cache) · Besseres Hosting (Managed WordPress Hosting wie Raidboxes, Kinsta) · CDN (Cloudflare kostenlos) · PHP-Version aktuell halten (PHP 8.2+).
Render-blocking Ressourcen beseitigen
CSS und JavaScript im <head> blockieren das Rendering der Seite. Lösung: unkritisches CSS in <style>-Tags inline laden (Critical CSS) · JavaScript mit defer oder async laden · Third-Party-Scripts (Analytics, Chat) lazy laden · Google Fonts lokal hosten statt von Google-Servern.
Wie verhindere ich springende Elemente
und verbessere den CLS-Wert?
40-Wort-Antwort: CLS verbessern durch: Alle Bilder mit width- und height-Attributen versehen · Werbeplätze mit festen CSS-Dimensionen reservieren · Fonts mit font-display:swap und preload laden · Dynamisch eingefügte Inhalte (Cookie-Banner, Notifications) mit reserviertem Platz · keine Inhalte über bestehende einfügen.
Häufigste CLS-Ursachen
Browser kennt Größe nicht vor dem Laden → Platzhalter falsch → Layout springt
Laden nach dem Text und verschieben alles darunter
Fallback-Font hat andere Größe → Text springt wenn Custom Font geladen ist
Erscheinen nach dem Laden und schieben Content nach unten
CLS-Fixes Schritt für Schritt
<img width=“800″ height=“450″ …> — immer beide Attribute setzen
img { aspect-ratio: 16/9; } verhindert Layout-Shifts bei responsiven Bildern
Sofort Fallback zeigen, dann Custom Font austauschen ohne Sprung
min-height: 250px; für Werbeplätze — Platz ist immer reserviert
Wie verbessere ich den INP-Wert und
mache meine Website reaktiver?
40-Wort-Antwort: INP verbessern durch: JavaScript-Ausführung optimieren (keine Long Tasks über 50ms im Main Thread) · Third-Party-Scripts reduzieren oder lazy laden · Code Splitting für JavaScript-Bundles · Google Tag Manager aufräumen · React/Vue-Apps hydration optimieren.
INP ist der jüngste und technisch anspruchsvollste Core Web Vital. Er misst die gesamte Responsivität einer Seite — nicht nur das erste Klicken (wie sein Vorgänger FID), sondern alle Interaktionen während der gesamten Sitzung. Ein schlechter INP-Wert bedeutet: Klicks reagieren verzögert, Formulare hängen, Menüs öffnen langsam.
🔍 Was verursacht schlechten INP?
✅ INP-Verbesserungsmaßnahmen
ℹ️ INP-Diagnose in der Praxis: Chrome DevTools → Tab „Performance“ → Seite neu laden → in der Timeline nach langen, roten Blöcken suchen (Long Tasks). Diese Blöcke zeigen welche JavaScript-Funktionen den Main Thread blockieren. Alternativ: Web Vitals Chrome Extension direkt im Browser.
Wie messe ich Core Web Vitals —
welche Tools gibt es?
40-Wort-Antwort: Core Web Vitals messen mit Google PageSpeed Insights (einfachste Methode, kostenlos, Field + Lab Data), Google Search Console CWV-Bericht (Field Data für alle Seiten), Chrome DevTools Lighthouse (Lab Data, detailliert) und der Web Vitals Chrome Extension (Real-User-Monitoring live).
Google PageSpeed Insights
Einfachste Methode: URL eingeben → sofort LCP, CLS und INP für Mobile und Desktop. Zeigt Field Data (echte Nutzer) und Lab Data (simuliert) + konkrete Verbesserungsvorschläge.
Google Search Console
CWV-Bericht zeigt Field Data für alle Seiten der Website — gruppiert nach Status (gut/Verbesserung nötig/schlecht). Zeigt auch Trends über Zeit. Beste Übersicht für die gesamte Website.
Chrome DevTools Lighthouse
In Chrome F12 → Tab „Lighthouse“ → Analyse starten. Liefert Lab Data mit sehr detaillierten Diagnosen: genau welches Element CLS verursacht, welcher Script INP blockiert, was LCP verzögert.
Web Vitals Chrome Extension
Chrome Extension von Google: zeigt LCP, CLS und INP live während du eine Seite besuchst — als Echtzeit-Overlay. Ideal um schnell zu prüfen ob Änderungen wirken.
WebPageTest.org
Detailliertere Analyse als PageSpeed Insights: Wasserfalldiagramm aller Ressourcen, Filmstrip des Ladevorgangs, Test von verschiedenen Standorten und Geräten. Sehr nützlich für Deep Dives.
Ahrefs Site Audit
Scannt die gesamte Website auf Core Web Vitals-Probleme und priorisiert nach Impact. Identifiziert welche Seiten dringend optimiert werden müssen — mit konkreten Fix-Empfehlungen.
| Tool | Datentyp | Granularität | Kosten | Ideal für |
|---|---|---|---|---|
| PageSpeed Insights | Field + Lab | Einzelne URL | Kostenlos | Erste Analyse einer URL |
| Search Console | Field Data | Alle Seiten | Kostenlos | Website-Übersicht + Trends |
| Lighthouse / DevTools | Lab Data | Einzelne URL | Kostenlos | Detaillierte Ursachen-Analyse |
| Web Vitals Extension | Real User | Live | Kostenlos | Schnelle Echtzeit-Prüfung |
| WebPageTest | Lab Data | Einzelne URL | Kostenlos | Deep Dive Analyse |
Wähle dein größtes Problem —
erhalte deinen persönlichen Aktionsplan
Wähle welcher Core Web Vital rot ist und auf welchem System deine Website läuft — und erhalte sofort einen priorisierten Maßnahmenplan.
Core Web Vitals Optimierungsplan
Kostenlos · Kein Login · Sofortplan
Empfehlungen basieren auf typischen CWV-Ursachen. Exakte Diagnose erfordert Analyse deiner spezifischen Website.
Wie verbessere ich Core Web Vitals
konkret bei WordPress?
40-Wort-Antwort: WordPress Core Web Vitals verbessern: WP Rocket oder LiteSpeed Cache installieren (LCP, INP) · Smush oder ShortPixel für Bilder (LCP) · Google Fonts lokal hosten (CLS) · Heavy Plugins deinstallieren (INP) · Raidboxes oder Kinsta Hosting (LCP durch TTFB).
🔌 Die wichtigsten WordPress-Plugins für CWV
⚡ WordPress CWV Checkliste (Quick)
DTILE optimiert deine Core Web Vitals
Von LCP über CLS bis INP — wir analysieren, priorisieren und implementieren. Ab 500 €/Monat.
Häufige Fragen zu Core Web Vitals
Eine einfache Analogie: LCP ist wie wie schnell ein Kellner dein Essen bringt, INP ist wie schnell er auf deine Bestellung reagiert, CLS ist ob er beim Bringen das Glas verschüttet und alles durcheinander bringt. Alle drei müssen stimmen für eine gute Erfahrung.
Wie stark der CWV-Einfluss auf Rankings ist, ist umstritten. Google beschreibt ihn als „Tiebreaker“. In der Praxis zeigen viele SEO-Tests: Der direkte Einfluss ist moderat, aber der indirekte Einfluss (bessere User Experience → weniger Absprünge → mehr Conversions) ist deutlich größer.
Core Web Vitals grün —
DTILE macht es möglich
Von der Diagnose bis zur Implementierung: DTILE optimiert LCP, CLS und INP für deine Website. Ab 500 €/Monat, monatlich kündbar.
Engin Buldak
Gründer & SEO Experte · DTILE GmbH HamburgEngin ist Gründer der DTILE GmbH (Stormsweg 5A, 22085 Hamburg) und optimiert Core Web Vitals für KMU-Websites im DACH-Raum. Als Google Partner analysiert er LCP, CLS und INP systematisch und implementiert Lösungen die messbar wirken.