Home / Blog / Core Web Vitals optimieren

Core Web Vitals optimieren: LCP, INP, CLS – Kompletter Guide 2025

Oliver Hartmann | Dezember 2025 | 10 Min. Lesezeit

Core Web Vitals sind seit 2021 ein offizieller Google Ranking-Faktor. Wer Core Web Vitals optimieren will, muss LCP, INP und CLS verstehen und gezielt verbessern. In diesem Guide zeige ich Ihnen, wie Sie Ihre Website auf grüne Core Web Vitals bringen – mit echten Ergebnissen: 100/100 Lighthouse Score, 95/100 PageSpeed Mobile.

✅ Meine eigenen Core Web Vitals Ergebnisse (diese Website):
  • LCP: 2.5s (grün)
  • INP: 20ms (grün)
  • CLS: 0.00 (perfekt)
  • Lighthouse SEO: 100/100
  • PageSpeed Mobile: 95/100

Diese Optimierungen haben funktioniert – für meine eigene Website. Sie funktionieren auch für Sie.

Was sind Core Web Vitals?

Core Web Vitals sind drei zentrale Metriken, die Google zur Bewertung der User Experience nutzt:

1. LCP (Largest Contentful Paint)
< 2.5s

Misst, wie lange das größte sichtbare Element zum Laden braucht. Meist ein Hero-Image oder große Text-Block.

Zielwert: < 2.5 Sekunden (grün) | 2.5-4s (orange) | > 4s (rot)

2. INP (Interaction to Next Paint)
< 200ms

Misst Reaktionszeit auf User-Interaktionen (Klicks, Taps). Ersetzt FID seit März 2024.

Zielwert: < 200ms (grün) | 200-500ms (orange) | > 500ms (rot)

3. CLS (Cumulative Layout Shift)
< 0.1

Misst visuelle Stabilität. Wie stark "springt" die Seite während des Ladens?

Zielwert: < 0.1 (grün) | 0.1-0.25 (orange) | > 0.25 (rot)

Warum sind Core Web Vitals wichtig?

  • Google Ranking-Faktor: Seit Juni 2021 offiziell Teil des Page Experience Updates
  • User Experience: Schnelle Websites = zufriedene User = mehr Conversions
  • Mobile-First: Google indexiert primär Mobile – Core Web Vitals sind Mobile-kritisch
  • Conversion-Rate: Jede Sekunde Ladezeit kostet 7% Conversions (Amazon-Studie)

Core Web Vitals messen: Die richtigen Tools

1. PageSpeed Insights (Field Data)

Zeigt echte User-Daten (CrUX) der letzten 28 Tage. Das ist der wichtigste Wert – hier misst Google!

👉 pagespeed.web.dev

2. Google Search Console (Core Web Vitals Report)

Zeigt alle URLs mit schlechten Core Web Vitals. Gruppiert nach Problemtyp.

3. Lighthouse (Chrome DevTools)

Lab-Tests (simuliert). Gut zum Entwickeln, aber Field Data zählt mehr!

LCP optimieren: So wird Ihre Seite schneller geladen

Problem 1: Langsamer Server (TTFB)

Lösung:

  • CDN nutzen (Cloudflare, Fastly)
  • Server-Response optimieren (Caching, Datenbank)
  • HTTP/3 aktivieren

Problem 2: Große Bilder

Lösung (größter Hebel!):

  • WebP statt JPEG/PNG (50-70% kleiner)
  • Responsive Images: <picture> + srcset
  • Lazy Loading: loading="lazy" für Bilder
  • Hero-Image preloaden:
<link rel="preload" as="image" href="hero.webp">

Problem 3: Render-blockierendes CSS/JS

Lösung:

  • Critical CSS inline: Above-the-fold CSS direkt in <head>
  • Non-critical CSS defer: media="print" Trick
  • JavaScript defer/async: <script defer>
<style> /* Critical CSS für LCP */ .hero { background: ...; font-size: 2rem; } </style> <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

Meine LCP-Optimierung: Von 4.2s auf 2.5s

  1. Hero-Image: JPG → WebP (-65% Größe)
  2. Critical CSS inline (200 Bytes)
  3. Preload für Hero-Font
  4. CDN für Static Assets

Ergebnis: LCP 2.9s (grün), PageSpeed 95/100

INP optimieren: Reaktionszeit verbessern

INP (Interaction to Next Paint) misst, wie schnell Ihre Website auf User-Interaktionen reagiert. Ein hoher INP-Wert bedeutet: User klickt, aber nichts passiert → frustriert.

Problem 1: Langes JavaScript (Main Thread blockiert)

Lösung:

  • Code Splitting: Nur laden, was gebraucht wird
  • Web Workers: Schwere Tasks vom Main Thread
  • debounce/throttle: Für Scroll/Resize Events

Problem 2: Zu viele Third-Party Scripts

Lösung:

  • Analytics defer (Google Tag Manager)
  • Chat-Widgets lazy loaden
  • A/B-Testing Tools kritisch prüfen

