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

Sie haben eine schnelle Website erstellt, aber Nutzer beschweren sich immer noch über Langsamkeit. Oder vielleicht sind Ihre SEO-Rankings nach einem Google-Update gefallen. Der Übeltäter könnten die Core Web Vitals sein – eine Reihe von Metriken, die die reale Nutzererfahrung quantifizieren. Sie zu ignorieren kann sowohl die Benutzerfreundlichkeit als auch die Sichtbarkeit in der Suche beeinträchtigen. Dieser Leitfaden führt Sie durch die Messung und Verbesserung jedes Vitals, mit praktischen Schritten, die Sie heute umsetzen können.

Was sind Core Web Vitals?

Core Web Vitals sind drei spezifische Metriken, die Google zur Bewertung der Seitenerfahrung verwendet:

• Largest Contentful Paint (LCP): Misst die Ladeleistung. Es wird die Zeit erfasst, die das größte Inhaltselement (Bild, Video oder Textblock) benötigt, um sichtbar zu werden. Ein guter LCP liegt bei 2,5 Sekunden oder weniger.
• Interaction to Next Paint (INP): Misst die Interaktivität. Es wird die Latenz aller Interaktionen (Klicks, Taps, Tastendrücke) aufgezeichnet und ein hoher Perzentilwert gemeldet. Ein guter INP liegt bei 200 Millisekunden oder weniger.
• Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Es quantifiziert unerwartete Layoutverschiebungen während des Ladens. Ein guter CLS liegt bei 0,1 oder weniger.

Diese Metriken sind Teil von Googles Seitenerfahrungssignalen, wirken sich aber auch direkt darauf aus, wie Nutzer Ihre Website wahrnehmen. Ein langsamer LCP frustriert Nutzer, ein hoher INP lässt die Seite nicht reagierend erscheinen, und CLS verursacht Fehlklicks.

Wie man Core Web Vitals misst

Sie benötigen sowohl Lab- als auch Felddaten, um ein vollständiges Bild zu erhalten. Lab-Tools simulieren Bedingungen, während Felddaten von echten Nutzern stammen.

Lab-Tools

• Lighthouse: In Chrome DevTools integriert, prüft es die Performance und liefert Bewertungen für LCP, CLS und TBT (ein Proxy für INP). Führen Sie es im Inkognito-Modus mit Drosselung aus, um mobile Bedingungen zu simulieren.
• WebPageTest: Bietet erweiterte Tests von mehreren Standorten und Geräten, mit Filmstreifenansichten und Wasserfalldiagrammen.
• PageSpeed Insights: Kombiniert Lab- und Felddaten (aus CrUX) in einem Bericht.

Feld-Tools

• Chrome User Experience Report (CrUX): Ein öffentlicher Datensatz mit Echtnutzer-Metriken für Millionen von Websites. Zugriff über PageSpeed Insights oder die CrUX-API.
• Google Search Console: Zeigt den Core Web Vitals-Status für Ihre Website, gruppiert nach URL.
• web-vitals JavaScript-Bibliothek: Fügen Sie sie Ihrer Website hinzu, um Echtnutzer-Metriken zu sammeln und an Ihre Analytics zu senden.

Verwenden Sie Lab-Tools zum Debuggen und Felddaten zur Validierung von Korrekturen. Ein häufiger Fehler ist die Optimierung nur für Lab-Werte, während die echte Nutzererfahrung ignoriert wird.

LCP verbessern

LCP ist oft die Metrik mit der größten Wirkung, die behoben werden muss. So optimieren Sie sie:

1. Bilder optimieren: Komprimieren Sie Bilder ohne Qualitätsverlust, verwenden Sie moderne Formate wie WebP oder AVIF und liefern Sie responsive Bilder mit srcset. Tools wie der Image Compressor können helfen, Dateigrößen zu reduzieren.
2. Kritische Ressourcen vorladen: Verwenden Sie <link rel="preload"> für Hero-Bilder, Schriftarten und wichtige CSS/JS-Dateien.
3. Render-blockierende Ressourcen eliminieren: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches JavaScript und vermeiden Sie große CSS-Dateien.
4. Ein CDN verwenden: Liefern Sie Assets von Edge-Standorten in der Nähe der Nutzer, um die Latenz zu reduzieren.
5. Assets cachen: Legen Sie lange Cache-Laufzeiten für statische Ressourcen fest, mit Cache-Busting über Dateinamen.
6. Serverantwortzeit optimieren: Verwenden Sie schnelles Hosting, aktivieren Sie Komprimierung (Brotli oder Gzip) und optimieren Sie Datenbankabfragen.

