Seit März 2024 sind Core Web Vitals offiziell Teil des Google-Ranking-Algorithmus — und seit dem Dezember-2025-Update mit deutlich höherem Gewicht. Wer LCP über 2,5 Sekunden, INP über 200 Millisekunden oder CLS über 0,1 hat, verliert messbar Rankings. Und mit der Ausbreitung von AI Overviews gewichten auch KI-Systeme Performance stark.
In diesem Artikel erklären wir die drei Metriken im Detail, zeigen realistische Zielwerte für 2026 und geben konkrete Optimierungs-Playbooks — basierend auf 50+ Alunah-Kundenprojekten aus Braunschweig und ganz Deutschland.
Die drei Core Web Vitals im Überblick
LCP — Largest Contentful Paint
LCP misst, wie schnell das größte sichtbare Element (Hero-Bild, Video, Textblock) im Viewport lädt. Die Zielwerte:
- Gut: unter 2,5 Sekunden
- Verbesserungsbedürftig: 2,5–4,0 Sekunden
- Schlecht: über 4,0 Sekunden
Die Messung erfolgt an der 75-Perzentil-Grenze der Real-User-Daten (Chrome User Experience Report, CrUX). Lab-Tests wie Lighthouse liefern nur eine Annäherung.
INP — Interaction to Next Paint
INP hat seit März 2024 FID (First Input Delay) abgelöst und misst die Reaktionsfähigkeit auf Klicks, Taps und Tastatur-Eingaben über den gesamten Besuch. Die Zielwerte:
- Gut: unter 200 Millisekunden
- Verbesserungsbedürftig: 200–500 Millisekunden
- Schlecht: über 500 Millisekunden
Während FID nur die erste Interaktion maß, erfasst INP das 75. Perzentil aller Interaktionen — also die schlechtesten 25 Prozent. Ein einzelner langsamer Klick kann den gesamten Score negativ beeinflussen.
CLS — Cumulative Layout Shift
CLS misst ungewollte Layout-Verschiebungen während des Seitenbesuchs. Die Zielwerte:
- Gut: unter 0,1
- Verbesserungsbedürftig: 0,1–0,25
- Schlecht: über 0,25
Ein Score von 1,0 entspricht einer Verschiebung von 100 Prozent der Bildschirmfläche. Die meisten gut optimierten Sites liegen zwischen 0 und 0,05.
Warum Core Web Vitals 2026 wichtiger sind als je zuvor
Drei Entwicklungen haben die Relevanz 2025–2026 deutlich erhöht:
1. AI-Crawler brechen bei langsamen Seiten ab. GPTBot, ClaudeBot und PerplexityBot haben interne Timeouts von typischerweise 3–5 Sekunden. Sites mit LCP über 4 Sekunden werden teilweise gar nicht gecrawlt — ein direkter Verlust von KI-Sichtbarkeit.
2. Mobile wächst weiter. Über 72 Prozent der Suchanfragen in Deutschland kommen mittlerweile vom Smartphone. Mobile Core Web Vitals sind strenger zu erreichen als Desktop, weil mobile Geräte schwächere CPUs und langsamere Netzwerke haben.
3. Core Web Vitals korrelieren mit Conversion. Google's Webmasters-Team hat mehrfach gezeigt: Sites mit guten Core Web Vitals haben durchschnittlich 24 Prozent höhere Conversion-Raten als Sites mit schlechten Werten.
LCP-Optimierung: Das 7-Stufen-Playbook
Schritt 1: LCP-Element identifizieren
Öffnen Sie Chrome DevTools → Performance Tab → starten Sie eine Aufzeichnung → laden Sie die Seite. Das LCP-Element wird im Timeline-Event markiert. Typische LCP-Elemente:
- Hero-Bild (bei Marketing-Websites)
- H1-Überschrift (bei Blog-Artikeln)
- Video-Thumbnail (bei Landingpages)
Schritt 2: Modernes Bildformat nutzen
AVIF ist das neueste Format mit 50–70 Prozent kleinerer Dateigröße als PNG bei gleicher Qualität. WebP als Fallback für ältere Browser. Ein typisches Hero-Bild:
- PNG: 850 KB
- WebP: 220 KB
- AVIF: 95 KB
Bei Next.js erledigt das die Image-Komponente automatisch. Alternativ: Squoosh, ImageOptim oder ein CDN mit Format-Negotiation wie Cloudflare Images.
Schritt 3: Preload-Hint setzen
<link rel="preload" as="image" href="/hero.avif"
imagesrcset="/hero.avif 1x, /[email protected] 2x"
fetchpriority="high">
Das sagt dem Browser: "Lade dieses Bild so früh wie möglich." Ein typischer LCP-Verbesserungseffekt: 400–800 Millisekunden.
Schritt 4: Server-seitiges Rendering (SSR)
Client-Side-Rendered Apps haben typischerweise LCP über 3 Sekunden, weil das HTML erst nach JavaScript-Ausführung entsteht. Server-Side Rendering oder Static Site Generation liefert fertiges HTML sofort und senkt LCP typischerweise auf 1,2–1,8 Sekunden.
Schritt 5: CDN mit Edge-Caching
Ein CDN wie Cloudflare, Netlify Edge oder Vercel CDN liefert statische Assets aus dem nächsten Edge-Knoten. Der Latenz-Unterschied ist drastisch: Ein Server in Frankfurt liefert nach München in 30ms, ein CDN in München liefert in 3ms.
Schritt 6: Kritisches CSS inline einbetten
Kritisches CSS (für Above-the-Fold-Content) sollte inline im <head> eingebettet sein — nicht als externe Datei geladen. Tools wie Critical oder die Next.js App Router machen das automatisch.
Schritt 7: Third-Party-Skripte lazy laden
Facebook Pixel, Hotjar, Google Tag Manager werden typischerweise synchron geladen und blockieren LCP. Lazy-Loading über <script strategy="lazyOnload"> oder Intersection-Observer bringt 300–600 Millisekunden.
INP-Optimierung: Das Praxis-Playbook
Long Tasks identifizieren
Öffnen Sie Chrome DevTools → Performance Tab → identifizieren Sie alle Tasks über 50 Millisekunden (rot markiert). Diese sind die INP-Killer.
JavaScript-Bundle-Size reduzieren
Ein großer React-Bundle (über 500 KB) führt zu Long Tasks beim Parse und Compile. Lösung:
- Code-Splitting mit dynamischen Imports
- Tree-Shaking nicht genutzter Bibliotheken
- React Server Components für Server-only Rendering
Alunah-Projekte haben typisch 50–90 KB JavaScript gegenüber 300–500 KB bei WordPress-Setups.
Event-Handler debouncen
Ein onInput-Handler der bei jedem Tastendruck eine Suche triggert, blockiert den Main Thread. Lösung: Debounce mit 150–300 ms.
const debouncedSearch = useMemo(
() => debounce((query) => performSearch(query), 300),
[]
);
React useMemo und useTransition nutzen
Für teure Berechnungen: useMemo. Für nicht-urgent State-Updates: useTransition. Beide verhindern Re-Render-Stürme, die Long Tasks erzeugen.
Web Workers für CPU-lastige Arbeit
Bildverarbeitung, komplexe Berechnungen oder große Array-Operationen gehören in Web Workers — nicht in den Main Thread. Bibliotheken wie Comlink machen das einfach.
CLS-Optimierung: Die häufigsten Fixes
Bilder mit Dimensionen
<!-- Schlecht -->
<img src="/hero.jpg">
<!-- Gut -->
<img src="/hero.jpg" width="1200" height="630" alt="...">
Oder mit CSS aspect-ratio:
.hero-image { aspect-ratio: 1200 / 630; }
Font-Loading mit font-display
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: optional; /* Kein FOUT, falls Font nicht schnell lädt */
}
Für kritische Fonts zusätzlich: <link rel="preload" as="font" ... crossorigin>.
Cookie-Banner als Overlay
Ein Cookie-Banner, der inline im Content steht, schiebt alles nach unten = hoher CLS. Lösung: position: fixed; bottom: 0; z-index: 9999; — dann ist der Banner ein Overlay ohne Layout-Impact.
Placeholder für asynchrone Inhalte
AJAX-Content oder Instagram-Embeds sollten immer mit min-height reservieren, bevor sie laden.
Vorher-Nachher aus Alunah-Projekten
| Kunde | LCP vorher | LCP nachher | INP vorher | INP nachher | CLS vorher | CLS nachher |
|---|---|---|---|---|---|---|
| Autohaus Sassenburg | 4,8 s | 1,2 s | 420 ms | 125 ms | 0,32 | 0,04 |
| Friseursalon Braunschweig | 3,9 s | 1,5 s | 380 ms | 165 ms | 0,42 | 0,05 |
| Pflegedienst | 5,2 s | 1,8 s | 510 ms | 180 ms | 0,18 | 0,02 |
| Restaurant | 3,4 s | 1,3 s | 290 ms | 140 ms | 0,21 | 0,03 |
Die typischen Ergebnisse: 50–70 Prozent Verbesserung bei LCP, 60–75 Prozent bei INP, 80–95 Prozent bei CLS. Ranking-Effekt: durchschnittlich 2–4 Positions-Verbesserung innerhalb von 6–8 Wochen nach CrUX-Rescan.
Wie Sie Ihre Core Web Vitals messen
Field Data (Real Users) — maßgeblich für Google
Google Search Console: Bericht "Core Web Vitals" unter "Erfahrung" — zeigt aggregierte Daten pro URL-Muster.
CrUX Report via PageSpeed Insights: pagespeed.web.dev zeigt Field Data für jede öffentliche URL.
Real User Monitoring (RUM): Vercel Analytics, Cloudflare Web Analytics oder Sentry Performance liefern Echtzeit-Daten.
Lab Data (Simulation) — für schnelles Iterieren
Lighthouse: In Chrome DevTools integriert, simuliert Mobile-Gerät mit 3G.
WebPageTest: Detaillierte Waterfall-Analyse, mehrere Geräte und Netzwerke.
Lighthouse CI: In Build-Pipeline integriert, blockt Merges bei Performance-Regression.
Wichtig: Field Data ist maßgeblich für Google-Ranking, nicht Lab Data. Ein PageSpeed-Score von 100 in Lighthouse bedeutet nicht automatisch gute Core Web Vitals für echte Nutzer.
Nächste Schritte
Wenn Sie die Core Web Vitals Ihrer Website systematisch verbessern wollen, bieten wir ein kostenloses Website-Audit an. Wir messen Field Data und Lab Data, identifizieren die Top-5-Optimierungs-Hebel und liefern eine priorisierte Roadmap.
Für Detail-Informationen zu den einzelnen Metriken: LCP-Glossar, INP-Glossar, CLS-Glossar. Wenn Ihre Seite grundsätzlich auf einem modernen Tech-Stack läuft (Next.js, React, Vue), sind Werte unter 1,5 Sekunden LCP und unter 100 Millisekunden INP problemlos erreichbar.
Core Web Vitals sind kein Nice-to-have mehr. Sie sind der Grundstein für sowohl klassisches SEO als auch GEO — wer hier investiert, profitiert mehrfach.
