Core Web Vitals: Messen und verbessern für bessere Web-Performance

Ihre Nutzer sind ungeduldig. Wenn Ihre Seite zu lange lädt oder herumspringt, während sie versuchen zu lesen, verlassen sie die Seite. Google weiß das, und sein Ranking-Algorithmus verwendet Core Web Vitals, um die reale Nutzererfahrung zu messen. Aber über SEO hinaus beeinflussen Core Web Vitals direkt die Konversionsraten und die Nutzerzufriedenheit. In diesem Leitfaden erklären wir, was jede Metrik bedeutet, wie Sie sie genau messen und – am wichtigsten – wie Sie sie mit praktischen, codebasierten Korrekturen verbessern können.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von drei Metriken, die Schlüsselaspekte der Nutzererfahrung quantifizieren: Laden, Interaktivität und visuelle Stabilität. Sie sind Teil der Page Experience-Signale von Google.

• Largest Contentful Paint (LCP): Misst die Ladeleistung. Es markiert den Zeitpunkt, an dem das größte Inhaltselement (Bild, Video oder Textblock) sichtbar wird. Streben Sie einen LCP unter 2,5 Sekunden an.
• Interaction to Next Paint (INP): Misst die Reaktionsfähigkeit. Es erfasst die Latenz aller Interaktionen (Klicks, Taps, Tastendrücke) und meldet die längste. Streben Sie einen INP unter 200 Millisekunden an.
• Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Es quantifiziert unerwartete Layoutverschiebungen während des Seitenladens. Streben Sie einen CLS unter 0,1 an.

Diese Schwellenwerte basieren auf Felddaten von echten Nutzern, nicht auf Labortests. Deshalb ist korrektes Messen entscheidend.

Wie man Core Web Vitals misst

Sie benötigen sowohl Labordaten als auch Felddaten. Labor-Tools helfen beim Debuggen; Felddaten spiegeln die reale Nutzererfahrung wider.

Feld-Tools (Real User Monitoring)

• Chrome User Experience Report (CrUX): Googles öffentlicher Datensatz mit Echtnutzer-Metriken. Anzeige in PageSpeed Insights oder Search Console.
• PageSpeed Insights: Zeigt sowohl Labor- (Lighthouse) als auch Felddaten (CrUX) für eine URL.
• Search Console Core Web Vitals-Bericht: Gruppiert URLs nach Status und Metrik.
• Web Vitals JavaScript-Bibliothek: Sammeln Sie Ihre eigenen Felddaten über die web-vitals-Bibliothek und senden Sie sie an Ihre Analytics.

Labor-Tools (Synthetische Tests)

• Lighthouse: In Chrome DevTools integriert. Liefert Labormetriken und Optimierungsmöglichkeiten.
• WebPageTest: Erweiterte Tests mit Filmstreifen und Wasserfalldiagrammen.
• Chrome DevTools Performance-Panel: Tiefe Einblicke in die Laufzeitperformance.

Beginnen Sie mit PageSpeed Insights für einen schnellen Überblick und verwenden Sie dann DevTools zum Debuggen spezifischer Probleme.

LCP verbessern: Hauptinhalt schneller laden

LCP ist oft die Metrik mit dem größten Einfluss. Häufige Ursachen für schlechten LCP sind langsame Serverantwort, render-blockierende Ressourcen und nicht optimierte Bilder.

1. Bilder optimieren: Komprimieren Sie Bilder, verwenden Sie moderne Formate wie WebP oder AVIF und liefern Sie responsive Bilder mit srcset. Tools wie Image Compressor können helfen, die Dateigröße ohne sichtbaren Qualitätsverlust zu reduzieren.
2. LCP-Bild vorladen: Fügen Sie <link rel="preload"> für das Hero-Bild hinzu, um es früher zu laden.
3. Serverantwortzeit reduzieren: Verwenden Sie ein CDN, aktivieren Sie Caching und optimieren Sie Backend-Abfragen. Für Nginx ziehen Sie fastcgi_cache oder proxy_cache in Betracht.
4. Render-blockierende Ressourcen eliminieren: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches CSS und JavaScript.
5. Content Delivery Network (CDN) verwenden: Liefern Sie Assets von Standorten näher am Nutzer aus.

<!-- LCP-Bild vorladen -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Responsive Bilder -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">

INP verbessern: Interaktionen sofort spürbar machen

