⚡ Core Web Vitals

Core Web Vitals 2026:
LCP, INP & CLS optimieren

Core Web Vitals sind seit 2021 offizielle Google-Ranking-Faktoren. LCP, INP und CLS messen die reale Nutzererfahrung Ihrer Website. Wer hier schlecht abschneidet, verliert Rankings — egal wie gut der Content ist.

✍️ Von Dennis Cesur, Rex Fortis 📅 ⏱️ 9 Min Lesezeit

Was sind Core Web Vitals?

Core Web Vitals sind drei von Google definierte Metriken zur Messung der realen Nutzererfahrung (Page Experience) einer Website: Ladegeschwindigkeit (LCP), Interaktivität (INP) und visuelle Stabilität (CLS). Sie sind seit dem Page Experience Update 2021 offizielle Ranking-Signale.

Die drei Core Web Vitals erklärt

⏱️LCP — Largest Contentful Paint

Misst: Wie lange es dauert, bis das größte sichtbare Element (Bild, Text) geladen ist.

Schwellenwerte:

  • ✅ Gut: unter 2,5 Sekunden
  • ⚠️ Verbesserungsbedarf: 2,5-4s
  • ❌ Schlecht: über 4 Sekunden

Hauptursachen: Langsame Server, große Bilder, blockierendes JavaScript/CSS, keine CDN.

👆INP — Interaction to Next Paint

Misst: Reaktionszeit der Seite auf Nutzerinteraktionen (Klicks, Tippen, Tastatureingaben). Seit März 2024 ersetzt INP den alten FID-Wert.

Schwellenwerte:

  • ✅ Gut: unter 200 Millisekunden
  • ⚠️ Verbesserungsbedarf: 200-500ms
  • ❌ Schlecht: über 500 Millisekunden

Hauptursachen: Schweres JavaScript, lange Tasks, ineffizienter Event-Handler-Code.

📐CLS — Cumulative Layout Shift

Misst: Visuelle Stabilität — wie sehr sich Seitenelemente während des Ladens unerwartet verschieben.

Schwellenwerte:

  • ✅ Gut: unter 0,1
  • ⚠️ Verbesserungsbedarf: 0,1-0,25
  • ❌ Schlecht: über 0,25

Hauptursachen: Bilder ohne Dimensionen, dynamisch eingefügte Inhalte, Web-Fonts ohne Fallback.

Core Web Vitals Schwellwerte im Überblick

Google klassifiziert jede Metrik in drei Stufen. Die kritische Linie ist „Good" – nur Pages, bei denen 75 % der Real-User diesen Wert erreichen, gelten als Page-Experience-positiv.

Metrik Was wird gemessen Good Needs Improvement Poor
LCP Ladezeit des größten sichtbaren Inhalts ≤ 2,5 s 2,5 – 4,0 s > 4,0 s
INP Reaktionszeit auf Nutzer-Interaktionen ≤ 200 ms 200 – 500 ms > 500 ms
CLS Summe unerwarteter Layout-Verschiebungen ≤ 0,1 0,1 – 0,25 > 0,25
FCP First Contentful Paint (ergänzend, nicht CWV) ≤ 1,8 s 1,8 – 3,0 s > 3,0 s
TTFB Time to First Byte (Server-Response) ≤ 800 ms 800 ms – 1,8 s > 1,8 s

Quelle: Google web.dev (Stand 2026). Werte gelten für mobile Endgeräte; Desktop-Schwellwerte sind teilweise strenger.

7 typische Core Web Vitals-Killer

