Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, mit denen Google die User Experience einer Website misst. Seit 2021 sind sie ein offizieller Ranking-Faktor.

Übersetzt: Wenn deine Website bei diesen Werten schlecht abschneidet, kann das dein Google-Ranking kosten.

Die drei Metriken im Überblick

Google bewertet deine Seite als "bestanden", wenn mindestens 75% der Seitenaufrufe gute Werte erreichen.

LCP – Largest Contentful Paint

Was es misst

LCP misst, wie lange es dauert, bis das größte sichtbare Element im Viewport vollständig gerendert ist. Das ist meist:

• Das Hauptbild (Hero Image)
• Eine große Überschrift
• Ein Video-Thumbnail
• Ein großer Textblock

Warum es wichtig ist

LCP ist der Moment, in dem der Nutzer denkt: "Ok, die Seite ist da." Alles davor fühlt sich wie Warten an.

Häufige Probleme

1. Große, unkomprimierte Bilder

   • Hero-Bilder mit 2+ MB
   • Falsche Bildformate (PNG statt WebP)

2. Langsame Server-Response

   • Billiges Shared Hosting
   • Keine CDN-Nutzung
   • Datenbank-Queries nicht optimiert

3. Render-blockierende Ressourcen

   • CSS im Head ohne Critical CSS
   • JavaScript das Rendering verhindert

4. Client-Side Rendering

   • React/Vue-Apps ohne Server-Side Rendering
   • Content erst nach JavaScript-Ausführung sichtbar

So verbesserst du LCP

Quick Wins:

<!-- Hauptbild vorher laden -->
<link rel="preload" as="image" href="hero.webp">

<!-- Kritisches CSS inline -->
<style>
  .hero { background: url('hero.webp'); min-height: 500px; }
</style>

<!-- Rest der CSS verzögert -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

Checkliste:

• [ ] Hero-Bild komprimiert (<200 KB)
• [ ] WebP-Format verwenden
• [ ] Server-Response unter 200ms
• [ ] Kritisches CSS inline
• [ ] JavaScript mit defer/async laden

INP – Interaction to Next Paint

Was es misst

INP (früher FID) misst, wie lange es dauert, bis die Seite auf eine Nutzeraktion reagiert und den nächsten Frame rendert. Das umfasst:

• Klicks auf Buttons
• Tippen in Eingabefelder
• Tastatureingaben

Warum es wichtig ist

Wenn ein Nutzer klickt und nichts passiert, fühlt sich die Seite "kaputt" an. Auch wenn sie es nur für 500ms ist – das reicht für einen schlechten Eindruck.

Häufige Probleme

1. Schweres JavaScript

   • Große Frameworks vollständig geladen
   • Third-Party-Scripts (Tracking, Chat, Ads)

2. Long Tasks

   • JavaScript-Aufgaben die >50ms dauern
   • Blockieren den Main Thread

3. Zu viele Event Listeners

   • Jeder Listener muss evaluiert werden

4. Ineffiziente Animationen

   • JavaScript-Animationen statt CSS
   • Animationen die Repaints auslösen

So verbesserst du INP

Quick Wins:

// Long Tasks aufbrechen
function processLargeData(data) {
  const chunk = data.splice(0, 100);
  processChunk(chunk);

  if (data.length > 0) {
    // Nächsten Chunk async verarbeiten
    requestIdleCallback(() => processLargeData(data));
  }
}

// Event Handler debouncing
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

Checkliste:

• [ ] Unnötige Scripts entfernen
• [ ] Third-Party-Scripts evaluieren
• [ ] JavaScript Code-Splitting nutzen
• [ ] Web Workers für schwere Berechnungen
• [ ] Long Tasks identifizieren und aufbrechen

CLS – Cumulative Layout Shift

Was es misst

CLS misst, wie stark sich sichtbare Elemente während des Ladens verschieben. Jeder unerwartete Layout-Shift wird addiert.

Warum es wichtig ist

Kennst du das? Du willst einen Button klicken, und plötzlich springt alles – du klickst auf die Werbung. CLS misst genau diese Frustration.

Häufige Probleme

1. Bilder ohne Dimensionen

   <!-- Schlecht -->
   <img src="bild.jpg">
   
   <!-- Gut -->
   <img src="bild.jpg" width="800" height="600">

2. Dynamisch eingefügte Inhalte

   • Werbebanner die nachladen
   • Cookie-Banner ohne reservierten Platz
   • "Ähnliche Artikel" die nachgeladen werden

3. Web Fonts (FOUT/FOIT)

   • Schrift wechselt von Fallback zu Custom Font
   • Größenunterschiede zwischen Fonts

4. Animationen ohne transform

   • Animationen mit top, left, width, height
   • Lösen Layout-Neuberechnungen aus

So verbesserst du CLS

Quick Wins:

<!-- Bilder mit aspect-ratio -->
<img
  src="bild.jpg"
  width="800"
  height="600"
  style="aspect-ratio: 4/3; width: 100%; height: auto;"
>

<!-- Platzhalter für dynamische Inhalte -->
<div class="ad-container" style="min-height: 250px;">
  <!-- Werbung wird hier geladen -->
</div>

/* Fonts vorher laden */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Oder optional für weniger CLS */
}

/* Animationen mit transform statt position */
.animate {
  /* Schlecht */
  /* left: 0; transition: left 0.3s; */

  /* Gut */
  transform: translateX(0);
  transition: transform 0.3s;
}

Checkliste:

• [ ] Alle Bilder haben width/height
• [ ] Videos/Iframes haben feste Dimensionen
• [ ] Werbeflächen reserviert
• [ ] Fonts mit font-display: swap
• [ ] Keine Inhalte über sichtbarem Content einfügen

So misst du Core Web Vitals

Für schnelle Checks

PageSpeed Insights (pagespeed.web.dev)

• Zeigt Feld- und Labdaten
• Konkrete Verbesserungsvorschläge
• Mobil und Desktop getrennt

Für tiefere Analyse

Chrome DevTools → Performance Tab

• Detaillierte Timeline
• Zeigt jeden Layout Shift
• JavaScript-Profiling

Web Vitals Extension (Chrome)

• Echtzeit-Anzeige während du surfst
• Gut für schnelle Checks

Für kontinuierliches Monitoring

Google Search Console

• Zeigt Core Web Vitals Bericht
• Aggregiert über alle Seiten
• Trend über Zeit

Google Analytics 4

• Mit Web Vitals Library messbar
• Reale Nutzerdaten
• Segmentierung möglich

Priorisierung: Was zuerst angehen?

Impact-Matrix

Faustregel

1. Zuerst LCP – Der sichtbarste Impact
2. Dann CLS – Oft einfach zu fixen
3. Zuletzt INP – Meist komplexer, weniger offensichtlich

Fazit

Core Web Vitals sind keine Magie. Sie messen das, was Nutzer fühlen:

• LCP: "Wann ist die Seite da?"
• INP: "Reagiert die Seite?"
• CLS: "Bleibt alles an seinem Platz?"

Die gute Nachricht: Die meisten Probleme sind lösbar. Oft reichen ein paar gezielte Optimierungen für deutliche Verbesserungen.

Und ja – Google belohnt gute Werte mit besseren Rankings. Aber noch wichtiger: Deine Nutzer belohnen sie mit mehr Conversions.