Core Web Vitals: Web-Performance messen und verbessern

Ihre Nutzer sind ungeduldig. Wenn Ihre Seite zu lange zum Laden braucht oder beim Lesen herumspringt, verlassen sie die Seite. Core Web Vitals (CWV) sind Googles Metriken, die diese Frustrationen quantifizieren: Largest Contentful Paint (LCP) für die Ladegeschwindigkeit, Interaction to Next Paint (INP) für die Reaktionsfähigkeit und Cumulative Layout Shift (CLS) für die visuelle Stabilität. In diesem Leitfaden erfahren Sie, wie Sie diese Metriken messen und praktische Korrekturen anwenden, die funktionieren.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von Metriken aus der Praxis, die die Nutzererfahrung widerspiegeln. Sie sind Teil von Googles Page-Experience-Signalen und werden für das Ranking verwendet. Jede Metrik hat einen „guten“ Schwellenwert:

• LCP: Sollte ≤ 2,5 Sekunden sein.
• INP: Sollte ≤ 200 Millisekunden sein.
• CLS: Sollte ≤ 0,1 sein.

Diese Schwellenwerte werden am 75. Perzentil der Seitenaufrufe gemessen, was bedeutet, dass 75 % der Besuche das Ziel erreichen sollten.

So messen Sie Core Web Vitals

Sie benötigen sowohl Lab- als auch Felddaten. Lab-Daten helfen beim Debuggen; Felddaten zeigen die tatsächliche Nutzererfahrung.

Felddaten (echte Nutzer)

• Chrome User Experience Report (CrUX): Bietet aggregierte Echtnutzerdaten für Ihre Origin. Zugriff über PageSpeed Insights oder das CrUX-Dashboard.
• web-vitals JavaScript-Bibliothek: Fügen Sie dieses leichte Skript zu Ihrer Website hinzu, um Metriken an Ihre Analyse 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);

Lab-Daten (synthetisch)

• Lighthouse: In Chrome DevTools integriert, prüft die Performance und gibt eine Bewertung.
• WebPageTest: Für tiefere Analysen mit Netzwerkdrosselung.

Verwenden Sie Lab-Daten für schnelle Iterationen, aber validieren Sie immer mit Felddaten.

Verbesserung von Largest Contentful Paint (LCP)

LCP misst, wann das größte Inhaltselement (normalerweise ein Hero-Bild oder eine Überschrift) sichtbar wird. So verbessern Sie es:

1. Bilder optimieren: Komprimieren Sie Bilder, verwenden Sie moderne Formate wie WebP oder AVIF und liefern Sie responsive Größen mit srcset.
2. Kritische Ressourcen vorladen: Verwenden Sie <link rel="preload"> für das LCP-Bild und wichtige Schriftarten.
3. Render-blockierende Ressourcen eliminieren: Verzögern Sie nicht-kritisches CSS und JavaScript. Binden Sie kritisches CSS inline ein.
4. Ein CDN verwenden: Liefern Sie Assets von Standorten nahe den Nutzern.
5. Textkomprimierung aktivieren: Verwenden Sie Brotli oder gzip für textbasierte Assets.

Für die Bildkomprimierung können Sie ein Tool wie den Image Compressor verwenden, um Dateigrößen schnell ohne Qualitätsverlust zu reduzieren.

Verbesserung von Interaction to Next Paint (INP)

INP misst die Reaktionsfähigkeit Ihrer Seite auf Nutzerinteraktionen. Ein hoher INP bedeutet, dass der Browser beschäftigt ist und nicht schnell reagieren kann. So verbessern Sie ihn:

1. Lange Aufgaben aufteilen: Teilen Sie JavaScript-Arbeit mit setTimeout oder requestIdleCallback in kleinere Blöcke auf.
2. Event-Handler optimieren: Entprellen (Debounce) oder Drosseln (Throttle) Sie teure Handler. Vermeiden Sie Layout-Thrashing.
3. JavaScript reduzieren: Entfernen Sie ungenutzten Code, führen Sie Code-Splitting durch und verzögern Sie nicht-kritische Skripte.
4. Web Worker verwenden: Lagern Sie schwere Berechnungen in einen Worker-Thread aus.

Stellen Sie außerdem sicher, dass Sie den Hauptthread nicht durch Third-Party-Skripte blockieren. Prüfen Sie diese regelmäßig.

Verbesserung von Cumulative Layout Shift (CLS)

CLS misst unerwartete Layout-Verschiebungen. So halten Sie ihn niedrig:

1. Größenattribute festlegen: Fügen Sie immer width und height bei Bildern und Videos hinzu.
2. Platz für dynamische Inhalte reservieren: Verwenden Sie CSS aspect-ratio oder Platzhalter für Anzeigen und Einbettungen.
3. Vermeiden Sie das Einfügen von Inhalten über bestehenden Inhalten: Außer als Reaktion auf Nutzerinteraktionen.
4. Transform-Animationen verwenden: Bevorzugen Sie transform und opacity für Animationen statt Eigenschaften, die Layout auslösen.

Tools und Workflow

Hier ist ein einfacher Workflow zur kontinuierlichen Überwachung und Verbesserung der CWV:

Denken Sie daran, dass Verbesserungen über die Zeit mit Echtnutzerdaten validiert werden sollten.

FAQ

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

LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1, gemessen am 75. Perzentil der Seitenaufrufe.

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

Überwachen Sie Felddaten kontinuierlich und führen Sie Lab-Audits nach größeren Änderungen durch. Eine monatliche Überprüfung ist eine gute Praxis.

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

Ja. Viele Verbesserungen wie Bildoptimierung, Verzögern von Skripten und Festlegen von Größenattributen können mit minimalen Code-Änderungen umgesetzt werden.

Bereit, Ihre Bilder für ein besseres LCP zu optimieren? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen sofort zu reduzieren.