Die Core Web Vitals sind drei von Google definierte Metriken, die die Qualität der Nutzererfahrung auf einer Webseite messen. 2020 eingeführt und 2021 mit dem Page-Experience-Update in Googles Ranking-Algorithmus integriert, sind sie heute ein offizieller SEO-Faktor. Für Online-Shops ist es ebenso wichtig geworden, diese drei Indikatoren — LCP, INP und CLS — zu verstehen und zu optimieren wie die Arbeit an Inhalten oder Linkaufbau.
Was sind Core Web Vitals?
Vor den Core Web Vitals wurde die Ladegeschwindigkeit einer Webseite durch technische Metriken wie Time to First Byte (TTFB) oder First Contentful Paint (FCP) gemessen — nützliche Indikatoren für Entwickler, die jedoch nicht wirklich widerspiegelten, was ein Nutzer tatsächlich erlebt. Google wollte diese Lücke schließen, indem es drei Metriken definierte, die auf der wahrgenommenen Erfahrung basieren: Wie schnell erscheint der Hauptinhalt? Reagiert die Seite schnell auf Interaktionen? Verschieben sich Inhalte unerwartet?
Diese drei Fragen entsprechen genau den drei Core Web Vitals: LCP für die Ladegeschwindigkeit, INP für die Reaktionsfähigkeit und CLS für die visuelle Stabilität. Google sammelt diese Daten aggregiert über Chrome (den Chrome User Experience Report, kurz CrUX) und verwendet sie in seinem Algorithmus, um Seiten zu belohnen, die eine gute Nutzererfahrung bieten.
LCP — Largest Contentful Paint: Wie schnell Ihr Hauptinhalt lädt
Der LCP (Largest Contentful Paint) misst die Zeit zwischen dem Beginn des Ladevorgangs einer Seite und dem Moment, in dem ihr größtes sichtbares Element vollständig auf dem Bildschirm gerendert wurde. Dieses Element kann ein Bild, ein Video-Tag, ein Textblock oder ein beliebiger anderer Inhalt im sichtbaren Bereich ohne Scrollen (above the fold) sein.
Bei Online-Shops wird der LCP fast immer durch das Hauptproduktbild bestimmt — das Packshot-Foto, das einen großen Teil des Bildschirms im oberen Bereich der Produktseite einnimmt. Dieses Bild ist in der Regel das schwerste auf der Seite und daher das, das am längsten zum Laden braucht. Deshalb konzentriert sich die LCP-Optimierung im E-Commerce-Bereich vorrangig auf die Optimierung der Bildauslieferung.
Guter LCP
Unter 2,5 Sekunden. Google bewertet die Nutzererfahrung als zufriedenstellend.
LCP verbesserungswürdig
Zwischen 2,5 und 4 Sekunden. Die Seite befindet sich im orangen Bereich — Verbesserungen sind notwendig.
Schlechter LCP
Über 4 Sekunden. Google benachteiligt die Seite in den Suchergebnissen.
Die Hauptursachen für einen schlechten LCP bei Online-Shops sind: zu schwere Produktbilder (nicht optimiertes JPEG), langsames Hosting mit hohem TTFB, kein CDN mit geografischer Latenz, und falsch angewendetes Lazy Loading auf das Hauptbild. Dieser letzte Fehler ist häufig: Das Attribut loading="lazy" darf niemals auf das Above-the-fold-Bild angewendet werden, da es verhindert, dass der Browser genau das Element schnell lädt, das Google zur Berechnung des LCP verwendet.
INP — Interaction to Next Paint: Reaktionsfähigkeit der Seite
INP (Interaction to Next Paint) ersetzte im März 2024 den FID (First Input Delay) als offizielles Core Web Vital. Während FID nur die Reaktionsverzögerung auf die erste Interaktion maß, misst INP die Latenz aller Nutzerinteraktionen während der gesamten Lebensdauer der Seite — Klicks, Tippen auf dem Mobilgerät, Tastatureingaben — und nimmt den Wert beim 98. Perzentil.
Konkret misst INP die Zeit zwischen dem Moment, in dem der Nutzer interagiert (z. B. auf eine „In den Warenkorb”-Schaltfläche klickt), und dem Moment, in dem der Browser die visuelle Antwort auf diese Interaktion anzeigt. Wenn Ihr JavaScript schwer ist und den Haupt-Thread des Browsers blockiert, wird der INP hoch sein: Die Seite wirkt „eingefroren” oder langsam in ihrer Reaktion.
Guter INP
Unter 200 Millisekunden. Die Interaktion fühlt sich für den Nutzer sofort an.
INP verbesserungswürdig
Zwischen 200 und 500 Millisekunden. Der Nutzer nimmt eine leichte Verzögerung wahr.
Schlechter INP
Über 500 Millisekunden. Die Interaktion fühlt sich träge und verzögert an.
Bei Online-Shops sind die Hauptursachen für einen schlechten INP: übermäßiges JavaScript von Drittanbietern (Chat-Widgets, Analytics-Tracker, Preisvergleichsskripte), zu schwere Event-Handler und umfangreiche UI-Bibliotheken, die synchron geladen werden. Die Optimierung des INP erfordert die Prüfung und Reduzierung von nicht wesentlichem JavaScript sowie das Verzögern des Ladens von Drittanbieter-Skripten bis nach der Nutzerinteraktion.
CLS — Cumulative Layout Shift: Visuelle Stabilität der Seite
Der CLS (Cumulative Layout Shift) misst, wie stark sich sichtbare Seitenelemente während des Ladevorgangs unerwartet verschieben. Jedes Mal, wenn ein sichtbares Element springt — ein Text, der hochspringt, weil ein Bild ohne reservierte Abmessungen geladen wird, ein Werbebanner, das sich einfügt und den Inhalt nach unten schiebt — erhöht sich der CLS-Wert.
Ein hoher CLS ist besonders ärgerlich auf mobilen Geräten: Der Nutzer ist dabei, auf einen Link zu tippen, und im Moment des Tippens lädt ein Bild und verschiebt den Inhalt. Er tippt stattdessen auf einen anderen Link — manchmal auf „In den Warenkorb”, obwohl er die Beschreibung lesen wollte. Das ist eine schlechte Nutzererfahrung, die Google bestraft.
Guter CLS
Unter 0,1. Die Seite ist während des Ladevorgangs visuell stabil.
CLS verbesserungswürdig
Zwischen 0,1 und 0,25. Merkliche Verschiebungen beeinträchtigen das Erlebnis.
Schlechter CLS
Über 0,25. Die Seite ist instabil und wird von Google abgewertet.
Die Hauptursache für einen hohen CLS bei Online-Shops ist das Fehlen expliziter Bildabmessungen (width- und height-Attribute im HTML). Wenn der Browser das HTML parst und auf ein img-Tag ohne Abmessungen stößt, kann er den erforderlichen Platz im Layout nicht reservieren. Wenn das Bild geladen wird und seine tatsächlichen Abmessungen offenbart, wird das Layout neu berechnet und alles verschiebt sich. Die Lösung ist einfach: Immer width und height auf img-Tags angeben oder die CSS-Eigenschaft aspect-ratio verwenden.
Wie Core Web Vitals das Google-Ranking beeinflussen
Google verwendet Core Web Vitals seit Juni 2021 als Ranking-Signal. Technisch gesehen sind sie Teil eines umfassenderen Signals namens „Page Experience”, das auch Mobile-Freundlichkeit, HTTPS-Sicherheit und das Fehlen aufdringlicher Interstitial-Inhalte umfasst. Google hat klargestellt, dass qualitativ hochwertige Inhalte das dominante Signal bleiben, Core Web Vitals aber den Unterschied zwischen zwei Seiten gleicher Qualität ausmachen können.
In der Praxis bewertet Google Core Web Vitals anhand zweier Datenquellen: Felddaten, die anonym über Chrome aus echten Nutzerbesuchen gesammelt werden, und Labordaten, die von Tools wie Lighthouse unter kontrollierten Bedingungen berechnet werden. Die Felddaten — aggregiert im Chrome User Experience Report (CrUX) — fließen in den Algorithmus ein. Eine Seite muss ausreichend Chrome-Traffic erhalten, um in CrUX zu erscheinen; Seiten mit wenig Traffic werden auf Domain- oder Root-URL-Ebene bewertet.
Mobile-first: Core Web Vitals werden vorrangig auf Mobilgeräten bewertet
Besondere Herausforderungen im E-Commerce
Online-Shops stehen vor mehreren Herausforderungen, die die Optimierung der Core Web Vitals besonders schwierig machen. Zunächst das Bildvolumen: Ein Shop mit 1.000 Produkten und je 5 Fotos muss 5.000 Bilder verwalten, die jeweils nach Größe, Format und Abmessungen optimiert werden müssen. Hinzu kommt die Seitenkomplexität: Produktseiten mit Galerien, Karussells, Zoom-Funktionen, Beschreibungs-Tabs, Kundenbewertungs-Widgets und Variantenkonfiguratoren — all das sind JavaScript-Komponenten, die den INP verschlechtern können.
- Schwere Produktbilder ohne Formatoptimierung (nicht optimiertes JPEG statt WebP/AVIF)
- Karussells und Galerien mit JavaScript von Drittanbietern, das den Haupt-Thread blockiert
- Falsch konfiguriertes Lazy Loading auf dem Hero-Image (verschlechtert den LCP)
- Bilder ohne explizite width/height-Attribute in Templates (verschlechtert den CLS)
- Analytics- und Remarketing-Tracking-Skripte, die synchron geladen werden (verschlechtert den INP)
- Langsames Shared Hosting mit hohem TTFB, das alle Core Web Vitals beeinträchtigt
Wie Lexiik Ihre Core Web Vitals verbessert
Lexiik wirkt hauptsächlich auf LCP und CLS — die beiden Core Web Vitals, die am direktesten mit Bildern zusammenhängen. Für den LCP reduziert das Cloudflare-CDN die Auslieferungszeit des Hauptproduktbilds drastisch, indem es von einem geografisch nahen Knoten ausgeliefert wird, mit Cache-Headern von einem Jahr. Für den CLS stellt Lexiik sicher, dass die vom CDN ausgelieferten Bilder ihre ursprünglichen Abmessungen beibehalten, sodass der Browser den richtigen Platz bereits vor dem vollständigen Laden reservieren kann.
Die automatische Konvertierung in WebP und AVIF reduziert die Bildgröße um 30 bis 50 % ohne sichtbaren Qualitätsverlust, was nicht nur den LCP beschleunigt, sondern auch alle wahrgenommenen Performance-Metriken verbessert. Bei mobilen 4G-Verbindungen kann der Wechsel von einem 400 KB großen JPEG zu einem 120 KB großen WebP-Bild den LCP von 3,5 Sekunden auf unter 1,5 Sekunden senken.
So überprüfen Sie Ihre Core Web Vitals-Scores
Mehrere Tools ermöglichen die Messung und Überwachung Ihrer Core Web Vitals. Die Google Search Console ist das Referenz-Tool für echte Felddaten (CrUX): Der Bereich „Seitenerfahrung” zeigt den Prozentsatz der URLs Ihrer Website, die als „Gute Erfahrung”, „Verbesserungswürdig” oder „Schlechte Erfahrung” eingestuft sind, mit einer Aufschlüsselung nach Metrik. Dieses Tool spiegelt wider, was Google tatsächlich sieht.
- Google Search Console (search.google.com/search-console): echte Felddaten, nach URL oder URL-Gruppe
- PageSpeed Insights (pagespeed.web.dev): Felddaten + Labordaten für eine bestimmte URL
- Google Lighthouse (in Chrome DevTools integriert): nur Labordaten, nützlich für die Entwicklung
- Chrome DevTools > Performance-Tab: detaillierte Analyse von Rendering-Ereignissen und Interaktionen
- web.dev/measure: Google-Tool für eine schnelle Online-Analyse