Vollstaendiger Core Web Vitals Leitfaden 2026

"Die Seite war zu langsam, also bin ich gegangen"

53% der Benutzer verlassen die Seite, wenn das Laden laenger als 3 Sekunden dauert. Google hat Core Web Vitals eingefuehrt, um diese Benutzererfahrung in den Rankings zu reflektieren.

Stand 2026 sind Core Web Vitals ein wichtiger Ranking-Faktor fuer Mobile SEO.

Was sind Core Web Vitals?

Core Web Vitals sind 3 Schluesselmetriken, die die Benutzererfahrung messen.

Metriken 2026

Metrik	Misst	Gut	Verbesserung noetig	Schlecht
LCP	Ladegeschwindigkeit	≤2,5s	≤4s	>4s
INP	Interaktionsreaktion	≤200ms	≤500ms	>500ms
CLS	Visuelle Stabilitaet	≤0,1	≤0,25	>0,25

Metrik-Aenderung (2024)

FID (First Input Delay) → INP (Interaction to Next Paint)

FID: Nur erste Eingabe gemessen
INP: Misst Reaktionsfaehigkeit aller Interaktionen (umfassender)

LCP (Largest Contentful Paint)

Definition

Die Zeit, die das groesste Inhaltselement auf der Seite benoetigt, um auf dem Bildschirm gerendert zu werden

Gemessene Elemente

Element	Beispiel
`<img>`	Hero-Bild
`<video>` Poster	Video-Thumbnail
CSS `background-image`	Hintergrundbild
Textbloecke	`<h1>`, `<p>`, etc.

Optimierungsmethoden

1. Bildoptimierung

<!-- ❌ Langsam -->
<img src="hero.png" alt="Hero">

<!-- ✅ Optimiert -->
<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
>

2. Server-Antwortzeit (TTFB)

Ziel: TTFB < 200ms

Verbesserungsmethoden:
- CDN verwenden
- Serverseitiges Caching
- Datenbankabfragen optimieren
- HTTP/2 oder HTTP/3

3. Render-blockierende Ressourcen entfernen

<!-- ❌ Render-blockierend -->
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>

<!-- ✅ Optimiert -->
<link rel="stylesheet" href="critical.css">
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<script src="app.js" defer></script>

4. Kritisches CSS inline

<head>
  <style>
    /* Nur fuer ersten Bildschirm benoetigtes CSS */
    .hero { ... }
    .header { ... }
  </style>
  <link rel="preload" href="full.css" as="style">
</head>

5. Preload-Hinweise

<head>
  <!-- LCP-Bild vorladen -->
  <link rel="preload" href="hero.webp" as="image" fetchpriority="high">

  <!-- Webfonts vorladen -->
  <link rel="preload" href="font.woff2" as="font" crossorigin>
</head>

INP (Interaction to Next Paint)

Definition

Die Zeit von der Benutzerinteraktion (Klick, Tippen, Tastendruck) bis zum naechsten Bildschirm-Update

Unterschied zu FID

FID	INP
Nur erste Eingabe	Alle Interaktionen
Nur Eingabeverzoegerung	Gesamte Reaktionszeit
2024 eingestellt	Maerz 2024 ersetzt

Was gemessen wird

Klicks (Maus, Touch)
Tastendruecke
Tippen (mobil)

Optimierungsmethoden

1. Main-Thread-Blockierung verhindern

// ❌ Main-Thread blockierend
function heavyTask() {
  for (let i = 0; i < 1000000; i++) {
    // Schwere Berechnung
  }
}

// ✅ In Chunks aufteilen
async function heavyTaskChunked() {
  const chunks = splitIntoChunks(data, 1000);
  for (const chunk of chunks) {
    processChunk(chunk);
    await new Promise(r => setTimeout(r, 0)); // Yield
  }
}

2. Debounce/Throttle

// ❌ Jedes Mal ausfuehren
input.addEventListener('input', search);

// ✅ Debounce
input.addEventListener('input', debounce(search, 300));

3. Web Workers verwenden

// Main-Thread
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

4. Event-Handler optimieren

// ❌ Schwerer Handler
button.onclick = () => {
  computeData();      // Schwer
  updateDOM();        // DOM-Manipulation
  sendAnalytics();    // Netzwerk
};

