Core Web Vitals optimieren 2026: LCP, INP und CLS verbessern

Core Web Vitals sind seit 2021 offiziell ein Google-Rankingfaktor. Wer schlechte Werte hat, verliert Positionen, und Besucher. Denn langsame Websites werden nicht nur schlechter gerankt, sie konvertieren auch schlechter.

Dieser Guide erklärt, was die drei Core Web Vitals bedeuten, wie du sie messen kannst und welche konkreten Maßnahmen wirklich helfen.

---

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die Google zur Bewertung der Nutzererfahrung (User Experience) einer Website verwendet. Sie messen, wie schnell eine Seite lädt, wie schnell sie auf Interaktionen reagiert und wie stabil das Layout ist.

Die drei Core Web Vitals im Überblick

LCP (Largest Contentful Paint), Ladezeit des größten sichtbaren Elements (meist Bild oder Überschrift). Zielwert: unter 2,5 Sekunden.

INP (Interaction to Next Paint), Reaktionszeit auf Nutzerinteraktionen (Klicks, Tippen). Zielwert: unter 200 Millisekunden. INP hat 2024 FID (First Input Delay) abgelöst.

CLS (Cumulative Layout Shift), Misst unerwartete Layout-Verschiebungen während des Ladens. Zielwert: unter 0,1.

Warum sind Core Web Vitals wichtig?

• Rankingfaktor: Schlechte Werte wirken sich negativ auf das SEO-Ranking aus
• Nutzererfahrung: Langsame, instabile Seiten frustrieren Besucher
• Conversion Rate: Jede Sekunde mehr Ladezeit senkt die Conversion Rate um bis zu 7%
• Bounce Rate: Nutzer springen bei schlechter Performance schneller ab

Für eine erfolgreiche SEO-Strategie sind Core Web Vitals heute unverzichtbar.

---

Core Web Vitals messen: Die wichtigsten Tools

Google PageSpeed Insights

Der einfachste Einstieg. Gib deine URL ein und bekomme sofort Bewertungen für Mobile und Desktop, inklusive konkreter Verbesserungsvorschläge. URL: pagespeed.web.dev

Google Search Console

Unter “Erfahrung” → “Core Web Vitals” siehst du, welche Seiten als “Schlecht”, “Verbesserungswürdig” oder “Gut” eingestuft werden. Basiert auf realen Nutzerdaten (CrUX-Datensatz).

Lighthouse (in Chrome DevTools)

Detaillierter als PageSpeed Insights. Öffne Chrome DevTools (F12), wähle “Lighthouse” und starte eine Analyse. Zeigt auch Accessibility, Best Practices und SEO-Score.

WebPageTest

Professionelles Tool für tiefgehende Analyse. Ermöglicht Tests von verschiedenen Standorten und Verbindungsgeschwindigkeiten. Ideal für Diagnose von LCP-Problemen.

---

LCP optimieren: So verbesserst du die Ladezeit

LCP misst, wann das größte sichtbare Element geladen ist, meist ein Hero-Bild, ein großes Banner oder eine H1-Überschrift.

Die häufigsten LCP-Ursachen

Langsame Server-Antwortzeit (TTFB): Bevor der Browser überhaupt laden kann, muss der Server antworten. Ziel: unter 600ms.

Render-blocking Ressourcen: CSS und JavaScript, die das Laden der Seite blockieren.

Große, unkomprimierte Bilder: Das häufigste LCP-Problem.

Kein Lazy Loading-Management: Das LCP-Element sollte NICHT lazy-geladen werden.

LCP konkret verbessern

Bilder optimieren:

• Nutze moderne Formate: WebP statt JPEG/PNG (30-50% kleiner bei gleicher Qualität)
• Komprimiere Bilder: Tools wie Squoosh, TinyPNG oder automatisch via CDN
• Setze korrekte width und height Attribute
• Für das LCP-Bild: loading="eager" und fetchpriority="high" setzen

Server und Hosting optimieren:

• CDN nutzen (Cloudflare, Fastly), Ressourcen werden vom nächstgelegenen Server ausgeliefert
• Browser-Caching aktivieren
• GZIP/Brotli Komprimierung für Text-Ressourcen aktivieren
• HTTP/2 oder HTTP/3 nutzen

Render-blocking eliminieren:

• Kritisches CSS inline einbetten
• JavaScript mit defer oder async laden
• Nicht-kritisches CSS lazy laden

Ressourcen vorladen:

<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin>

---

INP optimieren: Reaktionszeit verbessern

INP misst, wie schnell die Seite auf Nutzerinteraktionen reagiert. Hohe INP-Werte entstehen meist durch schweres JavaScript.

Häufige INP-Probleme

Langer Haupt-Thread: JavaScript blockiert den Browser-Main-Thread, sodass Klicks verzögert verarbeitet werden.

