Suchmaschinenoptimierung (SEO)

Core Web Vitals

1. Was sind Core Web Vitals?
2. LCP – Largest Contentful Paint
3. INP – Interaction to Next Paint
4. CLS – Cumulative Layout Shift
5. Core Web Vitals messen
6. Einfluss auf das Ranking

Was sind Core Web Vitals?

Core Web Vitals sind eine Gruppe von Metriken, die Google im Jahr 2020 eingeführt hat, um die Nutzererfahrung auf Webseiten messbar und vergleichbar zu machen. Seit dem Page Experience Update im Jahr 2021 fliessen diese Metriken direkt in den Ranking-Algorithmus von Google ein. Damit hat Google erstmals klar definiert, welche technischen Aspekte der Nutzererfahrung für das Ranking relevant sind.

Die Core Web Vitals bestehen aus drei Hauptmetriken, die jeweils einen anderen Aspekt der Nutzererfahrung messen:

• LCP (Largest Contentful Paint) – misst die Ladegeschwindigkeit des grössten sichtbaren Inhaltselements
• INP (Interaction to Next Paint) – misst die Reaktionsfähigkeit auf Nutzereingaben
• CLS (Cumulative Layout Shift) – misst die visuelle Stabilität der Seite

Warum hat Google diese Metriken eingeführt? Weil bisherige technische Metriken wie die reine Ladezeit oft nicht widerspiegelten, wie eine Seite von Nutzern tatsächlich wahrgenommen wird. Eine Seite kann technisch schnell laden, aber trotzdem frustrierend zu bedienen sein, wenn Inhalte springen oder Klicks nicht sofort reagieren.

LCP – Largest Contentful Paint

Der Largest Contentful Paint misst, wie lange es dauert, bis das grösste sichtbare Element im sichtbaren Bereich (Viewport) vollständig geladen ist. Dies kann ein Bild, ein Video-Thumbnail, ein Hintergrundbild oder ein Textblock sein.

Zielwert: Unter 2.5 Sekunden gilt als «gut». Werte zwischen 2.5 und 4 Sekunden gelten als «verbesserungswürdig». Über 4 Sekunden gilt als «schlecht».

Häufige Ursachen für einen schlechten LCP-Wert:

• Langsame Serverantwortzeit – Der Server braucht zu lange, um die HTML-Seite zu liefern
• Render-blocking Ressourcen – CSS und JavaScript, die das Rendering blockieren
• Grosse, nicht optimierte Bilder – Bilder werden nicht in modernen Formaten ausgeliefert
• Fehlende Ressourcen-Priorisierung – Wichtige Ressourcen werden nicht vorgezogen geladen

Optimierungsmassnahmen für einen besseren LCP:

1. Bilder im WebP- oder AVIF-Format ausliefern und mit passenden Dimensionen einbinden
2. Preload für das LCP-Bild verwenden: <link rel="preload" as="image" href="hero-bild.webp">
3. Server-Antwortzeit durch gutes Hosting und Caching verbessern
4. Render-blocking CSS und JavaScript reduzieren oder verzögert laden
5. Ein Content Delivery Network (CDN) einsetzen

INP – Interaction to Next Paint

Der Interaction to Next Paint (INP) ist seit März 2024 offiziell ein Core Web Vital und hat den früheren FID (First Input Delay) ersetzt. Während FID nur die Verzögerung beim ersten Klick mass, misst INP alle Interaktionen während des gesamten Seitenbesuchs – Klicks, Tastatureingaben und Berührungen auf Touch-Geräten.

Zielwert: Unter 200 Millisekunden gilt als «gut». Werte zwischen 200 und 500ms gelten als «verbesserungswürdig». Über 500ms gilt als «schlecht».

Ein schlechter INP-Wert entsteht häufig durch:

• Schwerer JavaScript-Code, der den Hauptthread blockiert
• Zu viele Third-Party-Skripte (Analytics, Werbung, Chat-Widgets)
• Unnötige JavaScript-Ausführung beim Laden der Seite