// ✅ Asynchrone Trennung
button.onclick = async () => {
  requestAnimationFrame(() => {
    updateDOM();      // Schnelles UI-Update zuerst
  });

  await computeDataAsync();
  sendAnalytics();    // Spaeter
};

5. Script-Groesse reduzieren

// Code Splitting
const Modal = React.lazy(() => import('./Modal'));

// Tree Shaking
import { specific } from 'library'; // Vollstaendigen Import vermeiden

CLS (Cumulative Layout Shift)

Definition

Kumulative Punktzahl unerwarteter Layout-Verschiebungen waehrend des Seitenladens

Problemszenario

Benutzer: Kurz davor, einen Button zu klicken
Werbung laedt: Layout verschiebt sich
Ergebnis: Klickt auf falschen Button

Optimierungsmethoden

1. Bild/Video-Dimensionen angeben

<!-- ❌ Keine Dimensionen (verursacht CLS) -->
<img src="photo.jpg" alt="Photo">

<!-- ✅ Dimensionen angeben -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

<!-- ✅ aspect-ratio verwenden -->
<img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

2. Platz fuer Werbung/Embeds reservieren

/* Werbeplatz vorab reservieren */
.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

/* Oder aspect-ratio verwenden */
.video-embed {
  aspect-ratio: 16/9;
  width: 100%;
}

3. Webfont-Optimierung

/* ❌ Verursacht FOUT/FOIT */
@font-face {
  font-family: 'Custom';
  src: url('font.woff2');
}

/* ✅ font-display verwenden */
@font-face {
  font-family: 'Custom';
  src: url('font.woff2');
  font-display: swap; /* oder optional */
}

<!-- Fonts vorladen -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

4. Dynamische Inhalte behandeln

// ❌ Ploetzliches Einfuegen
container.innerHTML = newContent;

// ✅ Platz vor dem Einfuegen reservieren
container.style.minHeight = '200px';
container.innerHTML = newContent;

/* Oder min-height in CSS setzen */
.dynamic-content {
  min-height: 200px;
}

5. Transform-Animationen verwenden

/* ❌ Loest Layout aus */
.element {
  animation: slide 0.3s;
}
@keyframes slide {
  from { top: -100px; }
  to { top: 0; }
}

/* ✅ Transform verwenden (keine Layout-Verschiebung) */
@keyframes slide {
  from { transform: translateY(-100px); }
  to { transform: translateY(0); }
}

Messwerkzeuge

Felddaten (Echte Benutzer)

Tool	Datenquelle	Merkmale
Chrome UX Report	Chrome-Benutzer	28-Tage-Aggregation
Search Console	CrUX-basiert	Google offiziell
PageSpeed Insights	CrUX + Lighthouse	Echtzeit-Analyse

Labordaten (Simulation)

Tool	Zweck
Lighthouse	In Chrome DevTools integriert
WebPageTest	Detaillierte Analyse, Vergleichstests
GTmetrix	Visuelle Berichte

Chrome DevTools

1. F12 (Entwicklertools)
2. Performance-Tab
3. Record → Seite neu laden
4. Web Vitals-Abschnitt pruefen

Framework-spezifische Optimierung

Next.js

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  experimental: {
    optimizeCss: true,
  },
};

// Komponente
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // LCP-Bild
      placeholder="blur"
    />
  );
}

React

// Code Splitting
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// Suspense
<Suspense fallback={<Skeleton />}>
  <HeavyComponent />
</Suspense>

Vanilla JavaScript

<!-- Script-Laden -->
<script src="critical.js"></script>
<script src="app.js" defer></script>
<script src="analytics.js" async></script>

<!-- Bilder lazy laden -->
<img src="below-fold.jpg" loading="lazy" alt="Below fold">

Verbesserungsprioritaet

Nach Auswirkung

Rang	Optimierungspunkt	Effekt
1	LCP-Bildoptimierung	LCP ↓
2	Render-blockierendes JS entfernen	LCP, INP ↓
3	Bild/Embed-Dimensionen angeben	CLS ↓
4	CDN verwenden	LCP ↓
5	Webfont-Optimierung	CLS ↓
6	JS-Bundle-Splitting	INP ↓

Schnelle Erfolge

<!-- 1. LCP-Bild vorladen -->
<link rel="preload" href="hero.webp" as="image">

