Core Web Vitals: Messen und Verbessern der Web-Performance

Sie haben eine schnelle Website erstellt, aber Benutzer beschweren sich immer noch über Langsamkeit. Oder Ihre SEO-Rankings sind nach einem Google-Update gesunken. Der Übeltäter könnten die Core Web Vitals sein – Googles Metriken für die Benutzererfahrung. In diesem Leitfaden erfahren Sie, was sie sind, wie Sie sie messen und konkrete Schritte zur Verbesserung jeder einzelnen.

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die Schlüsselaspekte der Benutzererfahrung quantifizieren:

• Largest Contentful Paint (LCP): Wie lange es dauert, bis das größte Inhaltselement (Bild, Video oder Textblock) sichtbar wird. Gut: ≤2,5s.
• Interaction to Next Paint (INP): Misst die Reaktionsfähigkeit – die Zeit von einer Benutzerinteraktion (Klick, Tippen, Tastendruck) bis zum nächsten gezeichneten Frame. Gut: ≤200ms.
• Cumulative Layout Shift (CLS): Quantifiziert unerwartete Layoutverschiebungen während des Ladevorgangs. Gut: ≤0,1.

Diese Metriken sind Teil von Googles Page-Experience-Signalen und wirken sich direkt auf SEO und Benutzerzufriedenheit aus.

Wie man Core Web Vitals misst

Sie benötigen sowohl Lab- als auch Felddaten. Labdaten (synthetische Tests) helfen beim Debuggen; Felddaten (Real User Monitoring) spiegeln die tatsächliche Erfahrung wider.

Lab-Tools

• Lighthouse in den Chrome DevTools: Führen Sie Audits durch und erhalten Sie Bewertungen mit Verbesserungsmöglichkeiten.
• WebPageTest: Erweiterte Tests mit Filmstreifen und Wasserfalldiagrammen.
• PageSpeed Insights: Kombiniert Lab- und Felddaten von CrUX.

Feld-Tools

• Chrome User Experience Report (CrUX): Öffentlicher Datensatz mit Metriken von echten Nutzern.
• web-vitals JavaScript-Bibliothek: Sammeln Sie Metriken von echten Nutzern über Analytics.
• Search Console: Der Core Web Vitals-Bericht zeigt URL-Gruppen, die Aufmerksamkeit benötigen.

So verwenden Sie die web-vitals-Bibliothek, um Metriken an Ihre Analytics zu senden:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use navigator.sendBeacon if available
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

Verbesserung von LCP

LCP ist oft die Metrik mit der größten Auswirkung. So verbessern Sie sie:

1. Optimieren Sie das LCP-Element: Identifizieren Sie es (normalerweise ein Hero-Bild oder eine Überschrift) und stellen Sie sicher, dass es schnell lädt.
2. Kritische Ressourcen vorladen: Verwenden Sie <link rel="preload"> für Bilder, Schriftarten und Stylesheets.
3. Moderne Bildformate verwenden: Liefern Sie WebP oder AVIF mit Fallbacks.
4. Lazy Loading sorgfältig implementieren: Laden Sie das LCP-Bild nicht lazy; priorisieren Sie es.
5. Serverantwortzeit reduzieren: Verwenden Sie CDNs, Caching und optimieren Sie das Backend.
6. Render-blockierende Ressourcen eliminieren: Verzögern Sie nicht-kritisches CSS und JavaScript.

Beispiel: Laden Sie Ihr Hero-Bild vor:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Verbesserung von INP

INP misst die Reaktionsfähigkeit. Hohe INP-Werte kommen oft von langen Aufgaben, die den Hauptthread blockieren.

1. Brechen Sie lange Aufgaben auf: Verwenden Sie setTimeout, requestIdleCallback oder scheduler.yield(), um den Hauptthread freizugeben.
2. Optimieren Sie Event-Handler: Entprellen (Debounce) oder drosseln (Throttle) Sie teure Operationen.
3. Reduzieren Sie die JavaScript-Ausführung: Code-Splitting, Tree-Shaking und verzögern Sie nicht-kritische Skripte.
4. Vermeiden Sie große DOM-Updates: Bündeln Sie DOM-Änderungen und nutzen Sie virtuelles DOM sinnvoll.
5. Verwenden Sie Web Worker für CPU-intensive Arbeit.

Beispiel: Freigabe mit scheduler.yield() (wo unterstützt):

async function handleClick() {
  // Do some work
  await scheduler.yield();
  // Continue after yielding
}

Verbesserung von CLS

CLS dreht sich um visuelle Stabilität. Verhindern Sie unerwartete Verschiebungen:

1. Fügen Sie immer width- und height-Attribute bei Bildern und Videos hinzu.
2. Reservieren Sie Platz für Anzeigen und Embeds mit CSS aspect-ratio oder festen Abmessungen.
3. Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten, es sei denn, es wird durch eine Benutzerinteraktion ausgelöst.
4. Verwenden Sie CSS-Transforms für Animationen anstelle von Eigenschaften, die Layout auslösen.
5. Laden Sie Schriftarten vor und verwenden Sie font-display: swap, um unsichtbare Textverschiebungen zu vermeiden.

Beispiel: Platz mit aspect-ratio reservieren:

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

Vergleich der Core Web Vitals

Tools und Workflow

Integrieren Sie die Überwachung der Core Web Vitals in Ihren Entwicklungsworkflow:

• Führen Sie Lighthouse in der CI aus, um Regressionen zu erkennen.
• Verwenden Sie RUM (Real User Monitoring), um Felddaten zu verfolgen.
• Legen Sie Performance-Budgets und Warnungen fest.
• Überprüfen Sie regelmäßig Skripte von Drittanbietern – sie beeinträchtigen oft INP und LCP.

Für eine schnelle Bildoptimierung vor dem Hochladen auf Ihre Website probieren Sie unseren Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.

FAQ

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

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

Wie oft sollte ich Core Web Vitals messen?

Kontinuierlich über Felddaten und bei jeder signifikanten Codeänderung über Lab-Tools. Richten Sie Warnungen für Regressionen ein.

Kann ich Core Web Vitals verbessern, ohne meine Website neu zu erstellen?

Ja – viele Korrekturen wie Bildoptimierung, Vorladen und Verzögern von Skripten können schrittweise angewendet werden.