Core Web Vitals einfach erklärt: LCP, INP, CLS verstehen und optimieren

Core Web Vitals sind Googles Messlatten für die Nutzererfahrung auf deiner Website. Seit 2021 sind sie ein offizieller Ranking-Faktor. 2024 wurde FID durch INP ersetzt. 2026 sind es drei Metriken, die über dein Google-Ranking mitentscheiden — und die meisten Website-Betreiber haben nie von ihnen gehört.

LCP — Largest Contentful Paint: Wie schnell sieht der Nutzer Inhalte?

LCP misst die Zeit vom Seitenaufruf bis das größte sichtbare Element im Viewport vollständig gerendert ist. Das ist meist ein Hero-Bild, eine große Headline oder ein Video-Poster.

Bewertung:

• Gut: unter 2,5 Sekunden
• Verbesserungswürdig: 2,5 – 4,0 Sekunden
• Schlecht: über 4,0 Sekunden

Häufigste LCP-Probleme und Lösungen:

• Große, unkomprimierte Bilder → WebP/AVIF nutzen, responsive srcset, Qualität 80
• Langsamer Server (TTFB > 600ms) → Besseres Hosting, CDN, Server-Side Caching
• Render-Blocking CSS/JS → Critical CSS inlinen, JavaScript defer/async
• Lazy Loading auf dem LCP-Element → Hero-Bild NICHT lazy-loaden, fetchpriority="high" setzen
• Webfonts blockieren das Rendering → font-display: swap nutzen, Fonts preloaden

INP — Interaction to Next Paint: Wie schnell reagiert die Seite?

INP hat im März 2024 den FID (First Input Delay) als Core Web Vital ersetzt. Der Unterschied: FID maß nur die erste Interaktion. INP misst alle Interaktionen während des gesamten Besuchs und nimmt den schlechtesten Wert (annähernd — es ist das 98. Perzentil).

INP misst die Zeit vom Klick/Tippen bis der Browser das visuelle Update anzeigt. Das umfasst: Event-Handler Ausführung → DOM-Updates → Layout → Paint.

Bewertung:

• Gut: unter 200 Millisekunden
• Verbesserungswürdig: 200 – 500 Millisekunden
• Schlecht: über 500 Millisekunden

Häufigste INP-Probleme:

• JavaScript-Heavy Frameworks ohne Code-Splitting → Nur laden was die aktuelle Seite braucht
• Lange Main-Thread-Blockaden → Große Tasks in kleinere aufteilen (yield to main thread)
• Zu viele Event Listener → Event Delegation nutzen
• Synchrone Third-Party-Scripts (Chat-Widgets, Analytics) → Asynchron laden oder verzögern
• DOM-Manipulationen in Event-Handlern → requestAnimationFrame oder CSS-Transitions nutzen

CLS — Cumulative Layout Shift: Wie stabil ist das Layout?

CLS misst wie viel sich das Seitenlayout während des Ladens und der Nutzung verschiebt. Wenn ein Button nach unten springt weil sich ein Bild darüber nachträglich lädt — das ist ein Layout Shift.

Bewertung:

• Gut: unter 0,1
• Verbesserungswürdig: 0,1 – 0,25
• Schlecht: über 0,25

Häufigste CLS-Probleme:

• Bilder ohne width/height Attribute → Der Browser reserviert keinen Platz und das Layout springt wenn das Bild lädt
• Dynamisch eingefügte Inhalte → Werbebanner, Cookie-Banner, Lazy-Loading-Elemente die Platz einnehmen
• Webfonts mit unterschiedlicher Metrik → FOUT (Flash of Unstyled Text) verursacht Text-Reflow. font-display: swap + size-adjust nutzen
• iFrames ohne Dimensionen → Google Maps, YouTube Embeds brauchen feste Höhe/Breite

Messen: Die richtigen Tools

Es gibt zwei Arten von Daten: Lab-Daten (simuliert) und Field-Daten (echte Nutzer). Beide sind wichtig.

Lab-Daten (zum Debuggen):

• Chrome DevTools → Performance Tab → Zeigt genau was wann passiert
• Lighthouse (in Chrome integriert) → Gibt Scores und konkrete Verbesserungsvorschläge
• WebPageTest.org → Detaillierter Wasserfall-Chart, verschiedene Geräte und Standorte

Field-Daten (zum Ranking):

• Google PageSpeed Insights → Zeigt CrUX-Daten (Chrome User Experience Report) wenn verfügbar
• Google Search Console → Core Web Vitals Report für deine gesamte Website
• web-vitals JavaScript Library → Erfasst Core Web Vitals deiner echten Nutzer

Wichtig: Google nutzt für das Ranking die Field-Daten (CrUX), nicht die Lab-Daten. Deine Website kann im Lighthouse 100/100 haben und trotzdem schlechte Core Web Vitals haben, wenn echte Nutzer auf langsamen Geräten schlechte Erfahrungen machen.

Wie stark beeinflussen Core Web Vitals das Ranking?

Die ehrliche Antwort: Sie sind ein Tiebreaker, kein Dominanz-Faktor. Content-Relevanz, Backlinks und Suchintention sind immer noch wichtiger. Aber bei gleicher Relevanz entscheiden Core Web Vitals.

In der Praxis bedeutet das: Wenn du für 'Friseur Lörrach' auf Platz 8 stehst und die Seiten auf Platz 5–7 ähnliche Inhalte haben, können bessere Core Web Vitals dich 2–3 Plätze nach oben bringen. Das ist nicht spektakulär — aber es ist kostenloser, dauerhafter Ranking-Vorteil.

Noch wichtiger ist der indirekte Effekt: Seiten mit guten Core Web Vitals haben nachweislich niedrigere Bounce Rates (24% weniger laut Google-Studie), längere Verweildauer und höhere Conversion Rates. All das sendet positive Signale an Google.

Quick Wins: Die 5 schnellsten Verbesserungen

1. 01Bilder komprimieren und in WebP konvertieren → LCP sofort besser
2. 02width und height auf alle img-Tags setzen → CLS sofort besser
3. 03Hero-Bild nicht lazy-loaden, fetchpriority="high" setzen → LCP verbessert
4. 04Third-Party-Scripts verzögert laden (defer/async) → INP verbessert
5. 05Google Fonts lokal hosten mit font-display: swap → LCP und CLS besser

Jede Website die wir bei 24HWEB ausliefern hat Core Web Vitals im grünen Bereich — weil wir Next.js nutzen (automatisches Code-Splitting, Bild-Optimierung, Font-Handling) und kein WordPress mit 30 Plugins das alles ausbremst.