Core Web Vitals: Web-Performance messen und verbessern

Sie haben eine moderne Web-App entwickelt, aber Nutzer beschweren sich, dass sie langsam ist. Die Suchrankings sinken, und Sie wissen nicht warum. Der Übeltäter könnten schlechte Core Web Vitals sein – Googles Metriken für die Nutzererfahrung. In diesem Leitfaden erfahren Sie, was sie sind, wie Sie sie messen und vor allem, wie Sie sie mit umsetzbaren Schritten verbessern können.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe spezifischer Metriken, die Google verwendet, um die Nutzererfahrung einer Webseite zu bewerten. Sie konzentrieren sich auf Ladeverhalten, Interaktivität und visuelle Stabilität:

• Largest Contentful Paint (LCP): Misst die Ladeleistung. Die Zeit, bis das größte Inhaltselement (z. B. Hero-Bild, Überschrift) sichtbar wird. Gut: ≤ 2,5 Sekunden.
• First Input Delay (FID): Misst die Interaktivität. Die Zeit von der ersten Interaktion eines Nutzers (z. B. Klick auf eine Schaltfläche) bis zur Reaktion des Browsers. Gut: ≤ 100 Millisekunden.
• Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Quantifiziert unerwartete Layoutverschiebungen während des Ladens. Gut: ≤ 0,1.

Diese Metriken sind Teil von Googles Page-Experience-Signalen und können die Suchrankings beeinflussen. Wichtiger ist jedoch, dass sie die tatsächliche Nutzerzufriedenheit widerspiegeln.

Wie man Core Web Vitals misst

Sie benötigen sowohl Lab- als auch Felddaten, um ein vollständiges Bild zu erhalten. Lab-Daten (synthetisch) helfen beim Debuggen von Problemen, während Felddaten (Real User Monitoring) die tatsächliche Leistung zeigen.

Lab-Tools

• Lighthouse: In Chrome DevTools integriert. Führen Sie ein Audit durch, um Bewertungen und Optimierungspotenziale zu erhalten.
• PageSpeed Insights: Kombiniert Lab- und Felddaten für eine URL.
• WebPageTest: Erweitertes Testen mit benutzerdefinierten Standorten und Geräten.

Feld-Tools

• Chrome User Experience Report (CrUX): Öffentlicher Datensatz mit Metriken echter Nutzer. Zugriff über PageSpeed Insights oder BigQuery.
• web-vitals JavaScript-Bibliothek: Fügen Sie sie Ihrer Website hinzu, um Metriken echter Nutzer zu sammeln und an Ihre Analytics zu senden.
• Search Console: Der Core-Web-Vitals-Bericht zeigt die Gruppenleistung basierend auf CrUX-Daten.

So verwenden Sie die web-vitals-Bibliothek zum Protokollieren von Metriken:

import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

LCP verbessern

LCP ist oft die schwierigste Metrik. Konzentrieren Sie sich auf diese Bereiche:

1. Bilder optimieren: Komprimieren Sie Bilder, verwenden Sie moderne Formate wie WebP oder AVIF und liefern Sie responsive Bilder mit srcset. Lazy-Loading für Bilder außerhalb des sichtbaren Bereichs.
2. Kritische Ressourcen vorladen: Verwenden Sie <link rel="preload"> für Hero-Bilder, Schriftarten und wichtiges CSS.
3. Serverantwortzeit reduzieren: Verwenden Sie ein CDN, aktivieren Sie Caching und optimieren Sie den Backend-Code.
4. Render-blockierende Ressourcen eliminieren: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches JS und vermeiden Sie große CSS-Dateien.
5. Ein CDN verwenden: Liefern Sie Assets von Edge-Standorten aus, die näher an den Nutzern liegen.

FID verbessern

Bei FID geht es um Reaktionsfähigkeit. Lange Aufgaben blockieren den Hauptthread und verzögern die Interaktivität.

1. Lange Aufgaben aufteilen: Verwenden Sie setTimeout oder requestIdleCallback, um den Hauptthread freizugeben.
2. JavaScript optimieren: Code-Splitting, Tree-Shaking und nicht-kritische Skripte verzögern.
3. Web Worker verwenden: Verlagern Sie schwere Berechnungen aus dem Hauptthread.
4. Auswirkungen von Drittanbietern reduzieren: Prüfen und begrenzen Sie Skripte von Drittanbietern.

CLS verbessern

CLS wird durch Elemente verursacht, die sich während des Ladens verschieben. Verhindern Sie dies durch:

1. Fügen Sie immer width- und height-Attribute bei Bildern und Videos hinzu. Dadurch wird Platz reserviert.
2. Reservieren Sie Platz für Anzeigen und Embeds: Verwenden Sie CSS aspect-ratio oder feste Container.
3. Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten: Außer als Reaktion auf eine Nutzerinteraktion.
4. Verwenden Sie CSS-Transforms für Animationen: Statt Eigenschaften, die Layout auslösen.
5. Schriftarten vorladen: Verwenden Sie font-display: swap, um unsichtbaren Text und Layoutverschiebungen zu vermeiden.

Vergleich der Core Web Vitals Metriken

Praktischer Workflow zur Verbesserung der Core Web Vitals

Befolgen Sie diesen Schritt-für-Schritt-Prozess:

1. Messen: Verwenden Sie PageSpeed Insights, um eine Baseline für Lab- und Felddaten zu erhalten.
2. Probleme identifizieren: Sehen Sie sich die Optimierungspotenziale und Diagnosen in Lighthouse an.
3. Priorisieren: Konzentrieren Sie sich zuerst auf die Metrik mit der schlechtesten Bewertung.
4. Korrekturen implementieren: Wenden Sie die oben aufgeführten Optimierungen an.
5. Testen: Führen Sie Lighthouse erneut aus und prüfen Sie die Felddaten nach der Bereitstellung.
6. Überwachen: Richten Sie Real-User-Monitoring mit der web-vitals-Bibliothek ein und verfolgen Sie die Entwicklung im Laufe der Zeit.

FAQ

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

Für LCP: Gut ≤ 2,5s, Verbesserungsbedarf ≤ 4s, schlecht > 4s. Für FID: Gut ≤ 100ms, Verbesserungsbedarf ≤ 300ms, schlecht > 300ms. Für CLS: Gut ≤ 0,1, Verbesserungsbedarf ≤ 0,25, schlecht > 0,25.

Wie oft sollte ich Core Web Vitals messen?

Überwachen Sie Felddaten kontinuierlich und führen Sie Lab-Tests nach wesentlichen Änderungen durch. Google aktualisiert die CrUX-Daten monatlich, daher sollten Sie die Search Console regelmäßig überprüfen.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Korrekturen wie Bildkomprimierung können mit Tools durchgeführt werden, aber viele erfordern Codeänderungen. Erwägen Sie die Verwendung eines Performance-Optimierungs-Plugins, wenn Sie ein CMS wie WordPress verwenden.

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