Core Web Vitals: Messen und Verbessern der Web-Performance

Ihre Nutzer erwarten, dass Seiten sofort laden, ohne Verzögerung reagieren und visuell stabil bleiben. Googles Core Web Vitals (CWV) quantifizieren diese Erwartungen: Largest Contentful Paint (LCP) misst das Laden, Interaction to Next Paint (INP) misst die Interaktivität und Cumulative Layout Shift (CLS) misst die visuelle Stabilität. Schlechte CWV-Werte beeinträchtigen die User Experience und können die Suchrankings beeinflussen. Dieser Leitfaden zeigt Ihnen, wie Sie jede Metrik messen und mit praktischen, entwicklerfreundlichen Schritten verbessern.

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die die reale User Experience widerspiegeln:

• LCP: Zeit bis das größte Inhaltselement (Bild, Textblock, Video) gerendert wird. Gut: ≤2,5s, Verbesserungswürdig: ≤4s, Schlecht: >4s.
• INP: Zeit von der Nutzerinteraktion (Klick, Tippen, Tastendruck) bis zum nächsten gerenderten Frame. Gut: ≤200ms, Verbesserungswürdig: ≤500ms, Schlecht: >500ms.
• CLS: Summe der Layout-Shift-Scores für unerwartete visuelle Bewegung. Gut: ≤0,1, Verbesserungswürdig: ≤0,25, Schlecht: >0,25.

Diese Schwellenwerte basieren auf dem 75. Perzentil der Seitenaufrufe, aufgeteilt nach Mobil und Desktop.

So messen Sie Core Web Vitals

Sie benötigen sowohl Lab- als auch Felddaten. Lab-Tools simulieren Bedingungen; Felddaten stammen von echten Nutzern.

Lab-Tools

• Lighthouse (in Chrome DevTools oder PageSpeed Insights): prüft LCP, CLS und Total Blocking Time (ein Proxy für INP).
• WebPageTest: erweiterte Filmstreifen- und Wasserfall-Analyse.
• Chrome DevTools Performance-Panel: zeichnen Sie Interaktionen auf, um lange Aufgaben zu erkennen, die INP beeinflussen.

Feld-Tools

• Chrome UX Report (CrUX): aggregierte Echtnutzerdaten für öffentliche Websites.
• web-vitals JavaScript-Bibliothek: senden Sie Metriken an Ihre Analytics.
• Search Console Core Web Vitals-Bericht: gruppiert URLs nach Status.

Installieren Sie die web-vitals-Bibliothek über npm oder binden Sie sie von einem CDN ein und protokollieren Sie dann die 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);

Verwenden Sie sendBeacon, um das Blockieren beim Entladen zu vermeiden. Sammeln Sie Daten über die Zeit, um Trends zu erkennen.

Verbesserung von Largest Contentful Paint (LCP)

LCP ist oft das Hero-Bild oder die Hauptüberschrift. Optimieren Sie den kritischen Pfad:

1. Priorisieren Sie die LCP-Ressource: Fügen Sie fetchpriority="high" zum LCP-Bild hinzu oder laden Sie es vor.
2. Reduzieren Sie die Serverantwortzeit: Nutzen Sie Caching, CDN und effiziente Backend-Abfragen.
3. Beseitigen Sie render-blockierende Ressourcen: Verschieben Sie nicht-kritisches CSS/JS, inlinen Sie kritisches CSS.
4. Optimieren Sie Bilder: Komprimieren Sie, verwenden Sie moderne Formate (WebP/AVIF) und legen Sie Dimensionen fest.
5. Verwenden Sie ein CDN, um Assets von Standorten nahe den Nutzern bereitzustellen.

Beispiel: LCP-Bild vorladen und fetchpriority setzen:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

Für die Bildkomprimierung probieren Sie unseren Image Compressor aus, um die Dateigröße ohne sichtbaren Qualitätsverlust zu reduzieren.

Verbesserung von Interaction to Next Paint (INP)

