Was sind Core Web Vitals und warum sind sie wichtig?

Core Web Vitals sind Google's Metriken für Nutzererfahrung – und seit 2021 ein offizieller Ranking-Faktor.

20-40 %

Traffic-Verlust

bei Websites mit schlechten Core Web Vitals

Als Performance-Spezialist habe ich über 200 Websites optimiert. In diesem Guide zeige ich Ihnen die exakten Schritte, mit denen Sie Ihre Core Web Vitals in den grünen Bereich bringen.

Die 4 Core Web Vitals 2026 (Update!)

Google hat 2024 die Core Web Vitals erweitert. Statt 3 gibt es jetzt 4 Metriken:

1. LCP – Largest Contentful Paint

Was es misst: Wie schnell der größte sichtbare Inhalt lädt

Status	Wert
✅ Gut	< 2,5 Sekunden
⚠️ Verbesserungswürdig	2,5 - 4,0 Sekunden
❌ Schlecht	> 4,0 Sekunden

2. INP – Interaction to Next Paint

Wichtig: INP ersetzt FID seit März 2024!

INP misst alle Interaktionen während der Sitzung – nicht nur die erste wie FID.

Was es misst: Reaktionszeit bei Nutzer-Interaktionen

Status	Wert
✅ Gut	< 200 ms
⚠️ Verbesserungswürdig	200 - 500 ms
❌ Schlecht	> 500 ms

3. CLS – Cumulative Layout Shift

Was es misst: Unerwartete Layout-Verschiebungen beim Laden

Status	Wert
✅ Gut	< 0,1
⚠️ Verbesserungswürdig	0,1 - 0,25
❌ Schlecht	> 0,25

4. FCP – First Contentful Paint

Was es misst: Zeit bis zum ersten sichtbaren Inhalt

Status	Wert
✅ Gut	< 1,8 Sekunden
⚠️ Verbesserungswürdig	1,8 - 3,0 Sekunden
❌ Schlecht	> 3,0 Sekunden

LCP optimieren: 7 bewährte Techniken

Problem: Hero-Bild lädt zu langsam

Häufigste LCP-Probleme:

Lösung 1: Moderne Bildformate nutzen

WebP und AVIF sind 25-35% kleiner als JPEG bei gleicher Qualität:

✓ Moderne Bildformate

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

<!-- Ergebnis: LCP von 4,2s auf 2,1s (50% Verbesserung) -->

Lösung 2: Preload für kritische Ressourcen

✓ Preload für LCP-Element

<link rel="preload" as="image"
      href="hero-image.webp"
      imagesrcset="hero-image-320w.webp 320w,
                   hero-image-640w.webp 640w,
                   hero-image-1280w.webp 1280w">

Lösung 3: Responsive Images mit srcset

✓ Responsive Images

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

<!-- Mobile Nutzer laden nur 400px statt 1200px → 70% Dateneinsparung -->

Lösung 4: CDN für schnellere Auslieferung

Setup	LCP
Ohne CDN	3,8s
Mit Cloudflare CDN	1,9s

CDNs reduzieren Latenz durch geografisch verteilte Server.

Lösung 5: Critical CSS Inline

✓ Critical CSS Pattern

<style>
  /* Critical CSS inline im <head> */
  .hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 80vh;
  }
  .hero-title {
    font-size: clamp(2rem, 5vw, 4rem);
  }
</style>

<!-- Rest-CSS async laden -->
<link rel="preload" href="styles.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

Lösung 6: Font Loading optimieren

✓ Font Display Swap

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Verhindert Flash of Invisible Text */
}

Lösung 7: Server-Response-Time optimieren

Redis/Memcached Caching
Database Query Optimierung
HTTP/2 oder HTTP/3 nutzen
Gzip/Brotli Kompression

INP optimieren: Interaktivität verbessern

Was ist INP und warum ersetzt es FID?

Metrik	Was es misst
FID (alt)	Nur die erste Interaktion → unvollständig
INP (neu)	Alle Interaktionen während der Sitzung → aussagekräftiger

Häufigste INP-Probleme

JavaScript blockiert Main Thread
Event Handler zu langsam
Third-Party Scripts blockieren Interaktionen