Zur Verbesserung des INP empfiehlt sich, JavaScript-Tasks in kleinere Einheiten aufzuteilen, nicht kritischen Code zu verzögern und Third-Party-Skripte zu auditieren.

CLS – Cumulative Layout Shift

Der Cumulative Layout Shift misst, wie stark sich Seitenelemente während des Ladevorgangs unerwartet verschieben. Kennen Sie das Phänomen, wenn Sie einen Text lesen und plötzlich ein Banner nachlädt und Ihren Text nach unten schiebt? Genau das misst der CLS.

Zielwert: Unter 0.1 gilt als «gut». Werte zwischen 0.1 und 0.25 gelten als «verbesserungswürdig». Über 0.25 gilt als «schlecht».

Häufige Ursachen für Layout-Shifts:

• Bilder ohne definierte Dimensionen – Wenn Breite und Höhe fehlen, springt der Text beim Laden
• Nachträglich eingefügte Werbebanner oder Iframes
• Webfonts ohne Font-Display-Strategie – Texte, die sich verändern, wenn der Webfont lädt
• Dynamisch eingefügte Inhalte oberhalb bestehender Inhalte

Die wichtigste Massnahme gegen CLS ist, allen Bildern und Videos die Attribute width und height zu geben:

<img src="bild.jpg" alt="Beschreibung" width="800" height="600">

Damit kann der Browser den benötigten Platz bereits reservieren, bevor das Bild geladen ist.

Core Web Vitals messen

Wie misst man Core Web Vitals? Google stellt dafür mehrere Werkzeuge zur Verfügung:

• Google Search Console – Im Bereich «Core Web Vitals» finden Sie aggregierte Felddaten für Ihre gesamte Website. Dieser Bericht basiert auf echten Nutzerdaten aus dem Chrome User Experience Report (CrUX) und zeigt URLs mit schlechten oder verbesserungswürdigen Werten.
• PageSpeed Insights – Analysiert einzelne URLs und zeigt sowohl Labordaten (Lighthouse) als auch Felddaten. Empfehlenswert für die detaillierte Analyse einzelner Seiten.
• Google Lighthouse – Ein Open-Source-Tool, das direkt in den Chrome-Entwicklertools integriert ist. Liefert Labordaten und detaillierte Optimierungsempfehlungen.
• Web Vitals Extension – Eine Chrome-Erweiterung, die Core Web Vitals in Echtzeit beim Browsen anzeigt.

Wichtig: Unterscheiden Sie zwischen Labordaten (synthetische Tests unter kontrollierten Bedingungen) und Felddaten (echte Nutzerdaten). Für das Google-Ranking zählen nur die Felddaten.

Einfluss auf das Ranking

Seit dem Page Experience Update von Google (vollständig ausgerollt im August 2021) sind Core Web Vitals ein offizieller Ranking-Faktor. Google hat jedoch stets betont, dass relevanter Inhalt nach wie vor wichtiger ist als eine perfekte technische Performance.

Was bedeutet das in der Praxis? Bei zwei Seiten mit gleichwertigen Inhalten und vergleichbarer Off-Page-Stärke kann eine bessere Core Web Vitals-Bewertung den Ausschlag geben. Bei einer Seite mit ausserordentlich guten Inhalten werden schlechte Core Web Vitals das Ranking zwar beeinflussen, aber nicht unbedingt dominieren.

Dennoch sollten Sie Core Web Vitals ernst nehmen – nicht nur wegen des Rankings, sondern auch wegen der direkten Auswirkung auf die Absprungrate und Conversion-Rate. Studien zeigen, dass langsame und ruckartige Seiten zu deutlich höheren Absprungraten führen.

Weitere Informationen zur technischen Optimierung finden Sie in unserem Artikel zur PageSpeed Optimierung sowie in der Übersicht der Technischen SEO.