Core Web Vitals: Messen und Verbessern der Web-Performance

Ihre Nutzer erwarten schnelle, reibungslose Erlebnisse. Wenn sich Ihre Website langsam anfühlt, verlassen sie sie – und Suchmaschinen bemerken das. Core Web Vitals sind die Metriken, die die tatsächliche Benutzererfahrung quantifizieren: Ladegeschwindigkeit, Interaktivität und visuelle Stabilität. Dieser Leitfaden zeigt Ihnen, wie Sie sie messen und praktische Verbesserungen vornehmen können.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von drei Metriken, die von Google definiert wurden, um Schlüsselaspekte der Benutzererfahrung zu erfassen:

• Largest Contentful Paint (LCP): misst die Ladeleistung. Es markiert den Zeitpunkt, an dem das größte Inhaltselement (oft ein Hero-Bild oder eine Überschrift) sichtbar wird. Streben Sie einen LCP unter 2,5 Sekunden an.
• Interaction to Next Paint (INP): misst die Reaktionsfähigkeit. Es zeichnet die Zeit von einer Benutzerinteraktion (Klick, Tippen, Tastendruck) bis zur nächsten visuellen Aktualisierung auf. Streben Sie einen INP unter 200 Millisekunden an.
• Cumulative Layout Shift (CLS): misst die visuelle Stabilität. Es quantifiziert unerwartete Layoutverschiebungen während des Ladens. Streben Sie einen CLS unter 0,1 an.

Diese Schwellenwerte basieren auf Felddaten von echten Nutzern (75. Perzentil). Labordaten helfen bei der Diagnose von Problemen, aber Felddaten spiegeln die tatsächliche Erfahrung wider.

Wie man Core Web Vitals misst

Sie benötigen sowohl Feld- als auch Labordaten. Felddaten zeigen die Performance echter Nutzer; Labordaten ermöglichen es Ihnen, Änderungen zu debuggen und zu testen.

Felddaten-Tools

• Chrome UX Report (CrUX): aggregierte Echtnutzerdaten für Millionen von Websites. Zugriff über PageSpeed Insights, Search Console oder die CrUX API.
• web-vitals JavaScript-Bibliothek: sammeln Sie Ihre eigenen Felddaten, indem Sie Metriken an Ihren Analytics-Endpunkt senden.

Labordaten-Tools

• Lighthouse: in Chrome DevTools integriert, führt Audits durch und bietet Verbesserungsmöglichkeiten.
• WebPageTest: erweiterte Tests mit Netzwerkdrosselung und Filmstreifen.
• Chrome DevTools Performance-Panel: tiefgehende Analyse der Laufzeitperformance.

Beginnen Sie mit PageSpeed Insights: Es zeigt sowohl Feld- als auch Labordaten für eine URL an. Verwenden Sie dann Lighthouse lokal, um zu iterieren.

LCP verbessern

LCP ist oft die Metrik mit dem größten Optimierungspotenzial. Das größte Element ist normalerweise ein Bild oder ein Textblock. Optimieren Sie diese Bereiche:

1. Optimieren Sie das LCP-Bild: komprimieren Sie es, liefern Sie moderne Formate wie WebP oder AVIF und legen Sie explizite Abmessungen fest.
2. Preloaden Sie die LCP-Ressource: Verwenden Sie <link rel="preload"> für Bilder oder Schriftarten, die above the fold verwendet werden.
3. Beseitigen Sie render-blockierende Ressourcen: Inlinen Sie kritisches CSS, deferen Sie nicht-kritisches CSS und JavaScript.
4. Verwenden Sie ein CDN: Liefern Sie Assets von Standorten nahe den Nutzern aus.
5. Reduzieren Sie die Serverantwortzeit: Optimieren Sie das Backend, nutzen Sie Caching und erwägen Sie Edge-Rendering.

Beispiel: Preloaden Sie ein Hero-Bild:

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

INP verbessern

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

• Brechen Sie lange Aufgaben auf: Verwenden Sie setTimeout oder scheduler.yield(), um den Hauptthread freizugeben.
• Optimieren Sie Event-Handler: Debouncen oder drosseln Sie schnelle Events, vermeiden Sie schwere synchrone Arbeit.
• Reduzieren Sie JavaScript: Code-Splitting, Tree-Shaking und Deferen von nicht-kritischen Skripten.
• Verwenden Sie Web Worker für CPU-intensive Aufgaben.
• Vermeiden Sie große DOM-Updates: Bündeln Sie DOM-Änderungen und verwenden Sie requestAnimationFrame.

Messen Sie INP mit der web-vitals-Bibliothek und identifizieren Sie langsame Interaktionen im Performance-Panel.

CLS verbessern

Layoutverschiebungen treten auf, wenn Elemente unerwartet ihre Position ändern. Verhindern Sie sie durch:

• Festlegen von Größenattributen für Bilder und Videos (Breite und Höhe).
• Reservieren von Platz für Anzeigen und Embeds mit CSS aspect-ratio oder festen Containern.
• Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten, es sei denn als Reaktion auf eine Benutzerinteraktion.
• Verwenden Sie font-display: swap und preloaden Sie Schriftarten, um FOIT/FOUT-Verschiebungen zu minimieren.
• Animieren Sie mit transform anstelle von Eigenschaften, die Layout auslösen.

Schneller Vergleich: Metriken und Ziele

Überwachen und iterieren

Performance ist keine einmalige Korrektur. Richten Sie kontinuierliche Überwachung ein:

• Verwenden Sie die web-vitals-Bibliothek, um Metriken an Ihre Analytics zu senden.
• Richten Sie Warnungen für Regressionen in Ihrer CI/CD-Pipeline mit Lighthouse CI ein.
• Überprüfen Sie regelmäßig die Felddaten in der Search Console.

Denken Sie daran, dass Verbesserungen mit Echtnutzerdaten validiert werden sollten, nicht nur mit Laborwerten.

FAQ

Was sind Core Web Vitals und warum sind sie wichtig?

Core Web Vitals sind nutzerzentrierte Performance-Metriken (LCP, INP, CLS), die Ladeverhalten, Interaktivität und visuelle Stabilität messen. Sie sind wichtig, weil sie mit der Benutzererfahrung korrelieren und von Google als Ranking-Signal verwendet werden.

Wie oft sollte ich Core Web Vitals überprüfen?

Überprüfen Sie Felddaten monatlich und nach größeren Releases. Verwenden Sie Labortools während der Entwicklung, um Regressionen frühzeitig zu erkennen. Kontinuierliche Überwachung mit Echtnutzer-Metriken ist ideal.

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

Ja. Viele Verbesserungen – wie Bildoptimierung, Preloading wichtiger Ressourcen, Deferen von Skripten und Festlegen von Elementabmessungen – können schrittweise ohne vollständiges Redesign angewendet werden.

Müssen Sie Bilder schnell komprimieren, um einen besseren LCP zu erzielen? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.