Lösung 1: JavaScript Code-Splitting

✗ Großes Bundle

// Alle 500 KB JavaScript auf einmal laden
import { alles } from './giant-bundle.js';

// Problem: Main Thread blockiert

✓ Code Splitting

// Nur laden, was gebraucht wird (Dynamic Import)
button.addEventListener('click', async () => {
  const module = await import('./feature.js');
  module.handleClick();
});

// Ergebnis: INP von 380ms auf 150ms verbessert

Lösung 2: Web Workers für Heavy Tasks

✓ Web Worker Pattern

// main.js - UI bleibt reaktiv!
const worker = new Worker('calculator.worker.js');

worker.postMessage({ action: 'calculate', data: largeDataset });

worker.onmessage = (e) => {
  console.log('Ergebnis:', e.data);
};

Lösung 3: Debouncing für häufige Events

✗ Ohne Debouncing

// Ohne Debouncing: 100+ Events pro Sekunde
input.addEventListener('input', handleInput);

✓ Mit Debouncing

// Mit Debouncing: Max 1 Event alle 300ms
input.addEventListener('input', debounce(handleInput, 300));

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

Lösung 4: requestIdleCallback für Non-Critical Tasks

✓ Idle Callback

// Analytics erst senden, wenn Browser idle ist
requestIdleCallback(() => {
  sendAnalytics(userData);
});

CLS optimieren: Layout Shifts vermeiden

Was verursacht Layout Shifts?

Top 5 CLS-Killer:

Bilder ohne Width/Height
Dynamische Werbung/Embeds
Web Fonts laden (FOIT/FOUT)
JavaScript-eingefügter Content
Animationen mit Layout-Properties

Lösung 1: Immer Width & Height angeben

✗ Ohne Dimensionen

<img src="product.jpg" alt="Product">
<!-- Browser weiß nicht, wie viel Platz er reservieren soll -->

✓ Mit Dimensionen

<img src="product.jpg"
     alt="Product"
     width="800"
     height="600"
     style="max-width: 100%; height: auto;">
<!-- Browser reserviert exakt richtigen Platz -->

<!-- Ergebnis: CLS von 0.45 auf 0.02 reduziert -->

Lösung 2: aspect-ratio für responsive Elemente

✓ CSS aspect-ratio

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.product-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

Lösung 3: Platzhalter für dynamischen Content

✓ Reservierter Platz

<!-- Cookie Banner mit fester Höhe -->
<div class="cookie-banner" style="min-height: 120px;">
  <!-- Content wird hier eingefügt -->
</div>

Lösung 4: transform statt position/top/left

✗ Position (Layout Shift)

.modal {
  top: 50%; /* Verändert Layout! */
  left: 50%;
}

✓ Transform (kein Layout Shift)

.modal {
  transform: translate(-50%, -50%); /* Kein Reflow! */
}

Lösung 5: font-display: swap + Fallback Metrics

✓ Font Display mit Fallback Metrics

