Core Web Vitals: Performance messen und verbessern

Du hast eine schnelle Website gebaut, aber Nutzer beschweren sich immer noch über Langsamkeit, und deine Suchrankings sind nicht dort, wo du sie haben willst. Das Problem? Du misst die falschen Dinge. Core Web Vitals (CWV) sind Googles Metriken für die reale Nutzererfahrung: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Wenn du sie ignorierst, lässt du Performance – und SEO – liegen.

Dieser Leitfaden zeigt dir, wie du CWV genau misst und die häufigsten Probleme behebst. Kein Blabla, nur umsetzbare Schritte.

Was sind Core Web Vitals?

Core Web Vitals sind drei spezifische Metriken, die quantifizieren, wie Nutzer Ladeverhalten, Interaktivität und visuelle Stabilität wahrnehmen:

• LCP misst die Ladeleistung. Er markiert, wann das größte Inhaltselement (Bild, Video, Textblock) sichtbar wird. Ziel: ≤ 2,5 Sekunden.
• INP misst die Reaktionsfähigkeit. Er zeichnet die Latenz aller Interaktionen (Klicks, Taps, Tastendrücke) auf und meldet einen Perzentilwert. Ziel: ≤ 200 Millisekunden.
• CLS misst die visuelle Stabilität. Er berechnet unerwartete Layoutverschiebungen. Ziel: ≤ 0,1.

Diese Schwellenwerte basieren auf Echtnutzerdaten aus dem Chrome User Experience Report (CrUX). Sie zu erfüllen verbessert die Nutzerzufriedenheit und kann die Suchrankings steigern.

Wie man Core Web Vitals misst

Du brauchst sowohl Lab- als auch Felddaten. Lab-Tools simulieren Bedingungen; Felddaten spiegeln echte Nutzer wider.

Lab-Tools

• Lighthouse (in Chrome DevTools oder CI) liefert eine Momentaufnahme mit Diagnosen.
• PageSpeed Insights kombiniert Lab- und Felddaten für eine URL.
• Web Vitals Extension protokolliert CWV in der Chrome-Konsole während des Surfens.

Feld-Tools

• Chrome UX Report (CrUX) zeigt aggregierte Echtnutzerdaten für Millionen von Websites.
• web-vitals JavaScript-Bibliothek ermöglicht es dir, CWV von deinen eigenen Nutzern zu sammeln und an Analytics zu senden.
• Search Console meldet den CWV-Status deiner Website basierend auf CrUX.

Beginne mit Felddaten, um Problemseiten zu identifizieren, und nutze dann Lab-Tools zum Debuggen.

LCP verbessern

LCP lässt sich oft am einfachsten mit ein paar gezielten Korrekturen verbessern.

1. Bilder optimieren. Verwende moderne Formate (WebP, AVIF), komprimiere ohne sichtbaren Qualitätsverlust und setze explizite Breite/Höhe. Tools wie Image Compressor können helfen, die Dateigröße zu reduzieren.
2. Das LCP-Bild vorladen. Füge <link rel="preload" as="image" href="#"> im Head hinzu.
3. Render-blockierende Ressourcen eliminieren. Kritisches CSS inline einbinden, nicht-kritisches CSS/JS verzögern und synchrone Skripte im Head vermeiden.
4. Ein CDN verwenden. Assets von einem Standort nahe beim Nutzer ausliefern, um Latenz zu reduzieren.
5. Textkomprimierung aktivieren. Brotli oder gzip für HTML, CSS, JS.

Beispiel für das Vorladen eines LCP-Bildes:

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

INP verbessern

INP misst, wie schnell deine Seite auf Nutzereingaben reagiert. Lange Aufgaben blockieren den Main Thread und verzögern Interaktionen.

1. Lange Aufgaben aufteilen. Verwende setTimeout oder requestIdleCallback, um den Main Thread freizugeben.
2. Event-Handler optimieren. Debounce oder throttle hochfrequente Events wie Scroll und Resize.
3. JavaScript reduzieren. Code-Splitting, Tree-Shaking und Lazy-Loading nicht-kritischer Skripte.
4. Web Worker verwenden für schwere Berechnungen.
5. Große DOM-Größen vermeiden. Halte das DOM nach Möglichkeit unter 1500 Knoten.

Beispiel für die Freigabe des Main Threads:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

CLS verbessern

Layoutverschiebungen treten auf, wenn Elemente unerwartet ihre Position ändern. Häufige Ursachen: Bilder ohne Abmessungen, Anzeigen, Embeds und dynamisch eingefügter Inhalt.

1. Immer Breite und Höhe setzen bei Bildern und Videos. So kann der Browser Platz reservieren.
2. Platz für Anzeigen und Embeds reservieren. Verwende CSS aspect-ratio oder feste Container.
3. Vermeide das Einfügen von Inhalt über bestehendem Inhalt, es sei denn, es wird durch eine Nutzerinteraktion ausgelöst.
4. Verwende font-display: swap und lade Schriften vor, um unsichtbare Textverschiebungen zu vermeiden.
5. Vorsicht bei Animationen. Verwende transform und opacity statt Eigenschaften, die Layout auslösen.

Monitoring und kontinuierliche Verbesserung

Performance ist keine einmalige Sache. Richte Monitoring ein, um Regressionen zu erkennen.

• Verwende die web-vitals-Bibliothek, um CWV an deine Analytics zu senden:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

• Richte Warnungen ein, wenn Metriken Schwellenwerte überschreiten.
• Führe Lighthouse in CI für jeden Pull Request aus.
• Überprüfe die CrUX-Daten monatlich, um Trends zu verfolgen.

Vergleich der Core Web Vitals

FAQ

Was sind die aktuellen Schwellenwerte für Core Web Vitals?

LCP: gut ≤ 2,5s, verbesserungswürdig ≤ 4,0s, schlecht > 4,0s. INP: gut ≤ 200ms, verbesserungswürdig ≤ 500ms, schlecht > 500ms. CLS: gut ≤ 0,1, verbesserungswürdig ≤ 0,25, schlecht > 0,25.

Wie oft sollte ich Core Web Vitals überprüfen?

Überwache Felddaten kontinuierlich über Analytics. Überprüfe CrUX und Search Console monatlich. Führe Lab-Tests (Lighthouse) bei jeder signifikanten Codeänderung durch.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Korrekturen wie das Komprimieren von Bildern oder das Aktivieren von Caching können über Plugins oder Hosting-Einstellungen vorgenommen werden. Aber tiefgreifendere Optimierungen (Code-Splitting, JS reduzieren) erfordern normalerweise die Einbeziehung eines Entwicklers.

Bereit, deine Bilder für ein besseres LCP zu optimieren? Probiere unseren kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.