Core Web Vitals 2026: LCP, INP und CLS — was für Google-Rankings zählt

Core Web Vitals sind seit dem Page Experience Update 2021 offizieller Rankingfaktor bei Google. 2024 ersetzte INP (Interaction to Next Paint) den alten Wert FID (First Input Delay). Wer seine Rankings schützen oder verbessern will, muss 2026 alle drei Metriken im Griff haben.

Dieser Artikel erklärt die drei Kennzahlen technisch präzise, zeigt wie sie gemessen werden und welche Optimierungen wirklich messbar wirken.

Die drei Core Web Vitals und ihre Schwellenwerte

LCP — Largest Contentful Paint

LCP misst, wie lange es dauert, bis das größte sichtbare Element (Bild, Textblock, Video-Thumbnail) im Viewport geladen ist. Schwellenwerte:

Wert	Bewertung
≤ 2,5 Sekunden	Gut
2,5 – 4,0 Sekunden	Verbesserungsbedarf
> 4,0 Sekunden	Schlecht

Was als LCP-Element zählt: <img>, <image> (SVG), background-image via CSS, <video> Poster-Frame, sowie Textblöcke in Block-Level-Elementen.

Häufigste LCP-Killer:

• Kein loading="eager" + fetchpriority="high" auf dem Hero-Bild
• Webfonts ohne <link rel="preload">
• Großes, unkomprimiertes JPEG als Hintergrundbild
• Serverseitige Render-Verzögerung durch TTFB > 600ms

INP — Interaction to Next Paint

INP ist seit März 2024 offiziell Core Web Vital (ersetzt FID). Es misst die Reaktionszeit der Seite auf alle Benutzerinteraktionen — nicht nur auf den ersten Klick. Schwellenwerte:

Wert	Bewertung
≤ 200ms	Gut
200 – 500ms	Verbesserungsbedarf
> 500ms	Schlecht

INP ist für dynamische Seiten mit JavaScript-intensiven Interaktionen deutlich kritischer als FID es war. Ein langer JavaScript-Main-Thread-Task blockiert die Antwort auf Klicks, Formular-Eingaben und Scroll-Events.

Häufigste INP-Probleme:

• Tracking-Skripte (GA4, Facebook Pixel) ohne async oder Partytown
• Große React/Vue/Svelte-Bundle ohne Code Splitting
• Schwere Animations-Libraries auf dem Main Thread
• Nicht debounced Event-Handler bei Scroll/Input

CLS — Cumulative Layout Shift

CLS misst visuelle Instabilität: wie sehr verschieben sich Elemente beim Laden der Seite? Schwellenwert:

Wert	Bewertung
≤ 0,1	Gut
0,1 – 0,25	Verbesserungsbedarf
> 0,25	Schlecht

Häufigste CLS-Ursachen:

• Bilder ohne width/height-Attribut (Browser reserviert keinen Platz)
• Webfonts die nach dem ersten Text-Render nachladen (FOUT — Flash of Unstyled Text)
• Banner oder Cookie-Consent-Dialoge die Inhalte verschieben
• Dynamisch nachgeladene Inhalte (Anzeigen, Embeds) ohne Platzhalter

Wie Sie Core Web Vitals messen

Feldmessungen vs. Lab-Messungen

Der wichtige Unterschied: Google nutzt für Rankings Feldmessungen (CrUX — Chrome UX Report), keine Lab-Messungen. PageSpeed Insights zeigt beide.

PageSpeed Insights → Felddaten = echte Nutzer-Messungen (28-Tage-Median)
PageSpeed Insights → Labordaten = simulierter Test (Lighthouse)

Wenn Ihre Lab-Werte gut sind, aber die Felddaten schlecht: Prüfen Sie Third-Party-Skripte, die im simulierten Test nicht feuern (Chat-Widgets, Tag Manager, A/B-Test-Tools).

Mess-Tools im Überblick

PageSpeed Insights (pagespeed.web.dev): Kostenlos, zeigt Feld- und Lab-Daten, identifiziert häufige Probleme.

Google Search Console → Core Web Vitals: Zeigt welche Seiten-Gruppen „Gut”, „Verbesserungsbedarf” oder „Schlecht” sind. Basis: CrUX-Felddaten.

Lighthouse CLI (für CI-Integration):

npx lighthouse https://ihre-domain.de --output json --only-categories=performance

