Core Web Vitals: Messen und Verbessern der Web-Performance
Warum Core Web Vitals wichtig sind
Sie haben eine schnelle Website erstellt, aber Benutzer beschweren sich immer noch über langsames Laden oder ruckelige Interaktionen. Suchmaschinen könnten Sie auch niedriger einstufen, wenn Ihre Core Web Vitals (CWV) schlecht sind. CWV sind eine Reihe von Metriken, die Google zur Quantifizierung der Benutzererfahrung verwendet: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Im Jahr 2021 machte Google diese Metriken zu einem Ranking-Faktor, daher kann ihre Vernachlässigung Ihrer SEO und Nutzerbindung schaden.
Dieser Leitfaden erklärt, wie Sie jede Metrik messen, häufige Probleme identifizieren und praktische Korrekturen anwenden. Wir konzentrieren uns auf umsetzbare Schritte, die Sie heute ergreifen können, ohne auf jeden Sonderfall einzugehen.
Die drei Core Web Vitals verstehen
Bevor Sie optimieren, wissen Sie, was jede Metrik misst und ihre Schwellenwerte.
| Metrik | Misst | Gut | Verbesserungswürdig | Schlecht |
|---|---|---|---|---|
| LCP | Ladeleistung: Zeit bis das größte Inhaltselement gerendert wird. | ≤ 2,5s | 2,5s – 4,0s | > 4,0s |
| FID | Interaktivität: Zeit von der ersten Benutzerinteraktion bis zur Browserantwort. | ≤ 100ms | 100ms – 300ms | > 300ms |
| CLS | Visuelle Stabilität: unerwartete Layoutverschiebungen. | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |
Hinweis: FID wird im März 2024 durch Interaction to Next Paint (INP) ersetzt, aber die Optimierungsprinzipien sind ähnlich. Wir konzentrieren uns hier auf FID, da es noch weit verbreitet ist.
So messen Sie Core Web Vitals
Sie benötigen sowohl Lab- als auch Felddaten. Labdaten (synthetisch) helfen beim Debuggen; Felddaten (echte Benutzer) zeigen die tatsächliche Leistung.
Lab-Tools
- Lighthouse in Chrome DevTools: Führen Sie Audits für Performance, Barrierefreiheit und SEO durch. Es meldet LCP, CLS und TBT (ein Proxy für FID).
- WebPageTest: Erweiterte Tests mit Filmstreifen und Wasserfall-Diagrammen.
- PageSpeed Insights: Kombiniert Lab- und Felddaten (falls verfügbar).
Feld-Tools
- Chrome User Experience Report (CrUX): Öffentlicher Datensatz mit Metriken echter Benutzer. Zugriff über PageSpeed Insights oder BigQuery.
- web-vitals JavaScript-Bibliothek: Sammeln Sie Metriken echter Benutzer in Ihrer Analytik.
- Search Console Core Web Vitals-Bericht: Zeigt URL-Gruppen mit Problemen.
Beginnen Sie mit PageSpeed Insights für einen schnellen Überblick und verwenden Sie dann Lighthouse für detaillierte Diagnosen.
Verbesserung von Largest Contentful Paint (LCP)
LCP leidet oft unter langsamer Serverantwort, render-blockierenden Ressourcen oder nicht optimierten Bildern. Befolgen Sie diese Schritte:
- Optimieren Sie die Serverantwortzeit: Verwenden Sie Caching, ein CDN und effizienten Backend-Code. Streben Sie eine Time to First Byte (TTFB) unter 0,8s an.
- Beseitigen Sie render-blockierende Ressourcen: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches CSS und JavaScript. Verwenden Sie
asyncoderdeferfür Skripte. - Optimieren Sie Bilder: Komprimieren Sie Bilder, verwenden Sie moderne Formate (WebP, AVIF) und implementieren Sie responsive Bilder mit
srcset. Für das LCP-Bild laden Sie es mit<link rel="preload">vor. - Verwenden Sie ein CDN: Stellen Sie statische Assets von Edge-Standorten bereit.
- Cachen Sie Assets: Setzen Sie lange Cache-Lebensdauern für statische Ressourcen.
Beispiel: Laden Sie das LCP-Bild vor und setzen Sie explizite Abmessungen, um Layoutverschiebungen zu vermeiden.
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">Verbesserung von First Input Delay (FID)
FID misst die Reaktionsfähigkeit. Lange JavaScript-Aufgaben blockieren den Hauptthread und verzögern Interaktionen. Um FID zu verbessern:
- Teilen Sie lange Aufgaben auf: Verwenden Sie
setTimeoutoderrequestIdleCallback, um den Hauptthread freizugeben. - Minimieren Sie die Arbeit im Hauptthread: Reduzieren Sie die JavaScript-Ausführungszeit, vermeiden Sie große Bundles und verwenden Sie Code-Splitting.
- Optimieren Sie Event-Handler: Entprellen oder drosseln Sie teure Handler.
- Verwenden Sie Web Worker für CPU-intensive Aufgaben.
- Vermeiden Sie große Third-Party-Skripte: Überprüfen und entfernen Sie unnötige Skripte.
Tools wie Lighthouse markieren lange Aufgaben. Verwenden Sie das Performance-Panel in Chrome DevTools, um sie zu identifizieren.
Verbesserung von Cumulative Layout Shift (CLS)
CLS misst die visuelle Stabilität. Layoutverschiebungen treten auf, wenn Elemente unerwartet ihre Position ändern. Häufige Ursachen und Korrekturen:
- Bilder ohne Abmessungen: Setzen Sie immer
width- undheight-Attribute oder verwenden Sie CSSaspect-ratio. - Anzeigen, Einbettungen und Iframes: Reservieren Sie Platz mit einem Platzhalter oder legen Sie feste Abmessungen fest.
- Dynamischer Inhalt: Vermeiden Sie das Einfügen von Inhalt über vorhandenem Inhalt, es sei denn als Reaktion auf Benutzerinteraktion.
- Webfonts: Verwenden Sie
font-display: swapund laden Sie Schriftarten vor, um unsichtbaren Text (FOIT) und Layoutverschiebungen zu vermeiden. - Animationen: Bevorzugen Sie CSS
transformundopacityfür Animationen, da sie kein Layout auslösen.
Testen Sie mit der Layout Instability API in DevTools oder verwenden Sie die web-vitals-Bibliothek, um CLS im Feld zu protokollieren.
Praktischer Workflow für kontinuierliche Überwachung
Optimierung ist keine einmalige Aufgabe. Richten Sie eine Überwachung ein:
- Instrumentieren Sie Ihre Website mit der
web-vitals-Bibliothek und senden Sie Metriken an Ihre Analyseplattform. - Richten Sie Warnungen ein, wenn Metriken Schwellenwerte überschreiten.
- Führen Sie regelmäßig Lighthouse in CI/CD aus, um Regressionen zu erkennen.
- Verwenden Sie die Search Console, um Trends bei Felddaten zu überwachen.
Denken Sie daran, dass Felddaten für das Ranking entscheidend sind. Labdaten helfen beim Debuggen, aber validieren Sie immer mit echten Benutzern.
FAQ
Was sind die aktuellen Schwellenwerte für Core Web Vitals?
Stand 2023 sind die Schwellenwerte: LCP gut ≤2,5s, verbesserungswürdig 2,5s–4,0s, schlecht >4,0s; FID gut ≤100ms, verbesserungswürdig 100ms–300ms, schlecht >300ms; CLS gut ≤0,1, verbesserungswürdig 0,1–0,25, schlecht >0,25. Beachten Sie, dass FID 2024 durch INP ersetzt wird.
Wie oft sollte ich Core Web Vitals messen?
Überwachen Sie Felddaten kontinuierlich über Analysen und führen Sie Labortests (z. B. Lighthouse) bei jeder Bereitstellung oder mindestens wöchentlich durch. Größere Änderungen sollten ein neues Audit auslösen.
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 (z. B. Code-Splitting, kritisches CSS) erfordern jedoch in der Regel Entwicklungsarbeit.
Bereit, Ihre Bilder für ein besseres LCP zu optimieren? Probieren Sie unseren kostenlosen Bildkompressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.