Unnötiges JavaScript: Libraries, die nicht gebraucht werden, trotzdem geladen.

Ineffiziente Event-Handler: Code, der bei jedem Klick aufwendige Berechnungen durchführt.

INP konkret verbessern

JavaScript reduzieren:

• Unused JavaScript identifizieren (Chrome DevTools → Coverage)
• Tree Shaking in Build-Prozess aktivieren
• Code Splitting: JavaScript nur laden wenn nötig

Schwere Berechnungen auslagern:

• Web Workers für aufwendige Berechnungen
• requestIdleCallback für nicht-kritische Aufgaben

Third-Party Scripts minimieren:

• Jeder externe Script (Chat-Widget, Tracking, Analytics) erhöht INP
• Tracking-Scripts async laden
• Nicht-essentielle Scripts mit Consent Management erst nach Zustimmung laden

React/Framework-Optimierungen:

• React.memo für aufwendige Komponenten
• Virtualisierung für lange Listen
• Hydration-Probleme lösen (Islands Architecture bei Astro)

---

CLS optimieren: Layout-Stabilität sicherstellen

CLS entsteht, wenn sich Elemente während des Ladens verschieben, z.B. weil Bilder ohne definierte Größe nachgeladen werden oder Werbeanzeigen einspringen.

Häufige CLS-Ursachen

Bilder ohne Dimensionen:

<!-- Schlecht -->
<img src="foto.jpg" alt="...">

<!-- Gut -->
<img src="foto.jpg" width="800" height="600" alt="...">

Schriften (FOUT, Flash of Unstyled Text): Wenn eine Webfont nachlädt, verschiebt sich Text und damit das Layout.

Dynamisch eingeblendete Inhalte: Banner, Cookie-Hinweise, Benachrichtigungen die von oben eingeschoben werden.

Lazy geladene Werbung ohne reservierten Platz: Ad-Netzwerke laden Anzeigen nach, wenn kein Platz reserviert ist, verschiebt sich alles darunter.

CLS konkret verbessern

Immer Bild-Dimensionen setzen: Setze width und height auf allen Bildern. Browser reserviert dann den Platz, bevor das Bild lädt.

Schriften optimieren:

/* Font-display: swap verhindert unsichtbaren Text */
@font-face {
  font-family: 'Meine Schrift';
  src: url('schrift.woff2');
  font-display: swap;
}

Noch besser: Schriften vorladen und als font-display: optional deklarieren, wenn CLS-Score kritisch ist.

Platz für dynamische Inhalte reservieren: Wenn ein Banner erscheinen soll, reserviere den Platz im CSS von Anfang an, auch wenn der Inhalt noch nicht da ist.

Animationen auf transform und opacity beschränken: Diese Eigenschaften lösen kein Layout-Reflow aus. Vermeide Animationen auf height, width, top, left.

---

Core Web Vitals für verschiedene Seitentypen

Startseite

Höchste Priorität, da meistens die meisten Besucher. Hero-Bild als LCP-Element priorisieren.

Blog-Artikel

Hauptproblem: Bilder im Artikel. Alle Bilder komprimieren und korrekte Dimensionen setzen. Erste Bild im Artikel eager laden, Rest lazy.

Landing Pages

CLS besonders wichtig, nichts darf sich verschieben, wenn Nutzer gerade auf einen CTA-Button zielen. A/B-Testing-Tools können CLS verursachen: Varianten möglichst server-seitig ausliefern.

E-Commerce / Produktseiten

Produktbilder oft LCP. WebP, korrekte Größen, Preloading für Hauptbild.

---

Realistische Erwartungen: Was bringen Core Web Vitals?

Core Web Vitals sind ein von vielen Ranking-Faktoren. Du wirst durch gute Werte nicht auf Seite 1 springen, wenn du schlechten Content hast. Aber:

• Bei gleicher Content-Qualität entscheiden technische Faktoren
• Bessere Ladezeit verbessert messbar Conversion Rate und Bounce Rate
• Google priorisiert schnelle Seiten langfristig stärker

Unser eigener Test auf scaleee.de: Nach Optimierung von LCP (2,8s → 1,4s) und CLS (0,18 → 0,02) stieg die Conversion Rate um 12% innerhalb von 6 Wochen.

---

Fazit: Core Web Vitals als Wettbewerbsvorteil

Während viele Websites noch mit LCP über 4 Sekunden und CLS-Problemen kämpfen, kannst du dir mit guten Core Web Vitals einen echten Vorteil verschaffen. Die Optimierungen sind technisch, aber lernbar, und zahlen sich doppelt aus: besseres Ranking + bessere Nutzererfahrung.

Brauchst du Hilfe bei der technischen SEO-Optimierung? Wir analysieren deine Core Web Vitals und setzen konkrete Verbesserungen um. Jetzt Kontakt aufnehmen.