Diese sieben Anti-Patterns sehen wir in über 80 % aller Audits. Wer sie systematisch beseitigt, holt im Schnitt 30 – 50 % Verbesserung pro Metrik.

  1. 1
    Hero-Bild ohne Width und Height Browser kann den Platz nicht reservieren, das Bild wird beim Laden eingeschoben — sofortiger CLS-Sprung. Lösung: width- und height-Attribute setzen, Aspect-Ratio per CSS sichern.
  2. 2
    Webfonts ohne font-display Wenn der Browser auf die Schrift wartet, bleibt der Text unsichtbar (FOIT) oder springt nach dem Laden um (FOUT). Lösung: font-display:swap oder optional + Preload kritischer Fonts.
  3. 3
    Render-blockendes Third-Party-JavaScript Marketing-, Tracking- und Cookie-Banner-Scripts laden synchron im Head. Lösung: defer oder async setzen, Cookie-Banner via CMP-Tag-Manager spät einbinden, Tracker bündeln.
  4. 4
    Riesige unkomprimierte Bilder Hero-PNGs mit 1,5 MB sind die häufigste LCP-Ursache. Lösung: WebP/AVIF konvertieren, srcset für responsive Bilder, loading="eager" und fetchpriority="high" nur für das LCP-Element.
  5. 5
    Lazy-Loading auf dem LCP-Element Wenn das größte Bild „above the fold" auf loading="lazy" gesetzt ist, lädt es zu spät — LCP explodiert. Lösung: Lazy-Loading nur unterhalb des sichtbaren Bereichs nutzen.
  6. 6
    Lange JavaScript-Tasks Synchroner JS-Code über 50 ms blockiert den Main-Thread und macht INP schlecht. Lösung: Code-Splitting, requestIdleCallback für nicht-kritische Tasks, Web Workers für rechenintensive Operationen.
  7. 7
    Dynamisch eingefügter Content ohne Reserveplatz Nachgeladene Ad-Banner, Cookie-Banner, Embeds (YouTube, Instagram) pushen Content nach unten — klassischer CLS. Lösung: Container mit fester min-height, Skeleton-Placeholder, CMP mit Layout-Reserve.

Sofort einsetzbarer Code: die 5 wichtigsten Snippets

Die folgenden fünf Code-Snippets adressieren die häufigsten Core-Web-Vitals-Probleme. In den meisten Setups direkt einsetzbar.

1. LCP-Bild per Preload priorisieren (LCP-Boost)

Im <head> einer Page mit großem Hero-Bild:

<link rel="preload" as="image" href="/assets/hero.webp" fetchpriority="high">

2. Bilder mit Width und Height gegen CLS (CLS-Fix)

Browser reserviert Platz vor dem Bild-Download:

<img src="/img/produkt.webp" width="800" height="600" alt="Produktbild" loading="lazy" decoding="async"> <!-- Wichtig: width/height auch wenn responsive CSS verwendet wird -->

3. Webfont mit font-display + Preload (LCP + CLS)

Im <head>:

<link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Im CSS (verhindert FOIT/FOUT):

@font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2-variations"); font-display: swap; /* oder "optional" für striktes CLS=0 */ }

4. JavaScript deferred laden (INP-Boost)

Nicht-kritisches JS am Ende der Page oder im <head> mit defer:

<script src="/js/analytics.js" defer></script> <script src="/js/chat-widget.js" defer></script> <!-- defer wartet auf DOMContentLoaded, async lädt sofort parallel --> <script src="/js/third-party.js" async></script>

5. Reserveplatz für dynamische Embeds (CLS-Fix)

Container mit fester aspect-ratio vor dem Embed:

<div style="aspect-ratio: 16/9; background: #111;"> <iframe src="https://www.youtube.com/embed/..." width="100%" height="100%" loading="lazy"></iframe> </div>

INP optimieren: die häufigsten Ursachen

INP bewertet die langsamste Interaktion eines Seitenbesuchs — ein einziger träger Klick reicht, um die gesamte Seite in den gelben oder roten Bereich zu ziehen. In der Praxis stecken hinter schlechten INP-Werten fast immer dieselben vier Ursachen:

Das wirksamste Muster: sichtbare Rückmeldung sofort rendern, alles Unkritische erst danach ausführen. So bleibt die gefühlte Reaktionszeit unter 200 ms:

button.addEventListener("click", async () => { openMenu(); // sichtbare Reaktion zuerst await scheduler.yield(); // Main-Thread freigeben trackClick(); // Unkritisches danach });

In Browsern ohne scheduler.yield() leistet setTimeout(fn, 0) denselben Dienst. Welche Interaktion konkret bremst, zeigt der INP-Eintrag im Performance-Panel der Chrome DevTools.

CLS beheben: Schritt für Schritt

Layout-Verschiebungen lassen sich systematisch beseitigen — wichtig ist die Reihenfolge: erst den Verursacher identifizieren, dann gezielt Platz reservieren. So gehen Sie vor:

  1. Verursacher sichtbar machen: In den Chrome DevTools eine Performance-Aufnahme starten — jeder Eintrag unter „Layout Shifts" zeigt das auslösende Element samt Zeitpunkt.
  2. Bildern und Videos feste Dimensionen geben: width- und height-Attribute im HTML setzen, damit der Browser den Platz vor dem Download reserviert.
  3. Platz für dynamische Inhalte reservieren: Cookie-Banner, Werbeflächen und Embeds bekommen Container mit min-height oder aspect-ratio.
  4. Webfonts entschärfen: font-display:swap setzen und das Hauptgewicht per Preload laden, damit Text nicht nachträglich umbricht.
  5. Nur transform animieren: Animationen über top, left oder margin verschieben umliegende Elemente und zählen in den CLS-Wert.

Die Schritte 2 und 3 beseitigen in den meisten Projekten bereits den Großteil des CLS-Werts:

/* Platz reservieren, bevor Inhalte nachgeladen werden */ .banner-slot { min-height: 320px; } .video-wrapper { aspect-ratio: 16 / 9; width: 100%; } img { height: auto; } /* mit width/height im HTML */

Nach jedem Schritt neu messen: In Lab-Daten wirken CLS-Korrekturen sofort, die Field-Daten im Chrome User Experience Report ziehen wegen des 28-Tage-Fensters zeitverzögert nach.

Vor-Nach: eine reale CWV-Optimierung

Beispiel aus einem unserer Kunden-Audits — Mittelstands-Website mit klassischen Performance-Problemen. Maßnahmen über 6 Wochen, Field-Daten aus dem Chrome User Experience Report.

❌ Vor der Optimierung (Woche 0)

LCP4,2 s
INP340 ms
CLS0,38
TTFB1,4 s
Mobile-BewertungPoor

✅ Nach der Optimierung (Woche 6)

LCP1,8 s
INP140 ms
CLS0,04
TTFB620 ms
Mobile-BewertungGood

Was hat geholfen — die fünf wirksamsten Maßnahmen

  1. Hero-Bild von 1,4 MB PNG auf 180 KB AVIF umgestellt, mit preload-Hint und fetchpriority="high" – allein dieser Schritt brachte 1,8 s LCP-Reduktion.
  2. Cookie-Banner von synchroner Einbindung auf CMP mit Layout-Reserve umgestellt – CLS sank von 0,38 auf 0,12.
  3. Web-Fonts auf font-display:swap umgestellt und das Hauptgewicht per preload priorisiert – weitere 0,4 s LCP gewonnen.
  4. Analytics- und Chat-Widget-Scripts auf defer/async umgestellt und in einer Bundle-Datei konsolidiert – INP fiel von 340 ms auf 140 ms.
  5. Server-Caching (Edge-Cache + Brotli-Kompression) reduziert TTFB von 1,4 s auf 620 ms – wirkt indirekt auf LCP und FCP.

Wenn Sie eine vergleichbare Analyse Ihrer Website wünschen, schauen Sie unsere SEO Audit Checkliste an oder beauftragen Sie unser Technical SEO Team.

Core Web Vitals messen und überwachen

🔬Lab-Daten (Synthetic Monitoring)

Simulierte Tests unter kontrollierten Bedingungen. Schnell, reproduzierbar, gut für Entwicklung und A/B-Tests.

  • Google PageSpeed Insights
  • Lighthouse (Chrome DevTools)
  • WebPageTest.org
  • GTmetrix

📊Field-Daten (Real User Monitoring)

Echte Nutzerdaten aus dem Chrome User Experience Report (CrUX). Diese Daten verwendet Google tatsächlich für Rankings.

  • Google Search Console (Core Web Vitals Report)
  • PageSpeed Insights (CrUX-Daten)
  • Google Analytics 4 (Web Vitals)
  • CrUX Dashboard (Data Studio)

Häufige Fragen zu Core Web Vitals

Wie stark beeinflussen Core Web Vitals mein Ranking?

Core Web Vitals sind ein Tiebreaker-Signal: Bei inhaltlich gleichwertigen Seiten gewinnt die mit besserer Page Experience. In der Praxis sind starke Keywords, Backlinks und Content-Qualität stärker. Allerdings: Sehr schlechte Core Web Vitals (roter Bereich) können Rankings aktiv schädigen.

Muss ich alle Seiten optimieren oder nur die Startseite?

Google bewertet Core Web Vitals auf Seiten-Ebene, nicht auf Domain-Ebene. Priorisieren Sie: (1) Landingpages mit hohem Traffic, (2) Seiten, die für wichtige Keywords ranken sollen, (3) Conversion-relevante Seiten. Die Startseite ist wichtig, aber oft nicht die kritischste Seite.

Was ist der schnellste Weg, LCP zu verbessern?

Die schnellsten LCP-Verbesserungen: (1) Bilder in WebP/AVIF konvertieren, (2) Größte Bilder mit loading="eager" und fetchpriority="high" priorisieren, (3) CDN einsetzen, (4) Server-Response-Time optimieren (TTFB unter 800ms), (5) Render-blockendes CSS/JS eliminieren.

PageSpeed-Score vs. Core Web Vitals — was ist wichtiger?

Core Web Vitals (Field-Daten) sind für Google-Rankings relevant, nicht der PageSpeed-Score. Ein hoher PageSpeed-Score (Lab-Daten) korreliert oft mit guten Core Web Vitals, ist aber kein direkter Rankingfaktor. Fokussieren Sie auf die Field-Daten in der Google Search Console.

Wie messe ich Core Web Vitals zuverlässig?

Für Lab-Daten: PageSpeed Insights, Lighthouse (Chrome DevTools), WebPageTest. Für Field-Daten: Google Search Console (CWV-Bericht), Chrome UX Report, RUM-Tools wie SpeedCurve oder Calibre. Field-Daten sind aussagekräftiger, weil sie echte Nutzer messen — Google nutzt sie auch für das Ranking.

Welche Tools brauche ich für die Core Web Vitals Optimierung?

Kostenlos: PageSpeed Insights, Lighthouse (Chrome DevTools), Google Search Console CWV-Bericht. Premium: WebPageTest, SpeedCurve oder Calibre für RUM und CI/CD-Integration. Für Image-Optimierung: Squoosh, ImageMagick, Cloudflare Image Resizing oder ein dediziertes Image-CDN wie Cloudinary. Konkrete Tool-Empfehlungen finden Sie in unserer SEO Audit Checkliste.

Warum sind meine Core Web Vitals im Labortest gut, aber in der Search Console schlecht?

Lab-Daten (PageSpeed Insights, Lighthouse) simulieren einen einzelnen Aufruf unter festen Bedingungen. Die Search Console zeigt dagegen Field-Daten echter Nutzer — inklusive langsamer Mobilgeräte, schwacher Netzverbindungen und Erstbesuchen ohne Cache. Die häufigste Ursache der Diskrepanz ist INP: Im Labortest interagiert niemand mit der Seite, echte Nutzer schon. Priorisieren Sie deshalb immer die Field-Daten.

Wie lange dauert es, bis sich verbesserte Core Web Vitals im Ranking zeigen?

Der Chrome User Experience Report arbeitet mit einem rollierenden 28-Tage-Fenster. Nach einer technischen Verbesserung dauert es also bis zu vier Wochen, bis die Field-Daten in der Google Search Console vollständig im grünen Bereich sind. Ranking-Effekte folgen danach schrittweise — planen Sie insgesamt sechs bis acht Wochen ein, bevor Sie die Wirkung bewerten.

Core Web Vitals professionell optimieren

Unser Technical SEO Service analysiert Ihre Core Web Vitals und implementiert gezielte Verbesserungen.

Performance-Audit anfordern →