Core Web Vitals: Performance messen und verbessern

Deine Nutzer sind ungeduldig. Wenn deine Website länger als ein paar Sekunden zum Laden braucht, verlassen sie die Seite. Auch Suchmaschinen bemerken das: Core Web Vitals sind Ranking-Signale. Aber die Verbesserung fühlt sich wie ein Labyrinth aus Metriken und Tools an. Dieser Leitfaden bringt Klarheit. Du erfährst, was jede Metrik bedeutet, wie du sie genau misst und welche konkreten Schritte zur Verbesserung führen.

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die die reale Nutzererfahrung quantifizieren:

• Largest Contentful Paint (LCP): Wie lange es dauert, bis der Hauptinhalt geladen ist. Ziel: unter 2,5 Sekunden.
• Interaction to Next Paint (INP): Wie schnell die Seite auf Nutzereingaben reagiert. Ziel: unter 200 Millisekunden.
• Cumulative Layout Shift (CLS): Wie stark das Layout während des Ladens springt. Ziel: unter 0,1.

Diese Metriken werden aus echten Nutzersitzungen (Felddaten) und synthetischen Tests (Labordaten) gemessen. Felddaten sind für das Ranking entscheidend.

Wie man Core Web Vitals misst

Du brauchst sowohl Labor- als auch Felddaten. Labordaten helfen beim Debuggen; Felddaten spiegeln die tatsächliche Nutzererfahrung wider.

Labor-Tools

• Lighthouse in den Chrome DevTools: Führe ein Audit durch, um Bewertungen und Optimierungspotenziale zu erhalten.
• PageSpeed Insights: Kombiniert Labor- und Felddaten für eine URL.
• WebPageTest: Erweiterte Waterfall-Analyse.

Feld-Tools

• Chrome User Experience Report (CrUX): Echte Nutzerdaten aus Chrome, verfügbar über PageSpeed Insights oder BigQuery.
• web-vitals JavaScript-Bibliothek: Sammle Metriken von deinen eigenen Nutzern und sende sie an deine Analytics.

Um Felddaten zu sammeln, füge die web-vitals-Bibliothek zu deiner Website hinzu:

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);

So erhältst du einen kontinuierlichen Strom von Echtzeit-Nutzermetriken.

LCP verbessern

LCP ist normalerweise das größte Bild, Video oder Textblock. Um es zu verbessern, konzentriere dich auf den kritischen Pfad.

1. Bilder optimieren: Komprimiere Bilder, verwende moderne Formate wie WebP oder AVIF und lege explizite Breiten- und Höhenangaben fest. Tools wie der Image Compressor können helfen, die Dateigröße ohne sichtbaren Qualitätsverlust zu reduzieren.
2. LCP-Ressource vorladen: Füge <link rel="preload"> für das Hero-Bild oder die Schriftart hinzu.
3. Serverantwortzeit reduzieren: Verwende ein CDN, aktiviere Caching und optimiere Backend-Abfragen.
4. Render-blockierende Ressourcen eliminieren: Kritischen CSS inline einbinden, nicht-kritisches JavaScript verzögern.
5. Responsive Bilder verwenden: Liefere Bilder in passender Größe mit srcset aus.

Beispiel für das Vorladen eines LCP-Bildes:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

INP verbessern

INP misst die Reaktionsfähigkeit. Lang andauernde Aufgaben blockieren den Hauptthread und verzögern visuelles Feedback.

• Lange Aufgaben aufteilen: Verwende setTimeout oder requestIdleCallback, um den Hauptthread freizugeben.
• Event-Handler optimieren: Teure Handler mit Debouncing oder Throttling versehen.
• JavaScript reduzieren: Ungenutzten Code entfernen, Code-Splitting und Lazy-Loading nicht-kritischer Module.
• Web Worker verwenden für rechenintensive Aufgaben.
• Große DOM-Größen vermeiden: Halte das DOM unter 1.500 Knoten.

Beispiel für die Freigabe des Hauptthreads:

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

CLS verbessern

CLS tritt auf, wenn Elemente unerwartet verschoben werden. Häufige Ursachen: Bilder ohne Abmessungen, Anzeigen, Einbettungen und dynamisch eingefügter Inhalt.

• Immer Breite und Höhe festlegen bei Bildern und Videos.
• Platz für Anzeigen und Einbettungen reservieren mit CSS aspect-ratio oder festen Containern.
• Keine Inhalte über bestehendem Inhalt einfügen, es sei denn, dies wird durch eine Nutzerinteraktion ausgelöst.
• font-display: optional verwenden, um Verschiebungen durch Schriftwechsel zu vermeiden, oder Schriftarten vorladen.
• transform-Animationen anwenden statt Eigenschaften, die Layout-Änderungen auslösen.

Beispiel für die Reservierung von Platz für ein Bild:

<img src="#" width="800" height="600" alt="...">

Tools und Workflow

Integriere Performance-Checks in deinen Entwicklungs-Workflow:

• Führe Lighthouse in der CI aus, um Regressionen zu erkennen.
• Verwende web-vitals, um Felddaten zu überwachen und Alarme einzurichten.
• Analysiere Server-Logs, um langsame Endpunkte zu identifizieren. Der Nginx Log Analyzer kann dir helfen, langsame Anfragen und Fehler zu erkennen.
• Teste auf echten Geräten und gedrosselten Netzwerken.

Vergleich von Metriken und Zielen

FAQ

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken – LCP, INP und CLS –, die Ladeperformance, Interaktivität und visuelle Stabilität messen. Sie werden von Google als Ranking-Signale verwendet.

Wie messe ich Core Web Vitals?

Verwende Labor-Tools wie Lighthouse zum Debuggen und Feld-Tools wie die web-vitals-Bibliothek oder CrUX für echte Nutzerdaten. Beide sind wichtig.

Was ist ein guter LCP-Wert?

Ein guter LCP liegt unter 2,5 Sekunden. Alles über 4 Sekunden ist schlecht. Optimiere Bilder, lade kritische Ressourcen vor und reduziere die Serverantwortzeit.

Bereit, deine Website zu beschleunigen? Beginne damit, deine Bilder mit unserem kostenlosen Image Compressor zu komprimieren, um den LCP sofort zu verbessern.