INP spiegelt die Reaktionsfähigkeit wider. Lange JavaScript-Aufgaben blockieren den Hauptthread und verzögern visuelles Feedback.

1. Teilen Sie lange Aufgaben auf: Verwenden Sie setTimeout, requestIdleCallback oder scheduler.yield(), um dem Browser Zeit zu geben.
2. Optimieren Sie Event-Handler: Entprellen Sie Eingaben, vermeiden Sie schwere Arbeit in Klick-Handlern.
3. Reduzieren Sie JavaScript: Code-Splitting, Tree-Shaking und verzögern Sie nicht-kritische Skripte.
4. Verwenden Sie Web Worker für CPU-intensive Arbeit.
5. Vermeiden Sie große DOM-Updates: Bündeln Sie DOM-Änderungen und verwenden Sie Virtualisierung für lange Listen.

Messen Sie INP im Feld mit der web-vitals-Bibliothek und nutzen Sie das Performance-Panel, um lange Aufgaben während Interaktionen zu identifizieren.

Verbesserung von Cumulative Layout Shift (CLS)

CLS tritt auf, wenn Elemente sich unerwartet bewegen. Häufige Ursachen: Bilder ohne Dimensionen, Anzeigen/Einbettungen ohne reservierten Platz und spät ladende Schriftarten.

1. Legen Sie immer Breite und Höhe fest bei Bildern und Videos oder verwenden Sie CSS aspect-ratio.
2. Reservieren Sie Platz für dynamische Inhalte (Anzeigen, Einbettungen) mit min-height.
3. Verwenden Sie font-display: swap und laden Sie wichtige Schriftarten vor, um unsichtbaren Text und Layout-Shifts zu vermeiden.
4. Fügen Sie keine Inhalte über bestehenden Inhalten ein, es sei denn, dies wird durch eine Nutzerinteraktion ausgelöst.

Beispiel: Seitenverhältnis für responsive Bilder festlegen:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Vergleich der Core Web Vitals

Praktischer Workflow zur Verbesserung der CWV

1. Baseline messen: Führen Sie Lighthouse aus und sammeln Sie Felddaten über web-vitals.
2. Engpässe identifizieren: Nutzen Sie das Performance-Panel und den Netzwerk-Wasserfall.
3. Fixes priorisieren: Konzentrieren Sie sich auf die Metrik mit dem schlechtesten Wert.
4. Änderungen umsetzen: Bilder optimieren, Skripte verzögern, Dimensionen festlegen.
5. Testen und überwachen: Führen Sie Lab-Tests erneut durch und verfolgen Sie Felddaten über die Zeit.

Denken Sie daran, dass CWV Feldmetriken sind; Lab-Tools helfen bei der Diagnose, aber Echtnutzerdaten sind die Quelle der Wahrheit.

FAQ

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

Gut: LCP ≤2,5s, INP ≤200ms, CLS ≤0,1. Verbesserungswürdig: LCP ≤4s, INP ≤500ms, CLS ≤0,25. Schlecht: über diesen Werten. Diese werden am 75. Perzentil der Seitenaufrufe bewertet.

Wie oft sollte ich Core Web Vitals messen?

Überwachen Sie Felddaten kontinuierlich und führen Sie Lab-Audits nach größeren Änderungen durch. Überprüfen Sie mindestens monatlich den Core Web Vitals-Bericht der Search Console und nach Deployments, die die Frontend-Performance beeinflussen.

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

Ja. Viele Verbesserungen sind technischer Natur: Bilder komprimieren, width/height-Attribute setzen, nicht-kritisches JavaScript verzögern und lange Aufgaben aufteilen. Diese Änderungen führen oft zu signifikanten Verbesserungen ohne visuelles Redesign.

Bereit, Ihre Bilder für ein besseres LCP zu optimieren? Verwenden Sie unseren kostenlosen Image Compressor, um Bilder bei gleichbleibender Qualität zu verkleinern und Ihre Core Web Vitals-Werte zu verbessern.