Core Web Vitals: Web-Performance messen und verbessern

Deine Nutzer erwarten schnelle, reibungslose Erlebnisse. Googles Core Web Vitals (CWV) quantifizieren diese Erfahrung: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Schlechte Werte schaden SEO und Conversions. Dieser Leitfaden zeigt dir, wie du jede Metrik messen und mit umsetzbaren Schritten verbessern kannst.

Was sind Core Web Vitals?

Core Web Vitals sind drei nutzerzentrierte Metriken, die Google als Ranking-Signale verwendet:

• LCP: Wie lange es dauert, bis das größte Inhaltselement (Bild, Textblock) sichtbar wird. Gut: ≤2,5 s.
• FID: Zeit von der ersten Nutzerinteraktion (Klick, Tap) bis zur Reaktion des Browsers. Gut: ≤100 ms.
• CLS: Visuelle Stabilität – wie stark sich das Seitenlayout unerwartet verschiebt. Gut: ≤0,1.

Diese Metriken spiegeln die reale Nutzererfahrung wider, nicht nur Laborbedingungen. Ihre Verbesserung lässt deine Website schneller und stabiler wirken.

So misst du Core Web Vitals

Du brauchst sowohl Lab- als auch Felddaten. Lab-Tools helfen beim Debuggen; Felddaten (Real User Monitoring) zeigen die tatsächliche Performance.

Lab-Tools

• Lighthouse (in Chrome DevTools): Führe Audits für Performance, Barrierefreiheit und SEO durch. Es meldet LCP, CLS und TBT (ein Proxy für FID).
• WebPageTest: Fortgeschrittene Tests mit Filmstrips und Waterfall-Diagrammen.
• Chrome DevTools Performance-Panel: Aufzeichnen und Analysieren der Laufzeit-Performance.

Feld-Tools

• Chrome User Experience Report (CrUX): Öffentlicher Datensatz mit Real-User-Metriken für Millionen von Websites.
• Google Search Console: Der Core-Web-Vitals-Bericht zeigt URL-Gruppen, die Aufmerksamkeit benötigen.
• web-vitals JavaScript-Bibliothek: Erfasse Real-User-Metriken und sende sie an deine Analytics.

Nutze Felddaten, um Problemseiten zu identifizieren, und Lab-Tools, um sie zu diagnostizieren und zu beheben.

Largest Contentful Paint (LCP) verbessern

LCP ist oft das Hero-Bild oder die Hauptüberschrift. So beschleunigst du es:

1. Bilder optimieren: Komprimieren, moderne Formate (WebP, AVIF) verwenden und responsive Größen ausliefern. Tools wie der Image Compressor können helfen, die Dateigröße ohne Qualitätsverlust zu reduzieren.
2. Kritische Ressourcen vorladen: Verwende <link rel="preload"> für Hero-Bilder, Fonts und kritisches CSS.
3. Serverantwortzeit reduzieren: Nutze Caching, CDNs und optimiere Backend-Abfragen.
4. Render-blockierende Ressourcen beseitigen: Nicht-kritisches JS und CSS aufschieben, kritisches CSS inline einbinden.
5. Ein CDN verwenden: Assets von Standorten nahe der Nutzer ausliefern.

Beispiel: Lade dein LCP-Bild vor:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

First Input Delay (FID) verbessern

FID misst die Reaktionsfähigkeit. Eine lange Verzögerung bedeutet, dass der Main Thread beschäftigt ist. So verbesserst du sie:

• Lange Tasks aufteilen: Verwende setTimeout oder requestIdleCallback, um den Main Thread freizugeben.
• JavaScript optimieren: Code-Splitting, Tree-Shaking und nicht-kritische Skripte aufschieben.
• Auswirkungen von Drittanbietern reduzieren: Lade Analytics und Werbung asynchron oder erst nach einer Interaktion.
• Web Worker für rechenintensive Aufgaben verwenden.

Beachte auch Interaction to Next Paint (INP), das FID im März 2024 ablöst. INP misst die gesamte Reaktionsfähigkeit über den gesamten Seitenlebenszyklus. Dieselben Optimierungen gelten.

Cumulative Layout Shift (CLS) verbessern

CLS entsteht, wenn sich Elemente unerwartet verschieben. Häufige Ursachen: Bilder ohne Abmessungen, Werbung, Fonts und dynamische Inhalte. Lösungen:

• Immer Breite und Höhe festlegen bei Bildern und Videos oder CSS aspect-ratio verwenden.
• Platz für Werbung und Embeds reservieren: Platzhalter-Elemente mit fester Größe verwenden.
• Keine Inhalte über bestehenden Inhalten einfügen, außer als Reaktion auf eine Nutzerinteraktion.
• font-display: swap und Font-Preloading verwenden, um unsichtbaren Text (FOIT) und Layout-Verschiebungen zu vermeiden.
• Mit transform animieren statt mit Eigenschaften, die Layout auslösen.

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

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

Tools und Workflow

Integriere Performance in deinen Entwicklungs-Workflow:

1. Führe Lighthouse in der CI aus, um Regressionen zu erkennen.
2. Nutze die web-vitals-Bibliothek, um Felddaten an deine Analytics zu senden.
3. Überwache CrUX und die Search Console auf Real-User-Trends.
4. Priorisiere Fixes nach Wirkung: Oft bringen LCP und CLS die größten Gewinne.

Für eine schnelle Bildoptimierung probiere unseren Image Compressor, um LCP-kritische Bilder zu verkleinern.

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.

Wie oft sollte ich Core Web Vitals messen?

Überwache Felddaten kontinuierlich via RUM. Führe Lab-Audits bei jeder signifikanten Codeänderung und mindestens monatlich durch, um Regressionen zu erkennen.

Beeinflusst die Verbesserung der Core Web Vitals wirklich das SEO?

Ja, Google verwendet die Seitenerfahrung (einschließlich CWV) als Ranking-Signal. Inhalte bleiben zwar vorrangig, aber gute CWV können dir einen Vorteil verschaffen und die Nutzerzufriedenheit erhöhen.