Core Web Vitals: Messen und Verbessern für besseres SEO
Warum Core Web Vitals für Ihre Website wichtig sind
Sie haben eine schnelle, funktionsreiche Website erstellt, aber Nutzer beschweren sich immer noch über Langsamkeit, und Ihre Suchrankings rutschen ab. Der Übeltäter könnten die Core Web Vitals sein – Googles Metrikset, das die reale Nutzererfahrung quantifiziert. Seit 2021 sind diese Metriken ein bestätigter Rankingfaktor und wirken sich direkt auf Absprungraten und Conversions aus. Sie zu ignorieren bedeutet, Traffic und Umsatz zu verlieren.
In diesem Leitfaden erfahren Sie, was jede Metrik bedeutet, wie Sie sie genau messen und welche schrittweisen Verbesserungen Sie heute umsetzen können.
Was sind Core Web Vitals?
Core Web Vitals sind drei spezifische Metriken, die Ladeverhalten, Interaktivität und visuelle Stabilität erfassen:
- Largest Contentful Paint (LCP): Misst die Ladeleistung. Es markiert den Zeitpunkt, an dem das größte Inhaltselement (Bild, Textblock, Video) sichtbar wird. Ein gutes LCP ist 2,5 Sekunden oder weniger.
- Interaction to Next Paint (INP): Misst die Reaktionsfähigkeit. Es zeichnet die Latenz aller Interaktionen (Klicks, Taps, Tastendrücke) auf und meldet einen einzelnen Wert. Gutes INP ist 200 Millisekunden oder weniger. INP ersetzte First Input Delay (FID) im März 2024.
- Cumulative Layout Shift (CLS): Misst die visuelle Stabilität. Es quantifiziert unerwartete Layoutverschiebungen während des Seitenladens. Ein gutes CLS ist 0,1 oder weniger.
Diese Metriken sind feldbasiert, das heißt, sie stammen aus echten Nutzerdaten, nicht aus Labortests. Deshalb verwenden Tools wie Chrome User Experience Report (CrUX) und PageSpeed Insights sie.
Wie man Core Web Vitals misst
Sie benötigen sowohl Lab- als auch Felddaten, um ein vollständiges Bild zu erhalten. Labortools helfen beim Debuggen, während Felddaten die echte Nutzererfahrung zeigen.
Feldtools (Echte Nutzerdaten)
- PageSpeed Insights: Geben Sie eine URL ein, um sowohl Labor- als auch Felddaten zu sehen. Der Feldbereich stammt aus CrUX.
- Search Console: Der Core Web Vitals-Bericht gruppiert URLs nach Status (Schlecht, Verbesserungswürdig, Gut).
- Chrome UX Report (CrUX): Zugriff über BigQuery oder die CrUX API für Rohdaten.
- web-vitals JavaScript-Bibliothek: Fügen Sie dieses leichte Skript zu Ihrer Website hinzu, um Metriken von echten Nutzern zu sammeln und an Ihre Analytics zu senden.
Labortools (Synthetische Tests)
- Lighthouse: In Chrome DevTools integriert. Führen Sie es aus, um Laborwerte und Optimierungspotenziale zu erhalten.
- WebPageTest: Erweiterte Tests mit Filmstreifen, Wasserfalldiagrammen und benutzerdefiniertem Throttling.
- Chrome DevTools Performance-Panel: Aufzeichnen und Analysieren der Laufzeitleistung.
Für einen schnellen Einstieg verwenden Sie PageSpeed Insights. Es kombiniert Labor- und Felddaten in einem Bericht.
Schritt für Schritt: LCP verbessern
LCP lässt sich oft am einfachsten mit diesen Schritten verbessern:
- Bilder optimieren: Komprimieren Sie Bilder ohne Qualitätsverlust. Verwenden Sie moderne Formate wie WebP oder AVIF. Tools wie Image Compressor können helfen.
- Das LCP-Element vorladen: Fügen Sie
<link rel="preload">für das Hero-Bild oder die Schriftart hinzu. - Serverantwortzeit reduzieren: Verwenden Sie ein CDN, aktivieren Sie Caching und optimieren Sie den Backend-Code. Überprüfen Sie bei Nginx Ihre Logs mit dem Nginx Log Analyzer, um langsame Anfragen zu erkennen.
- Render-blockierende Ressourcen eliminieren: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches JavaScript und verwenden Sie
async- oderdefer-Attribute. - Ein CDN verwenden: Liefern Sie Assets von Standorten in der Nähe der Nutzer aus.
Schritt für Schritt: INP verbessern
INP misst die Reaktionsfähigkeit. Hohes INP kommt oft von langen JavaScript-Aufgaben.
- Lange Aufgaben aufteilen: Verwenden Sie
setTimeoutoderrequestIdleCallback, um den Hauptthread freizugeben. - Event-Handler optimieren: Entprellen oder drosseln Sie teure Operationen.
- JavaScript reduzieren: Entfernen Sie ungenutzten Code, teilen Sie Code auf und laden Sie nicht-kritische Skripte verzögert.
- Web Worker verwenden: Verlagern Sie schwere Berechnungen vom Hauptthread.
- Große DOM-Größen vermeiden: Halten Sie das DOM nach Möglichkeit unter 1.500 Knoten.
Schritt für Schritt: CLS verbessern
CLS dreht sich um visuelle Stabilität. Verhindern Sie unerwartete Verschiebungen mit diesen Taktiken:
- Größenattribute für Bilder und Videos festlegen: Fügen Sie immer
widthundheightein. - Platz für Anzeigen und Embeds reservieren: Verwenden Sie CSS
aspect-ratiooder feste Container. - Vermeiden Sie das Einfügen von Inhalten über bestehenden Inhalten: Wenn es sein muss, verwenden Sie einen Platzhalter oder animieren Sie die Verschiebung.
- Verwenden Sie font-display: swap: Verhindern Sie unsichtbaren Text während des Font-Ladens (dies kann jedoch zu leichten Verschiebungen führen; erwägen Sie
font-display: optionalfür kritische Schriftarten). - Schriftarten vorladen: Reduzieren Sie Layoutverschiebungen durch spät ladende Schriftarten.
Vergleich der Core Web Vitals Metriken
| Metrik | Was sie misst | Guter Schwellenwert | Primäre Lösung |
|---|---|---|---|
| LCP | Ladeleistung | ≤ 2,5s | Bilder optimieren, Vorladen, CDN |
| INP | Reaktionsfähigkeit | ≤ 200ms | Lange Aufgaben aufteilen, JS reduzieren |
| CLS | Visuelle Stabilität | ≤ 0,1 | Dimensionen festlegen, Platz reservieren |
Überwachung und kontinuierliche Verbesserung
Leistung ist keine einmalige Sache. Richten Sie Real-User-Monitoring (RUM) ein, um Core Web Vitals im Laufe der Zeit zu verfolgen. Verwenden Sie die web-vitals-Bibliothek, um Metriken an Ihre Analyseplattform zu senden. Legen Sie Warnungen für Regressionen fest. Überprüfen Sie regelmäßig mit Lighthouse in Ihrer CI/CD-Pipeline, um Probleme zu erkennen, bevor sie in die Produktion gelangen.
FAQ
Was sind die aktuellen Schwellenwerte für Core Web Vitals?
Für LCP gilt: gut ≤ 2,5s, verbesserungswürdig ≤ 4,0s und schlecht > 4,0s. Für INP gilt: gut ≤ 200ms, verbesserungswürdig ≤ 500ms und schlecht > 500ms. Für CLS gilt: gut ≤ 0,1, verbesserungswürdig ≤ 0,25 und schlecht > 0,25.
Wie oft sollte ich Core Web Vitals messen?
Überwachen Sie kontinuierlich mit Echtnutzerdaten. Führen Sie Labortests nach signifikanten Codeänderungen und mindestens monatlich durch. Felddaten in der Search Console werden täglich aktualisiert, spiegeln jedoch ein rollierendes 28-Tage-Fenster wider.
Kann ich Core Web Vitals ohne Entwickler verbessern?
Einige Korrekturen wie Bildkomprimierung und Caching können mit Plugins oder Tools durchgeführt werden. Tiefere Optimierungen wie JavaScript-Reduzierung und Server-Tuning erfordern jedoch oft die Einbeziehung eines Entwicklers.
Bereit, Ihre Website zu beschleunigen? Beginnen Sie mit der Komprimierung Ihrer Bilder mit unserem kostenlosen Image Compressor, um Ihrem LCP einen schnellen Schub zu geben.