@font-face {
  font-family: 'CustomFont';
  src: url('/font.woff2') format('woff2');
  font-display: swap;
  /* Neue size-adjust API */
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

FCP optimieren: Schneller First Paint

Kritische Rendering-Pfad optimieren

Ziel: Reduzieren Sie Render-blockierende Ressourcen

Lösung 1: CSS Critical Path

✓ Critical CSS Pattern

<!-- 1. Critical CSS inline -->
<style>
  /* Above-the-fold CSS hier */
</style>

<!-- 2. Rest-CSS async laden -->
<link rel="preload" href="/styles.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>

Lösung 2: JavaScript async/defer

✗ Blocking

<!-- Blocking (schlecht) -->
<script src="app.js"></script>

✓ Non-Blocking

<!-- Non-blocking (gut) -->
<script src="app.js" defer></script>
<!-- oder -->
<script src="analytics.js" async></script>

<!-- Unterschied:
defer: Lädt parallel, führt nach DOM aus
async: Lädt parallel, führt sofort aus -->

Lösung 3: Resource Hints

✓ Resource Hints

<!-- DNS vorbereiten für externe Ressourcen -->
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- Wichtige Ressourcen vorausladen -->
<link rel="preload" href="/fonts/Inter-VariableFont.woff2"
      as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

Real-World Case Study: Anwalts-Website

Ausgangssituation

Kanzlei-Website mit schlechten Core Web Vitals:

Vorher

Metrik	Wert	Status
LCP	4,8s	❌ schlecht
INP	420ms	⚠️ verbesserungswürdig
CLS	0,32	❌ schlecht
FCP	3,2s	❌ schlecht

Probleme:

Große Header-Bilder (2,5 MB!)
Nicht optimierte Google Fonts
Massive JavaScript Bundles
Keine Bildgrößen angegeben

Optimierungen durchgeführt

Bilder

Konvertierung zu WebP
Responsive images mit srcset
Lazy Loading für below-the-fold

Fonts

Self-hosted statt Google Fonts
font-display: swap
Preload für kritische Fonts

JavaScript

Code Splitting
Treeshaking
Defer für non-critical scripts

CSS

Critical CSS inline
Unused CSS entfernt
CSS-in-JS optimiert

Ergebnisse nach Optimierung

Nachher

Metrik	Wert	Verbesserung
LCP	1,9s ✅	60%
INP	125ms ✅	70%
CLS	0,04 ✅	88%
FCP	1,2s ✅	63%

Business Impact

+34 %

Conversion Rate

+28 %

Organischer Traffic

-42 %

Bounce Rate

Tools zum Messen der Core Web Vitals

Google PageSpeed Insights

Kostenlos: pagespeed.web.dev

Field Data (echte Nutzer)
Lab Data (kontrollierte Tests)
Konkrete Optimierungsvorschläge

Google Search Console

Core Web Vitals Report:

Zeigt problematische URLs
Gruppiert nach Problemtyp
Zeigt zeitliche Entwicklung

Chrome DevTools

Lighthouse:

F12 drücken
Lighthouse Tab
"Analyze page load" klicken

Web Vitals Extension

Chrome Extension von Google:

Zeigt Echtzeit-Metriken
Warnt bei schlechten Werten
Perfekt für Testing

Checkliste: Core Web Vitals Optimierung

LCP-Optimierung

Moderne Bildformate (WebP/AVIF)
Responsive Images mit srcset
Critical resources preloaden
CDN nutzen
Server Response Time < 200ms

INP-Optimierung

Code Splitting implementieren
Web Workers für Heavy Tasks
Third-Party Scripts optimieren
Event Handler debounced
requestIdleCallback nutzen

CLS-Optimierung

Width/Height für alle Images
aspect-ratio für responsive Elemente
font-display: swap
Platzhalter für dynamischen Content
transform statt position

FCP-Optimierung

Critical CSS inline
JavaScript async/defer
Resource Hints (preconnect, dns-prefetch)
Render-blockierende Ressourcen minimieren

Häufige Fragen (FAQ)

Wie oft sollte ich Core Web Vitals prüfen?

Mindestens monatlich im Search Console Report. Bei aktiver Optimierung wöchentlich mit PageSpeed Insights.

Beeinflussen Core Web Vitals Rankings wirklich?

Ja, definitiv. Google bestätigte: Bei gleicher Inhaltsqualität rankt die schnellere Seite höher. Studien zeigen durchschnittlich 20-30% Traffic-Steigerung nach Optimierung.

Welche Metrik ist am wichtigsten?

LCP hat den größten Impact auf Nutzererfahrung und Rankings. Aber alle 4 Metriken müssen grün sein für optimale Performance.

Muss ich alle Seiten optimieren?

Priorisieren Sie:

Homepage
Top Landing Pages (Traffic-Quellen checken!)
Conversion-kritische Seiten
Alle anderen Seiten

Möchten Sie Ihre Core Web Vitals optimieren?

Wir bieten kostenlosen Performance-Check und professionelle Optimierung für Ihre Website.

Kostenlosen Check anfordern Mehr zu Performance

Über den Autor: Arnold Wender ist seit 2007 auf Website-Performance spezialisiert und hat über 200 Websites auf perfekte Core Web Vitals optimiert.