Core Web Vitals: Messen und Verbessern der Web-Performance

Sie haben eine moderne Web-App entwickelt, aber Benutzer beschweren sich, dass sie langsam ist. Die Suchrankings sinken und die Absprungraten steigen. Der Übeltäter könnten schlechte Core Web Vitals sein – Googles Metriken für die reale Benutzererfahrung. In diesem Leitfaden erfahren Sie, was sie sind, wie Sie sie genau messen und mit welchen praktischen Schritten Sie jede einzelne verbessern können.

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 oder Textblock) sichtbar wird. Gut: ≤ 2,5 s.
• Interaction to Next Paint (INP): Misst die Reaktionsfähigkeit – die Zeit von einer Benutzerinteraktion (Klick, Tippen, Tastendruck) bis zur nächsten visuellen Aktualisierung. Gut: ≤ 200 ms.
• Cumulative Layout Shift (CLS): Quantifiziert unerwartete Layoutverschiebungen. Gut: ≤ 0,1.

Diese Metriken sind Teil der Page-Experience-Signale von Google und wirken sich direkt auf SEO und Benutzerzufriedenheit aus.

So messen Sie Core Web Vitals

Sie benötigen sowohl Lab- als auch Felddaten. Lab-Daten helfen beim Debuggen; Felddaten spiegeln echte Benutzer wider.

Lab-Tools

• Lighthouse in den Chrome DevTools: Führen Sie ein Audit durch, um LCP, CLS und TBT (ein Proxy für INP) zu erhalten.
• WebPageTest: Erweiterte Tests mit Filmstreifen und Wasserfall-Diagrammen.
• PageSpeed Insights: Kombiniert Lab- und Felddaten.

Feld-Tools

• Chrome UX Report (CrUX): Öffentlicher Datensatz mit Metriken von echten Nutzern.
• web-vitals-Bibliothek: Senden Sie Metriken an Ihre Analytics.

Beispiel: Verwenden der web-vitals-Bibliothek zum Protokollieren von Metriken:

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

Verbesserung von LCP

LCP ist oft die Metrik mit dem größten Verbesserungspotenzial. Häufige Ursachen: langsame Serverantwort, render-blockierende Ressourcen und nicht optimierte Bilder.

1. Bilder optimieren: Komprimieren, moderne Formate (WebP/AVIF) verwenden und Abmessungen festlegen. Für schnelle Komprimierung probieren Sie unseren Image Compressor aus.
2. Kritische Ressourcen vorladen: Verwenden Sie <link rel="preload"> für Hero-Bilder und Schriftarten.
3. Serverantwortzeit reduzieren: Caching, CDN und Optimierung von Backend-Abfragen nutzen.
4. Render-blockierende Ressourcen eliminieren: Kritisches CSS inline einbinden, nicht-kritisches JS verzögern.

Beispiel: LCP-Bild vorladen:

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

Verbesserung von INP

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

1. Lange Aufgaben aufteilen: Verwenden Sie setTimeout oder scheduler.yield, um den Hauptthread freizugeben.
2. Event-Handler optimieren: Debounce und Throttle wo sinnvoll; schwere synchrone Arbeit vermeiden.
3. JavaScript reduzieren: Code-Splitting, Tree-Shaking und nicht-kritische Skripte verzögern.
4. Web Worker für CPU-intensive Aufgaben nutzen.

Beispiel: Freigeben 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. Layoutverschiebungen treten auf, wenn Elemente unerwartet ihre Position ändern.

1. Größenattribute für Bilder und Videos festlegen (width/height).
2. Platz für Anzeigen und Embeds reservieren: Verwenden Sie CSS aspect-ratio oder feste Abmessungen.
3. Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten, es sei denn, es wird durch eine Benutzerinteraktion ausgelöst.
4. Transform-Animationen anstelle von Eigenschaften verwenden, die Layout auslösen.

Beispiel: Platz mit aspect-ratio reservieren:

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

Vergleich der Core Web Vitals

Tools und Workflow

Integrieren Sie Performance-Monitoring in Ihre CI/CD-Pipeline. Verwenden Sie Lighthouse CI, um Regressionen zu erkennen. Für Felddaten richten Sie ein Dashboard mit web-vitals und Ihren Analytics ein.

Bei der Bildoptimierung können Sie Bilder schnell mit unserem Image Compressor komprimieren, bevor Sie sie auf Ihre Website hochladen.

FAQ

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken – LCP, INP und CLS –, die Google verwendet, um die Benutzererfahrung auf Webseiten zu messen.

Wie oft sollte ich Core Web Vitals messen?

Kontinuierlich im Feld über Analytics und bei jedem Deployment im Labor mit Lighthouse CI, um Regressionen zu erkennen.

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

Ja. Viele Verbesserungen wie Bildoptimierung, Vorladen und Festlegen von Abmessungen können schrittweise ohne vollständiges Redesign umgesetzt werden.

Beginnen Sie damit, Ihre aktuellen Werte mit Lighthouse zu messen, und kümmern Sie sich dann um die Metrik mit der größten Auswirkung. Kleine, konsequente Optimierungen führen zu erheblichen Verbesserungen der Benutzererfahrung und SEO.