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

Sie haben eine schnelle Website erstellt, aber Benutzer beschweren sich immer noch über langsame Ladezeiten oder ruckelige Interaktionen. Oder Ihre SEO-Rankings sind gesunken, und Sie vermuten, dass die Seitenerfahrung die Ursache ist. Core Web Vitals sind Googles Metriken zur Quantifizierung der Benutzererfahrung, und sie wirken sich direkt auf die Suchrankings aus. Dieser Leitfaden führt Sie durch die Messung und Verbesserung mit praktischen, umsetzbaren Schritten.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von drei Metriken, die Google zur Bewertung der Benutzererfahrung einer Webseite verwendet:

• Largest Contentful Paint (LCP): Misst die Ladeleistung. Es markiert den Zeitpunkt, an dem das größte Inhaltselement (z. B. Bild, Video oder Textblock) sichtbar wird. Ein guter LCP ist 2,5 Sekunden oder weniger.
• First Input Delay (FID): Misst die Interaktivität. Es zeichnet die Zeit von der ersten Interaktion eines Benutzers mit Ihrer Seite (z. B. Klick auf einen Link) bis zur Reaktion des Browsers auf. Ein guter FID ist 100 Millisekunden oder weniger.
• Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Es quantifiziert unerwartete Layoutverschiebungen während des Seitenladens. Ein guter CLS ist 0,1 oder weniger.

Diese Metriken sind Teil von Googles Page-Experience-Signal, daher kann ihre Optimierung sowohl die Benutzerzufriedenheit als auch die Suchrankings verbessern.

So messen Sie Core Web Vitals

Bevor Sie verbessern können, müssen Sie messen. Es gibt zwei Haupttypen von Tools: Lab-Tools (synthetische Tests) und Field-Tools (Monitoring echter Benutzer).

Lab-Tools

Lab-Tools simulieren einen Seitenaufruf in einer kontrollierten Umgebung. Sie eignen sich hervorragend zum Debuggen und Testen von Änderungen vor der Bereitstellung.

• Lighthouse: In Chrome DevTools integriert, prüft es Performance, Barrierefreiheit und SEO. Es liefert Bewertungen und konkrete Verbesserungsmöglichkeiten.
• WebPageTest: Ermöglicht Tests von mehreren Standorten und Geräten mit erweiterten Metriken und Filmstreifen.

Field-Tools

Field-Tools sammeln Daten von echten Benutzern und geben Ihnen ein wahres Bild der Performance über verschiedene Geräte und Netzwerke hinweg.

• Chrome User Experience Report (CrUX): Ein öffentlicher Datensatz mit Echtbenutzer-Metriken aus Chrome. Sie können CrUX-Daten in PageSpeed Insights oder BigQuery anzeigen.
• Google Search Console: Bietet einen Core-Web-Vitals-Bericht, der zeigt, wie Ihre Seiten basierend auf CrUX-Daten abschneiden.
• Web Vitals JavaScript-Bibliothek: Sie können Ihre Website instrumentieren, um Core-Web-Vitals-Daten an Ihre Analyseplattform zu senden.

Beginnen Sie mit der Überprüfung der Core Web Vitals Ihrer Website in der Search Console oder PageSpeed Insights. Verwenden Sie dann Lighthouse, um bestimmte Seiten zu debuggen.

Verbesserung des Largest Contentful Paint (LCP)

LCP ist oft die Metrik mit dem größten Optimierungspotenzial. So verbessern Sie sie:

1. Optimieren Sie Bilder

• Komprimieren Sie Bilder ohne Qualitätsverlust. Verwenden Sie Tools wie den Image Compressor, um Dateigrößen zu reduzieren.
• Verwenden Sie moderne Formate wie WebP oder AVIF, die eine bessere Komprimierung als JPEG oder PNG bieten.
• Implementieren Sie responsive Bilder mit srcset- und sizes-Attributen, um Bilder in passender Größe auszuliefern.
• Laden Sie Bilder unterhalb des sichtbaren Bereichs per Lazy-Loading, aber vermeiden Sie Lazy-Loading für das LCP-Bild.

2. Beseitigen Sie render-blockierende Ressourcen

• Minifizieren Sie CSS und JavaScript.
• Verzögern Sie nicht-kritisches JavaScript mit defer- oder async-Attributen.
• Binden Sie kritisches CSS inline ein und laden Sie den Rest asynchron.

3. Verbessern Sie die Serverantwortzeit

• Verwenden Sie ein Content Delivery Network (CDN), um Assets von Standorten näher am Benutzer auszuliefern.
• Aktivieren Sie Caching für statische Assets und API-Antworten.
• Optimieren Sie Datenbankabfragen und serverseitigen Code.

