Core Web Vitals: Messen und verbessern

Ihre Nutzer erwarten schnelle, reaktionsschnelle Seiten. Googles Core Web Vitals (CWV) quantifizieren diese Erfahrung: 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 Werte beeinträchtigen die Nutzerzufriedenheit und können die Suchrankings beeinflussen. Dieser Leitfaden zeigt Ihnen, wie Sie CWV genau messen und häufige Probleme mit praktischen Schritten beheben.

Was sind Core Web Vitals?

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

• LCP: Zeit bis das größte Inhaltselement (Bild, Textblock) gerendert wird. Gut: ≤2,5s.
• INP: Zeit von der Nutzerinteraktion bis zum nächsten Paint. Gut: ≤200ms.
• CLS: Summe der Layout-Shift-Werte. Gut: ≤0,1.

Diese Schwellenwerte werden am 75. Perzentil der Seitenaufrufe bewertet, 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-Tools simulieren Bedingungen; Felddaten stammen von echten Nutzern.

Lab-Tools

• Lighthouse in den Chrome DevTools: Führen Sie Audits für Performance, Barrierefreiheit und SEO durch. Es liefert Lab-CWV-Werte und Verbesserungsmöglichkeiten.
• WebPageTest: Erweiterte Tests mit benutzerdefinierten Netzwerkbedingungen und Geräteemulation.

Feld-Tools

• Chrome UX Report (CrUX): Öffentlicher Datensatz mit Metriken von echten Nutzern. Zugriff über PageSpeed Insights oder BigQuery.
• web-vitals JavaScript-Bibliothek: Erfassen Sie CWV von tatsächlichen Nutzern und senden Sie sie an Ihre Analytics.

Verwenden Sie Felddaten, um echte Probleme zu identifizieren, und Lab-Tools, um Fehler zu beheben und Korrekturen zu überprüfen.

Verbesserung von Largest Contentful Paint (LCP)

LCP ist oft das Hero-Bild oder die Hauptüberschrift. Optimieren Sie diese Elemente:

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: Fügen Sie <link rel="preload"> für das LCP-Bild oder die Schriftart hinzu.
3. Serverantwortzeit reduzieren: Verwenden Sie Caching, CDNs und effizienten Backend-Code.
4. Render-blockierende Ressourcen eliminieren: Verzögern Sie nicht-kritisches CSS/JS, fügen Sie kritisches CSS inline ein.

Beispiel: Laden Sie Ihr LCP-Bild vor:

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

Setzen Sie außerdem fetchpriority="high" auf dem <img>-Tag, um die Wichtigkeit anzugeben.

Verbesserung von Interaction to Next Paint (INP)

INP misst die Reaktionsfähigkeit auf Klicks, Taps und Tastatureingaben. Lange Aufgaben blockieren den Hauptthread. So verbessern Sie INP:

• Lange Aufgaben aufteilen: Verwenden Sie setTimeout oder requestIdleCallback, um den Browser freizugeben.
• Event-Handler optimieren: Entprellen oder drosseln Sie teure Operationen.
• JavaScript reduzieren: Code-Splitting, Tree-Shaking und Verzögern nicht-kritischer Skripte.
• Web Worker verwenden für CPU-intensive Arbeit.

Beispiel: Geben Sie den Hauptthread frei:

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // Do some work
  await yieldToMain();
  // Continue
}

Verbesserung von Cumulative Layout Shift (CLS)

CLS tritt auf, wenn Elemente sich unerwartet verschieben. Häufige Ursachen: Bilder ohne Abmessungen, Anzeigen, Embeds und Webfonts.

• Breite und Höhe festlegen bei Bildern und Videos oder CSS aspect-ratio verwenden.
• Platz für dynamische Inhalte reservieren (Anzeigen, Embeds) mit min-height.
• font-display: swap verwenden und Schriftarten vorladen, um unsichtbaren Text zu vermeiden, der Verschiebungen verursacht.
• Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten, es sei denn, es wird durch eine Nutzerinteraktion ausgelöst.

Beispiel: Platz für eine Anzeige reservieren:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Vergleich der Metriken und Tools

Praktischer Workflow zur Verbesserung der CWV

1. Felddaten messen mit PageSpeed Insights oder CrUX, um Seiten mit schlechten Werten zu identifizieren.
2. Lighthouse ausführen auf diesen Seiten, um spezifische Optimierungsmöglichkeiten zu erhalten.
3. Korrekturen nach Wirkung priorisieren: Oft sind LCP und CLS am einfachsten zu verbessern.
4. Änderungen umsetzen und im Lab testen.
5. Bereitstellen und überwachen Sie Felddaten, um die Verbesserung zu bestätigen.
6. Iterieren Sie bei verbleibenden Problemen.

Denken Sie daran, dass CWV nutzerzentriert sind; validieren Sie immer mit Echtnutzerdaten.

FAQ

Was sind Core Web Vitals und warum sind sie wichtig?

Core Web Vitals sind drei Metriken (LCP, INP, CLS), die Ladeverhalten, Interaktivität und visuelle Stabilität quantifizieren. Sie sind wichtig, weil sie die tatsächliche Nutzererfahrung widerspiegeln und von Google als Ranking-Signal verwendet werden.

Wie oft sollte ich Core Web Vitals messen?

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

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

Ja. Viele Verbesserungen wie Bildoptimierung, Vorladen und Layout-Korrekturen können schrittweise ohne vollständigen Neuaufbau angewendet werden.

Müssen Sie Bilder für schnelleres LCP komprimieren? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.