<!-- 2. Bilddimensionen angeben -->
<img width="800" height="600" ...>

<!-- 3. JS defer -->
<script src="app.js" defer></script>

Haeufig gestellte Fragen

F1: Wie stark beeinflusst Core Web Vitals das Ranking?

A: Es ist ein direkter Ranking-Faktor, aber nicht wichtiger als Inhaltsqualitaet. Es spielt eine entscheidende Rolle, wenn die Inhaltsqualitaet zwischen konkurrierenden Seiten aehnlich ist.

F2: Warum sind Mobile- und Desktop-Werte unterschiedlich?

A: Google verwendet hauptsaechlich Mobile-Daten. Priorisieren Sie die Mobile-Optimierung.

F3: Warum wird "Keine Daten" angezeigt?

A: Es gibt nicht genuegend Traffic-Daten im Chrome UX Report. Die Website hat moeglicherweise wenig Traffic oder ist neu.

F4: Welche Metrik sollte ich zuerst verbessern?

A: Im Allgemeinen:

LCP - Auffaelligste Verbesserung
CLS - Reduziert Benutzerfrustation
INP - Wichtig fuer interaktionsreiche Websites

F5: Was wenn Third-Party-Scripts das Problem sind?

Unnoetige Scripts entfernen
async oder defer Attribute verwenden
Web Worker-Bibliotheken wie Partytown verwenden

Checkliste

LCP-Optimierung

LCP-Bild vorladen
Bildoptimierung (WebP/AVIF)
Render-blockierende Ressourcen entfernen
TTFB < 200ms
CDN verwenden

INP-Optimierung

Schwere JS-Chunks aufteilen
Debounce/Throttle anwenden
Unnoetiges JS entfernen
Third-Party-Scripts bereinigen

CLS-Optimierung

Bild/Video-Dimensionen angeben
Werbeplatz reservieren
font-display setzen
Platz fuer dynamische Inhalte reservieren

Fazit

Core Web Vitals Grundlagen:

LCP ≤ 2,5s: Groessten Inhalt schnell rendern
INP ≤ 200ms: Sofort auf Interaktionen reagieren
CLS ≤ 0,1: Keine Layout-Verschiebungen

Mobile-Optimierung ist der Schluessel.

Verwandte Tools

Tool	Zweck
PageSpeed Analyzer	Core Web Vitals messen
Bildoptimierer	WebP-Konvertierung
Meta-Tag-Generator	SEO-Meta-Tags

Vollstaendiger Core Web Vitals Leitfaden 2026

Was sind Core Web Vitals?

Metriken 2026

Metrik-Aenderung (2024)

LCP (Largest Contentful Paint)

Definition

Gemessene Elemente

Optimierungsmethoden

1. Bildoptimierung

2. Server-Antwortzeit (TTFB)

3. Render-blockierende Ressourcen entfernen

4. Kritisches CSS inline

5. Preload-Hinweise

INP (Interaction to Next Paint)

Definition

Unterschied zu FID

Was gemessen wird

Optimierungsmethoden

1. Main-Thread-Blockierung verhindern

2. Debounce/Throttle

3. Web Workers verwenden

4. Event-Handler optimieren

5. Script-Groesse reduzieren

CLS (Cumulative Layout Shift)

Definition

Problemszenario

Optimierungsmethoden

1. Bild/Video-Dimensionen angeben

2. Platz fuer Werbung/Embeds reservieren

3. Webfont-Optimierung

4. Dynamische Inhalte behandeln

5. Transform-Animationen verwenden

Messwerkzeuge

Felddaten (Echte Benutzer)

Labordaten (Simulation)

Chrome DevTools

Framework-spezifische Optimierung

Next.js

React

Vanilla JavaScript

Verbesserungsprioritaet

Nach Auswirkung

Schnelle Erfolge

Haeufig gestellte Fragen

F1: Wie stark beeinflusst Core Web Vitals das Ranking?

F2: Warum sind Mobile- und Desktop-Werte unterschiedlich?

F3: Warum wird "Keine Daten" angezeigt?

F4: Welche Metrik sollte ich zuerst verbessern?

F5: Was wenn Third-Party-Scripts das Problem sind?

Checkliste

LCP-Optimierung

INP-Optimierung

CLS-Optimierung

Fazit

Über den Autor

Toolypet Team