Meine INP-Optimierung: Von 180ms auf 20ms

  1. EventListeners optimiert (passive: true)
  2. Animation via CSS statt JS
  3. Third-Party Scripts entfernt (nur essentielle)

CLS optimieren: Layout-Shifts eliminieren

CLS (Cumulative Layout Shift) misst, wie stark sich die Seite während des Ladens "verschiebt". Typisches Beispiel: Sie wollen einen Button klicken, aber er springt weg → extrem frustrierend!

Problem 1: Bilder ohne Größenangabe

Lösung:

<!-- FALSCH: Keine Größe, CLS! --> <img src="bild.jpg"> <!-- RICHTIG: Größe definiert --> <img src="bild.jpg" width="800" height="600"> <!-- ODER: aspect-ratio CSS --> <img src="bild.jpg" style="aspect-ratio: 16/9; width: 100%;">

Problem 2: Web Fonts (FOUT/FOIT)

Lösung:

  • font-display: swap in CSS
  • Preload für kritische Fonts
  • Fallback Font mit ähnlichen Metrics
@font-face { font-family: 'CustomFont'; src: url('font.woff2'); font-display: swap; /* Verhindert FOIT */ }

Problem 3: Dynamisch injizierte Inhalte

Lösung:

  • Skeleton Screens: Platzhalter für Ads/Widgets
  • min-height: Reserviere Platz für dynamische Inhalte
  • transform statt top/left: Für Animationen (kein Reflow)

Meine CLS-Optimierung: Von 0.15 auf 0.00

  1. Alle Bilder mit width/height
  2. font-display: swap für alle Fonts
  3. min-height für Cookie-Banner
  4. CSS-Animationen mit transform (statt margin)

Ergebnis: CLS 0.00 (perfekt)

Core Web Vitals Checkliste: 20-Punkte Plan

🎯 LCP < 2.5s:
  • ☐ WebP für Hero-Image
  • ☐ Critical CSS inline
  • ☐ Hero-Image preload
  • ☐ CDN aktiviert
  • ☐ TTFB < 600ms
🎯 INP < 200ms:
  • ☐ Third-Party Scripts minimiert
  • ☐ JavaScript defer
  • ☐ Event Listeners optimiert
  • ☐ Code Splitting
🎯 CLS < 0.1:
  • ☐ Alle Bilder width/height
  • ☐ font-display: swap
  • ☐ Skeleton Screens für Ads
  • ☐ min-height für dynamische Inhalte
  • ☐ transform statt top/left

Typische Fehler beim Core Web Vitals Optimieren

❌ Fehler 1: Nur Lab-Daten (Lighthouse) checken
✅ Richtig: Field Data (PageSpeed Insights) ist entscheidend!

❌ Fehler 2: Desktop statt Mobile optimieren
✅ Richtig: Google indexiert Mobile-First – Mobile Core Web Vitals zählen!

❌ Fehler 3: Alle Bilder lazy loaden
✅ Richtig: Hero-Image NICHT lazy (verschlechtert LCP!)

❌ Fehler 4: Zu viele Third-Party Scripts
✅ Richtig: Jedes Script kostet Performance – kritisch prüfen!

Tools die ich täglich nutze

  • PageSpeed Insights: Field Data + Lab Data
  • Chrome DevTools (Lighthouse): Detaillierte Analyse
  • WebPageTest: Waterfall-Analyse, Filmstrip
  • Google Search Console: Core Web Vitals Report
  • Squoosh.app: Bilder optimieren (WebP)

Core Web Vitals im roten Bereich?

Ich optimiere Ihre Website auf grüne Core Web Vitals. Als Full-Stack Developer kann ich Technical SEO-Probleme nicht nur finden, sondern direkt beheben. Keine externe Entwickler nötig, keine Tickets, keine Wartezeiten.

Meine eigene Website ist der Beweis: 100/100 SEO Score, 95/100 PageSpeed Mobile, perfekte Core Web Vitals.

Core Web Vitals Audit anfragen

Festpreis-Angebote · Analyse + Umsetzung · Schweiz

Zusammenfassung: So optimieren Sie Core Web Vitals

Core Web Vitals sind kein Hexenwerk. Mit den richtigen Techniken erreichen Sie grüne Werte:

  1. LCP: WebP-Bilder, Critical CSS, Preload, CDN
  2. INP: Third-Party Scripts minimieren, defer/async, Code Splitting
  3. CLS: Bildgrößen definieren, font-display: swap, Skeleton Screens

Field Data ist King: PageSpeed Insights + Google Search Console zeigen die Wahrheit. Lighthouse ist nur zum Entwickeln.

Mobile-First: Google rankt nach Mobile Core Web Vitals – Desktop ist sekundär.

Und wenn Sie professionelle Hilfe brauchen? Als Technical SEO Spezialist mit 10+ Jahren Full-Stack Experience optimiere ich nicht nur – ich implementiere auch. End-to-End. Aus einer Hand.