Für ein detailliertes Beispiel betrachten Sie ein Hero-Bild. Anstatt ein 2MB-JPEG zu liefern, komprimieren Sie es auf unter 200KB, konvertieren es in WebP und laden es vor. Allein dies kann den LCP um Sekunden reduzieren.

INP verbessern

INP misst die Reaktionsfähigkeit. Ein hoher INP resultiert oft aus langen JavaScript-Aufgaben, die den Hauptthread blockieren.

1. Lange Aufgaben aufteilen: Verwenden Sie setTimeout oder requestIdleCallback, um den Hauptthread freizugeben.
2. Event-Handler optimieren: Entprellen oder drosseln Sie häufige Ereignisse wie Scroll oder Resize. Vermeiden Sie schwere Berechnungen in Handlern.
3. JavaScript-Ausführung reduzieren: Code-Splitting, Tree-Shaking und Lazy-Loading von nicht-kritischem JS.
4. Web Worker verwenden: Verlagern Sie teure Aufgaben in einen Worker-Thread.
5. Drittanbieter-Skripte minimieren: Überprüfen und entfernen Sie unnötige Analytics, Werbung oder Social-Widgets.

Testen Sie INP, indem Sie im Chrome DevTools Performance-Panel mit Ihrer Seite interagieren. Suchen Sie nach langen Aufgaben (rote Dreiecke) und optimieren Sie diese.

CLS verbessern

CLS dreht sich um visuelle Stabilität. Unerwartete Verschiebungen ärgern Nutzer und verursachen Fehlklicks.

1. Dimensionen für Bilder und Videos festlegen: Fügen Sie immer width- und height-Attribute hinzu oder verwenden Sie CSS aspect-ratio.
2. Platz für Anzeigen und Embeds reservieren: Verwenden Sie Platzhalter mit festen Größen.
3. Vermeiden Sie das Einfügen von Inhalten über bestehenden Inhalten: Außer bei nutzerausgelösten Interaktionen.
4. Verwenden Sie font-display: swap: Aber beachten Sie, dass das Austauschen von Schriftarten Verschiebungen verursachen kann. Erwägen Sie das Vorladen von Schriftarten oder die Verwendung von size-adjust.
5. CSS-Transforms für Animationen verwenden: Anstelle von Eigenschaften, die Layout auslösen.

Verwenden Sie die Funktion „Layout Shift Regions“ in Chrome DevTools, um Verschiebungen zu visualisieren.

Tools und Workflow

Integrieren Sie die Überwachung der Core Web Vitals in Ihren Entwicklungsworkflow:

• Führen Sie Lighthouse in CI aus, um Regressionen zu erkennen.
• Verwenden Sie die web-vitals-Bibliothek, um Felddaten zu sammeln und Alarme einzurichten.
• Überprüfen Sie regelmäßig die Search Console auf Probleme.
• Priorisieren Sie Korrekturen basierend auf Wirkung und Aufwand.

Denken Sie daran, dass Core Web Vitals nur ein Teil der Performance sind. Berücksichtigen Sie immer die gesamte Nutzererfahrung.

FAQ

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

Gute Schwellenwerte: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. Verbesserungswürdig: LCP ≤ 4s, INP ≤ 500ms, CLS ≤ 0,25. Schlecht: über diesen Werten.

Wie oft sollte ich Core Web Vitals messen?

Überwachen Sie Felddaten kontinuierlich und führen Sie Lab-Tests nach signifikanten Änderungen durch. Prüfen Sie mindestens monatlich und nach Deployments.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Korrekturen wie Bildkomprimierung und Caching können über Plugins oder CDN-Einstellungen vorgenommen werden. Aber tiefergehende Optimierungen erfordern oft Codeänderungen.

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