Core Web Vitals: Web-Performance messen und verbessern

Deine Seite lädt, aber Nutzer springen trotzdem ab. Langsame Ladezeiten, unerwartete Layout-Verschiebungen und nicht reagierende Interaktionen frustrieren Besucher und schaden deinen Suchrankings. Core Web Vitals (CWV) sind Googles Metriken für die User Experience und wirken sich direkt auf SEO aus. Dieser Leitfaden zeigt dir, wie du sie mit umsetzbaren Schritten messen und verbessern kannst.

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die zentrale Aspekte der User Experience quantifizieren:

• Largest Contentful Paint (LCP): Misst die Ladeleistung. Die Zeit, bis das größte Inhaltselement (Bild, Textblock, Video) sichtbar wird. Gut: ≤ 2,5 s.
• First Input Delay (FID): Misst die Interaktivität. Die Zeit von der ersten Interaktion eines Nutzers (Klick, Tippen, Tastendruck) bis zur Reaktion des Browsers. Gut: ≤ 100 ms.
• Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Quantifiziert unerwartete Layout-Verschiebungen während des Seitenladens. Gut: ≤ 0,1.

Diese Metriken sind Teil der Page-Experience-Signale von Google und beeinflussen die Suchrankings. Sie spiegeln außerdem die tatsächliche User Experience wider, sodass ihre Verbesserung sowohl SEO als auch Nutzerzufriedenheit zugutekommt.

So misst du Core Web Vitals

Du brauchst Felddaten (Messungen echter Nutzer) und Labordaten (synthetische Tests). Nutze beides für ein vollständiges Bild.

Tools für Felddaten

• Chrome User Experience Report (CrUX): Öffentlicher Datensatz mit Metriken echter Nutzer. Zugriff über PageSpeed Insights, Search Console oder BigQuery.
• PageSpeed Insights: Zeigt Felddaten (falls verfügbar) und Labordaten für eine URL.
• Search Console Core Web Vitals-Bericht: Gruppiert URLs nach Status (schlecht, verbesserungswürdig, gut).
• web-vitals JavaScript-Bibliothek: Erfasse eigene Felddaten mit import {onLCP, onFID, onCLS} from 'web-vitals'; und sende sie an deinen Analytics-Endpunkt.

Tools für Labordaten

• Lighthouse: In Chrome DevTools integriert. Führe Audits für Performance, Barrierefreiheit und SEO durch. Liefert Labormetriken und Verbesserungsmöglichkeiten.
• WebPageTest: Erweiterte Tests mit benutzerdefinierten Netzwerkbedingungen und Waterfall-Diagrammen.
• Chrome DevTools Performance-Panel: Zeichne die Laufzeit-Performance auf, um lange Tasks und Rendering-Probleme zu identifizieren.

Largest Contentful Paint (LCP) verbessern

LCP ist oft die Metrik mit dem größten Einfluss. Optimiere den kritischen Rendering-Pfad und das größte Element.

1. Das größte Element optimieren

• Wenn LCP ein Bild ist: komprimiere es, nutze moderne Formate (WebP, AVIF) und setze die Attribute width und height, um Layout-Verschiebungen zu vermeiden.
• Lade das LCP-Bild vorab: <link rel="preload" as="image" href="#">.
• Nutze responsive Bilder mit srcset und sizes.
• Wenn LCP Text ist: Stelle sicher, dass Schriftarten schnell laden. Nutze font-display: swap und lade wichtige Schriftarten vorab.

2. Render-blockierende Ressourcen beseitigen

• Bette kritisches CSS inline ein und lade nicht-kritisches CSS verzögert.
• Lade JavaScript verzögert oder asynchron: <script src="#" defer></script>.
• Minifiziere CSS und JavaScript.

3. Serverantwortzeit verbessern

• Nutze ein CDN, um Assets von Standorten näher an den Nutzern auszuliefern.
• Aktiviere Caching (HTTP-Cache-Header, Service Worker).
• Optimiere die Backend-Performance (Datenbankabfragen, serverseitiges Caching).

4. Payload-Größe reduzieren

