Core Web Vitals: Messen und verbessern für bessere Web-Performance
Du hast eine schnelle Website gebaut, aber Nutzer beschweren sich trotzdem über Langsamkeit. Oder deine SEO-Rankings stagnieren trotz großartiger Inhalte. Der Übeltäter könnten die Core Web Vitals sein – Googles Metriken für die User Experience. In diesem Leitfaden erfährst du, was sie sind, wie du sie misst und mit welchen praktischen Schritten du jede einzelne verbessern kannst.
Was sind Core Web Vitals?
Core Web Vitals sind drei spezifische Metriken, mit denen Google die User Experience quantifiziert:
- Largest Contentful Paint (LCP): Misst die Ladeleistung. Sie sollte innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite auftreten.
- Interaction to Next Paint (INP): Misst die Reaktionsfähigkeit. Sie sollte bei 75 % der Seitenaufrufe unter 200 Millisekunden liegen.
- Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Sie sollte unter 0,1 liegen.
Diese Metriken sind Teil der Page-Experience-Signale von Google und können deine Suchrankings beeinflussen. Noch wichtiger: Sie spiegeln die echte User Experience wider – langsame Websites frustrieren Besucher und vertreiben sie.
So misst du Core Web Vitals
Du kannst nicht verbessern, was du nicht misst. Es gibt zwei Haupttypen von Tools: Lab-Tools (synthetische Tests) und Field-Tools (Real User Monitoring).
Lab-Tools
- Lighthouse: In Chrome DevTools integriert (Tab „Audits“). Liefert eine Bewertung und konkrete Optimierungsmöglichkeiten.
- PageSpeed Insights: Web-Tool, das Lab- und Field-Daten kombiniert.
- WebPageTest: Erweiterte Tests mit individuellen Standorten und Geräten.
Field-Tools
- Chrome User Experience Report (CrUX): Echte Daten von Chrome-Nutzern, verfügbar über PageSpeed Insights oder BigQuery.
- web-vitals-Bibliothek: JavaScript-Bibliothek zur Messung der Metriken in deiner eigenen Analytics.
- Search Console: Der Core-Web-Vitals-Bericht zeigt die Gruppen-Performance basierend auf CrUX-Daten.
Beginne mit PageSpeed Insights für einen schnellen Überblick und nutze dann die web-vitals-Bibliothek, um echte Nutzermetriken über die Zeit zu verfolgen.
LCP verbessern (Largest Contentful Paint)
LCP ist normalerweise das größte Bild oder der größte Textblock im sichtbaren Bereich. So verbesserst du ihn:
- Bilder optimieren: Komprimiere Bilder, verwende moderne Formate wie WebP oder AVIF und liefere responsive Bilder mit
srcsetaus. - Kritische Ressourcen vorladen: Verwende
<link rel="preload">für Hero-Bilder und Schriften. - Render-blockierende Ressourcen eliminieren: Kritischen CSS inline einbinden, nicht-kritisches CSS und JavaScript verzögert laden.
- Ein CDN verwenden: Assets von Standorten ausliefern, die näher an den Nutzern liegen.
- Caching aktivieren: Lange Cache-Zeiten für statische Assets festlegen.
Für Bilder können Tools wie der Image Compressor von TryQuickToolBox helfen, Dateigrößen ohne sichtbaren Qualitätsverlust zu reduzieren.
INP verbessern (Interaction to Next Paint)
INP misst die Zeit von einer Nutzerinteraktion (Klick, Tippen, Tastendruck) bis zum nächsten visuellen Update. So verbesserst du ihn:
- JavaScript-Ausführungszeit reduzieren: Zerlege lange Aufgaben, nutze
requestIdleCallbackodersetTimeout, um den Main Thread freizugeben. - Große DOM-Größen vermeiden: Halte das DOM unter 1.500 Knoten und die Tiefe unter 32 Ebenen.
- Event-Handler optimieren: Entprelle oder drossele häufige Events wie Scroll und Resize.
- Web Worker verwenden: Verlege schwere Berechnungen aus dem Main Thread.
- Third-Party-Skripte minimieren: Sie blockieren oft den Main Thread.
Nutze den Performance-Bereich in Chrome DevTools, um lange Aufgaben zu identifizieren und zu optimieren.
CLS verbessern (Cumulative Layout Shift)
CLS misst unerwartete Layout-Verschiebungen. So reduzierst du ihn:
- Immer width- und height-Attribute bei Bildern und Videos angeben: Das reserviert Platz.
- Platz für Anzeigen und Embeds reservieren: Nutze CSS
aspect-ratiooder feste Dimensionen. - Keine Inhalte über bestehenden Inhalten einfügen: Außer als Reaktion auf eine Nutzerinteraktion.
- font-display: swap verwenden: Verhindert unsichtbaren Text, kann aber leichte Verschiebungen verursachen; erwäge
font-display: optionalfür kritischen Text. - Vorsichtig mit dynamischen Inhalten sein: Lade sie unterhalb des sichtbaren Bereichs oder animiere Übergänge flüssig.
Vergleich der Core-Web-Vitals-Metriken
| Metrik | Was sie misst | Guter Schwellenwert | Hauptursachen für schlechte Werte |
|---|---|---|---|
| LCP | Ladeleistung | ≤ 2,5 s | Langsamer Server, render-blockierende Ressourcen, große Bilder |
| INP | Reaktionsfähigkeit | ≤ 200 ms | Lange Aufgaben, schweres JavaScript, großes DOM |
| CLS | Visuelle Stabilität | ≤ 0,1 | Bilder ohne Dimensionen, dynamische Inhalte, Web-Schriften |
Tools und Techniken für kontinuierliches Monitoring
Die Verbesserung der Core Web Vitals ist keine einmalige Aufgabe. Richte ein kontinuierliches Monitoring ein:
- Nutze die
web-vitals-Bibliothek, um Metriken an deine Analytics-Plattform zu senden. - Richte Warnungen ein, wenn Metriken Schwellenwerte überschreiten.
- Führe Lighthouse regelmäßig in CI/CD aus, um Regressionen zu erkennen.
- Überwache CrUX-Daten in der Search Console für Trends bei echten Nutzern.
Für eine schnelle Prüfung nutze den Lighthouse-Tab in Chrome DevTools oder PageSpeed Insights nach jeder größeren Änderung.
FAQ
Was sind Core Web Vitals und warum sind sie wichtig?
Core Web Vitals sind drei Metriken (LCP, INP, CLS), die Ladeleistung, Interaktivität und visuelle Stabilität messen. Sie sind wichtig, weil sie die echte User Experience widerspiegeln und von Google als Ranking-Signal verwendet werden.
Wie oft sollte ich Core Web Vitals messen?
Messe nach jeder größeren Code-Änderung und richte ein kontinuierliches Field-Monitoring ein, um echte Nutzermetriken über die Zeit zu verfolgen. Lab-Tools wie Lighthouse eignen sich für schnelle Checks, aber Field-Daten zeigen die tatsächliche User Experience.
Kann ich Core Web Vitals ohne Entwickler verbessern?
Einige Verbesserungen wie das Komprimieren von Bildern lassen sich mit Tools erledigen, aber die meisten erfordern Code-Änderungen (z. B. das Hinzufügen von width/height-Attributen, die Optimierung von JavaScript). Ein Entwickler oder jemand mit Erfahrung in Web-Performance ist normalerweise erforderlich.
Bereit, deine Bilder für einen besseren LCP zu optimieren? Probiere unseren kostenlosen Image Compressor aus, um Dateigrößen ohne Qualitätsverlust zu reduzieren.