INP ersetzte im März 2024 First Input Delay (FID). Es misst die gesamte Dauer von Interaktionen, nicht nur die Verzögerung vor der Verarbeitung. Um INP zu verbessern, müssen Sie die JavaScript-Ausführungszeit reduzieren und lange Aufgaben vermeiden.

1. Lange Aufgaben aufteilen: Verwenden Sie setTimeout oder requestIdleCallback, um den Hauptthread freizugeben.
2. Event-Handler optimieren: Entprellen oder drosseln Sie teure Handler und vermeiden Sie Layout-Thrashing.
3. JavaScript-Bundle-Größe reduzieren: Code-Splitting, Tree-Shaking und Lazy-Loading nicht-kritischer Skripte.
4. Web Worker verwenden: Verlagern Sie schwere Berechnungen aus dem Hauptthread.
5. Drittanbieter-Skripte minimieren: Sie blockieren oft den Hauptthread. Laden Sie sie asynchron oder verzögert.

Verwenden Sie das Performance-Panel in DevTools, um Interaktionen aufzuzeichnen und lange Aufgaben zu identifizieren.

CLS verbessern: Layout stabil halten

CLS tritt auf, wenn Elemente unerwartet verschoben werden. Häufige Ursachen sind Bilder ohne Abmessungen, Anzeigen, Einbettungen und dynamisch eingefügter Inhalt.

1. Setzen Sie immer width- und height-Attribute bei Bildern und Videos: Dies ermöglicht dem Browser, Platz zu reservieren.
2. Reservieren Sie Platz für Anzeigen und Einbettungen: Verwenden Sie CSS aspect-ratio oder Container mit fester Größe.
3. Vermeiden Sie das Einfügen von Inhalt über bestehendem Inhalt: Wenn es sein muss, tun Sie es als Reaktion auf eine Nutzerinteraktion.
4. Verwenden Sie font-display: swap mit Vorsicht: Swap kann Layoutverschiebungen verursachen, wenn die Schriftmetriken abweichen. Ziehen Sie font-display: optional in Betracht oder laden Sie Schriftarten vor.
5. Bleiben Sie bei CSS-Transforms für Animationen: Sie lösen keine Layoutverschiebungen aus.

<!-- Platz mit aspect-ratio reservieren -->
<img src="#" width="800" height="600" alt="...">

Vergleich der Core Web Vitals Metriken

Überwachung und kontinuierliche Verbesserung

Die Verbesserung der Core Web Vitals ist keine einmalige Aufgabe. Nachdem Sie Korrekturen bereitgestellt haben, überwachen Sie die Felddaten, um sicherzustellen, dass keine Regressionen auftreten. Richten Sie Warnungen in Ihrem RUM-Tool ein, wenn Metriken Schwellenwerte überschreiten. Führen Sie regelmäßig Lighthouse in CI aus, um Performance-Regressionen zu erkennen, bevor sie die Produktion erreichen.

Denken Sie daran, dass Performance ein Feature ist. Indem Sie Core Web Vitals priorisieren, bieten Sie eine bessere Erfahrung, die Nutzer bindet und Ihre Suchrankings verbessert.

FAQ

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

Für LCP gilt: gut ist unter 2,5 Sekunden, verbesserungswürdig ist 2,5–4,0 Sekunden und schlecht ist über 4,0 Sekunden. Für INP gilt: gut ist unter 200 Millisekunden, verbesserungswürdig ist 200–500 Millisekunden und schlecht ist über 500 Millisekunden. Für CLS gilt: gut ist unter 0,1, verbesserungswürdig ist 0,1–0,25 und schlecht ist über 0,25.

Wie oft sollte ich Core Web Vitals messen?

Felddaten werden in CrUX täglich aktualisiert, aber es handelt sich um einen gleitenden 28-Tage-Durchschnitt. Sie sollten kontinuierlich überwachen und nach jeder signifikanten Codeänderung Labortests durchführen. Richten Sie automatisierte Lighthouse-Läufe in Ihrer CI/CD-Pipeline ein, um Regressionen frühzeitig zu erkennen.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Korrekturen wie das Komprimieren von Bildern oder das Aktivieren von Caching können über Plugins oder Hosting-Einstellungen vorgenommen werden. Tiefere Optimierungen wie Code-Splitting oder das Eliminieren render-blockierender Ressourcen erfordern jedoch in der Regel die Einbeziehung eines Entwicklers. Priorisieren Sie die Metriken mit der größten Auswirkung basierend auf Ihren Felddaten.

Bereit, Ihre Bilder für einen besseren LCP zu optimieren? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.