• Komprimiere Bilder und nutze Lazy Loading für Bilder unterhalb des sichtbaren Bereichs.
• Entferne ungenutztes JavaScript und CSS.
• Nutze Code-Splitting, um nur notwendigen Code zu laden.

First Input Delay (FID) verbessern

FID misst die Reaktionsfähigkeit. Lange JavaScript-Tasks blockieren den Main Thread und verzögern die Verarbeitung von Interaktionen.

1. Lange Tasks aufteilen

Nutze setTimeout oder requestIdleCallback, um den Main Thread freizugeben. Oder nutze scheduler.yield(), wo unterstützt.

// Beispiel: Nach einem Arbeitspaket an den Main Thread abgeben
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    // Element verarbeiten
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

2. Event-Handler optimieren

• Debounce oder throttle hochfrequente Events (scroll, resize, input).
• Nutze passive Event Listener für Touch- und Wheel-Events: element.addEventListener('touchstart', handler, {passive: true});.
• Vermeide schwere Arbeit in Event-Handlern; lagere sie an Web Worker aus.

3. JavaScript-Ausführungszeit reduzieren

• Nutze Code-Splitting und lade nicht-kritisches JavaScript verzögert.
• Entferne ungenutzte Abhängigkeiten.
• Nutze Tree-Shaking und Minifizierung.

Cumulative Layout Shift (CLS) verbessern

CLS misst die visuelle Stabilität. Unerwartete Verschiebungen verärgern Nutzer und führen zu Fehlklicks.

1. Immer Größenattribute angeben

Setze für Bilder und Videos width und height (oder nutze CSS aspect-ratio), damit der Browser Platz reserviert.

2. Platz für dynamische Inhalte reservieren

• Nutze für Anzeigen, Embeds oder dynamische Inhalte einen Platzhalter mit festen Abmessungen.
• Vermeide das Einfügen von Inhalten oberhalb bestehender Inhalte, außer als Reaktion auf eine Nutzerinteraktion.

3. Transform-Animationen nutzen

Bevorzuge CSS transform und opacity für Animationen; sie lösen keine Layout-Verschiebungen aus.

4. Schriftarten sorgfältig laden

Nutze font-display: optional oder swap, um unsichtbaren Text und Layout-Verschiebungen zu vermeiden. Lade wichtige Schriftarten vorab.

Tools und Workflow für kontinuierliche Verbesserung

Performance ist ein fortlaufender Prozess. Integriere die Messung in deinen Entwicklungsprozess.

• Nutze Lighthouse CI in deiner Pipeline, um Regressionen zu erkennen.
• Überwache Felddaten über web-vitals und deine Analytics.
• Setze Performance-Budgets und alarmiere bei Verstößen.

Für schnelle Checks nutze den Nginx Log Analyzer von TryQuickToolBox, um langsame Serverantworten zu erkennen, die LCP beeinträchtigen könnten.

FAQ

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

LCP: gut ≤ 2,5 s, verbesserungswürdig ≤ 4 s, schlecht > 4 s. FID: gut ≤ 100 ms, verbesserungswürdig ≤ 300 ms, schlecht > 300 ms. CLS: gut ≤ 0,1, verbesserungswürdig ≤ 0,25, schlecht > 0,25. Diese werden am 75. Perzentil der Seitenaufrufe bewertet.

Wie oft sollte ich Core Web Vitals messen?

Überwache Felddaten kontinuierlich über Analytics und die Search Console. Führe Labortests bei jeder wesentlichen Codeänderung und mindestens monatlich für Basisprüfungen durch.

Wirkt sich die Verbesserung der Core Web Vitals wirklich auf SEO aus?

Ja, Google nutzt Page-Experience-Signale, einschließlich Core Web Vitals, als Rankingfaktor. Inhalte bleiben zwar vorrangig, aber gute CWV können dir einen Vorteil verschaffen, besonders in umkämpften Nischen.

Bereit zu optimieren? Beginne damit, deine aktuellen Werte mit PageSpeed Insights zu messen, und packe dann die größten Chancen an. Für einen schnellen serverseitigen Check probiere unseren Nginx Log Analyzer, um langsame Backend-Antworten zu identifizieren, die deinen LCP beeinträchtigen könnten.