Chrome DevTools Performance Panel: Für INP-Diagnose den „Interaction” Tab nutzen — zeigt einzelne Klicks mit Processing-Time.

Unseren kostenlosen SEO-Audit-Schnellcheck können Sie nutzen, um erste Performance-Werte ohne Tool-Installation zu erhalten.

12 Optimierungen die wirklich wirken

LCP-Optimierung

1. Hero-Bild mit hoher Priorität laden

<img
  src="/images/hero.webp"
  alt="Webdesigner Sachsen – Hero"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
  decoding="async"
/>

2. WebP oder AVIF statt JPEG

WebP ist 25–35% kleiner als optimiertes JPEG bei gleicher Qualität. AVIF nochmals 20–30% kleiner, aber ältere Browser-Support beachten. Für breite Kompatibilität:

<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img src="/images/hero.jpg" alt="..." loading="eager" fetchpriority="high" />
</picture>

3. Webfonts preloaden

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

4. TTFB optimieren

Für statische Sites: CDN oder Netlify Edge mit Caching. Für WordPress: WP Rocket mit Varnish-Cache aktivieren. TTFB-Ziel: unter 200ms.

INP-Optimierung

5. Third-Party-Skripte async laden

<!-- Statt synchron: -->
<script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>

<!-- Async: -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>

6. Long Tasks aufbrechen

JavaScript-Tasks über 50ms blockieren den Main Thread. Mit setTimeout oder scheduler.yield() aufbrechen:

async function processItems(items) {
  for (const item of items) {
    processItem(item);
    // Nach jedem Item yielden, damit der Browser Interaktionen verarbeiten kann
    await scheduler.yield?.() ?? new Promise(r => setTimeout(r, 0));
  }
}

7. Event-Handler debouncing

const handleSearch = debounce((query) => {
  fetchResults(query);
}, 300);

CLS-Optimierung

8. Bildabmessungen immer angeben

<!-- Immer width + height setzen — Browser reserviert Platz -->
<img src="/images/team.webp" width="400" height="300" alt="Team Wender Media" />

9. Schrift-Display optimieren

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap; /* Fallback-Schrift während Laden, dann wechseln */
}

10. Cookie-Banner ohne Layout-Shift

Cookie-Banner die Content nach unten schieben, verursachen hohen CLS. Lösung: Banner als position: fixed am unteren Viewport-Rand oder als Overlay — nie als Block-Level-Element über dem Content.

Allgemeine Performance

11. Kritisches CSS inlinen

<style>
  /* Above-the-fold CSS inline — nur 2–5KB */
  .hero { ... }
  .nav { ... }
</style>
<link rel="preload" href="/styles/main.css" as="style" onload="this.rel='stylesheet'" />

12. Caching-Header setzen

# netlify.toml
[[headers]]
  for = "/images/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/fonts/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Astros struktureller Performance-Vorteil

Für reine Content- und Marketing-Websites wie Unternehmens- und Serviceseiten in Sachsen bietet Astro einen strukturellen Vorteil: Zero JavaScript by default. Jede Seite wird als statisches HTML ausgeliefert — kein Client-Side-Render, kein Hydration-Overhead.

Unsere Core Web Vitals auf typischen Astro-Projekten:

• LCP: 0,8 – 1,4 Sekunden
• INP: 50 – 90ms (messbar nur bei Seiten mit Interaktivität)
• CLS: 0 – 0,03

Zum Vergleich: Der Google PageSpeed-Durchschnitt für KMU-Websites liegt bei LCP > 3,5 Sekunden.

Fazit und nächste Schritte

Core Web Vitals 2026 sind ein messbarer Rankingfaktor. INP als neuer Standard ersetzt FID und ist deutlich anspruchsvoller — besonders für WordPress-Sites mit vielen Plugins.

Sofortmaßnahmen:

1. PageSpeed Insights für Ihre Homepage aufrufen
2. Felddaten prüfen (nicht nur Lab-Daten)
3. GSC → Core Web Vitals → rote und gelbe Seiten identifizieren

Für eine detaillierte Analyse und konkrete Optimierungen sprechen Sie uns an. Wir bieten professionelle Website-Optimierung für Unternehmen in Sachsen — mit messbaren Ergebnissen.

Weitere Optimierungsmaßnahmen im Überblick finden Sie in unserem Artikel PageSpeed Insights >90: 12 Hebel die wirklich wirken.