4. Preloaden Sie wichtige Ressourcen

Verwenden Sie <link rel="preload"> für kritische Assets wie Schriftarten, wichtige Bilder oder Skripte, die spät entdeckt werden.

Verbesserung des First Input Delay (FID)

FID misst die Reaktionsfähigkeit. Ein hoher FID bedeutet, dass der Hauptthread beschäftigt ist und nicht zeitnah auf Benutzereingaben reagieren kann.

1. Teilen Sie lange Aufgaben auf

Lange JavaScript-Aufgaben blockieren den Hauptthread. Teilen Sie sie mit setTimeout oder requestIdleCallback in kleinere Aufgaben auf.

2. Optimieren Sie die JavaScript-Ausführung

• Entfernen Sie nicht verwendetes JavaScript (Tree Shaking).
• Teilen Sie Ihre Bundles per Code-Splitting auf, sodass anfangs nur notwendiger Code geladen wird.
• Verwenden Sie Web Worker für rechenintensive Aufgaben.

3. Vermeiden Sie große Third-Party-Skripte

Third-Party-Skripte wie Analytics oder Werbung können den Hauptthread blockieren. Laden Sie sie asynchron und erwägen Sie die Verwendung eines Tag-Managers, um zu steuern, wann sie ausgeführt werden.

4. Reduzieren Sie die JavaScript-Startzeit

Minimieren Sie die Menge an JavaScript, die beim Seitenladen geparst und ausgeführt werden muss. Server-Side Rendering oder Static Site Generation können helfen.

Verbesserung des Cumulative Layout Shift (CLS)

CLS misst die visuelle Stabilität. Layoutverschiebungen treten auf, wenn Elemente unerwartet ihre Position ändern.

1. Geben Sie immer Größenattribute für Medien an

Legen Sie für Bilder und Videos width- und height-Attribute fest oder verwenden Sie CSS aspect-ratio, um Platz zu reservieren.

2. Reservieren Sie Platz für Anzeigen und Embeds

Wenn Sie dynamische Inhalte wie Anzeigen oder Iframes haben, reservieren Sie Platz dafür mit einem Platzhalter oder festen Abmessungen.

3. Vermeiden Sie das Einfügen von Inhalten über bestehenden Inhalten

Dynamisch eingefügte Inhalte (z. B. Banner, Benachrichtigungen), die bestehende Inhalte nach unten verschieben, verursachen Verschiebungen. Verwenden Sie Overlays oder reservieren Sie Platz.

4. Verwenden Sie Font-Display Swap

Benutzerdefinierte Schriftarten können FOIT (Flash of Invisible Text) oder FOUT (Flash of Unstyled Text) verursachen. Verwenden Sie font-display: swap, um sofort Fallback-Text anzuzeigen.

Vergleich der Core Web Vitals Metriken

Praktisches Beispiel: Optimierung eines Bildes für LCP

Angenommen, Ihr LCP-Element ist ein Hero-Bild. So optimieren Sie es:

<!-- Vorher: Nicht optimiert -->
<img src="#" alt="Hero">

<!-- Nachher: Optimiert -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">

Verwenden Sie den Image Compressor, um das Bild in WebP zu konvertieren und zu komprimieren. Setzen Sie fetchpriority="high", um dem Browser mitzuteilen, dass er es früh laden soll. Geben Sie Abmessungen an, um Layoutverschiebungen zu vermeiden.

Überwachung der Core Web Vitals im Laufe der Zeit

Optimierung ist keine einmalige Aufgabe. Richten Sie eine kontinuierliche Überwachung ein:

• Verwenden Sie die web-vitals-Bibliothek, um Metriken an Ihre Analyse zu senden.
• Richten Sie Warnungen in der Search Console für Regressionen ein.
• Führen Sie regelmäßige Audits mit Lighthouse in Ihrer CI/CD-Pipeline durch.

FAQ

Was sind Core Web Vitals und warum sind sie wichtig?

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

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

Überprüfen Sie sie nach größeren Bereitstellungen und überwachen Sie kontinuierlich über Field-Daten. Die Search Console bietet einen monatlichen Bericht, aber Sie können die web-vitals-Bibliothek für Echtzeit-Tracking verwenden.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Verbesserungen wie die Komprimierung von Bildern oder die Verwendung eines CDN können mit Plugins oder Tools durchgeführt werden. Tiefere Optimierungen erfordern jedoch oft Codeänderungen. Beginnen Sie mit Bildkomprimierung und Caching.

Bereit, Ihren LCP zu verbessern? Komprimieren Sie Ihre Bilder mit unserem kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.