Die Bedeutung von Core Web Vitals für den
Erfolg im eCommerce – Tipps zur Optimierung

Core Web Vitals bestehen aus drei Metriken, die Google seit 2021 als offiziellen Ranking-Faktor verwendet. Jede Metrik erfasst einen anderen Aspekt der Seitenerfahrung:

• LCP (Largest Contentful Paint): Misst die Ladezeit des größten sichtbaren Inhalts. Das ist in der Regel ein Hero-Image oder ein großer Textblock. Das Ziel: unter 2,5 Sekunden.
• INP (Interaction to Next Paint): Ersetzt seit 2024 die frühere FID (First Input Delay). INP misst die Reaktionszeit auf Nutzerinteraktionen wie Klicks oder Taps über den gesamten Seitenbesuch. Das Ziel: unter 200 Millisekunden.
• CLS (Cumulative Layout Shift): Erfasst, wie stark sich das Layout während des Ladens verschiebt. Springen Bilder oder Buttons, während der Nutzer scrollt, steigt der Wert. Das Ziel: unter 0,1.

Zusammen bilden diese drei Werte ein klares Bild der technischen Performance. Google unterscheidet zwischen „gut“, „verbesserungswürdig“ und „schlecht“. Nur Shops in der Kategorie „gut“ profitieren vollständig vom Ranking-Boost.

eCommerce lebt von Geschwindigkeit und Vertrauen. Jede Sekunde Verzögerung kostet Umsatz. Studien zeigen, dass die Wahrscheinlichkeit eines Bounces um 32 Prozent steigt, wenn die Ladezeit von einer auf drei Sekunden ansteigt. Bei fünf Sekunden verdoppelt sich die Absprungrate.

Die Bedeutung für eCommerce lässt sich in vier Punkten zusammenfassen:

• SEO-Rankings: Google bevorzugt seit dem Page Experience Update Seiten mit guten Core Web Vitals. Wer hier schwächelt, verliert Sichtbarkeit gegenüber schnelleren Wettbewerbern.
• Absprungrate: Mobile Nutzer sind besonders ungeduldig. Ein LCP über 4 Sekunden führt bei mobilen Shop-Besuchern fast regelmäßig zum sofortigen Abbruch.
• Conversion Rate: Amazon berechnete bereits 2006, dass jede 100 Millisekunden Ladezeitverzögerung den Umsatz um ein Prozent senkt. Das gilt heute mehr denn je.
• Mobile-First: Google indexiert seit 2021 primär die mobile Version einer Website. Wer seine Mobile-Performance ignoriert, optimiert für einen Index, der nicht mehr relevant ist.

Die Verknüpfung zwischen technischer Performance und Geschäftserfolg ist messbar. Shops, die ihre Core Web Vitals systematisch verbessern, sehen typischerweise eine Steigerung der Conversion Rate um 5 bis 15 Prozent – ohne ein einziges neues Feature zu entwickeln.

Der Largest Contentful Paint misst, wann das Hauptelement im Viewport vollständig gerendert ist. Für eCommerce-Shops ist das oft das Hero-Bild auf der Startseite oder das Produktbild auf einer Detailseite. Ein Wert unter 2,5 Sekunden gilt als gut, unter 4 Sekunden als verbesserungswürdig, darüber als schlecht.

Die effektivsten Maßnahmen zur LCP-Optimierung:

• Bilder optimieren: Verwende moderne Formate wie WebP oder AVIF. Komprimiere Bilder ohne sichtbaren Qualitätsverlust. Ein Produktbild in 1200 x 900 Pixeln sollte nicht mehr als 150 KB wiegen.
• CDN nutzen: Ein Content Delivery Network bringt statische Assets näher zum Nutzer. Die Latenz sinkt um 50 bis 80 Prozent, je nach geografischer Distanz zum Ursprungsserver.
• Server-Antwortzeit senken: Time to First Byte (TTFB) sollte unter 600 Millisekunden liegen. Das erfordert schnelles Hosting, effizientes Caching und eine optimierte Datenbank.
• Critical CSS inline laden: CSS, das für den sichtbaren Bereich benötigt wird, sollte direkt im HTML-Head eingebettet werden. Der Rest lädt asynchron nach.
• Preload für wichtige Ressourcen: Nutze <link rel="preload"> für das LCP-Bild, damit der Browser es priorisiert.

Ein typischer Shopify-Shop reduzierte seinen LCP von 4,2 auf 1,8 Sekunden, indem er Hero-Bilder auf WebP konvertierte, ein CDN aktivierte und überflüssige JavaScript-Libraries entfernte. Das Ergebnis: 22 Prozent mehr Seitenaufrufe und eine um 8 Prozent höhere Conversion Rate.

Interaction to Next Paint misst die Verzögerung zwischen einer Nutzeraktion – wie einem Klick auf „In den Warenkorb“ – und der visuellen Reaktion des Browsers. Das Ziel liegt unter 200 Millisekunden. Alles darüber fühlt sich träge an, alles darunter reagiert flüssig.

INP ersetzt die frühere FID-Metrik, weil FID nur den ersten Input erfasste. INP bewertet die gesamte Interaktion über den Seitenbesuch und ist damit aussagekräftiger für eCommerce, wo Nutzer mehrere Klicks tätigen.

Maßnahmen zur INP-Verbesserung:

• JavaScript optimieren: Lange Hauptthread-Tasks blockieren Interaktionen. Teile große Skripte in kleinere Chunks auf. Nutze requestIdleCallback für nicht-kritische Aufgaben.
• Code Splitting: Lade nur das JavaScript, das für die aktuelle Seite benötigt wird. Ein Checkout braucht keine Slider-Library von der Startseite.
• Drittanbieter-Scripts kontrollieren: Tracking-Pixel, Live-Chat-Widgets und Review-Plugins belasten den Hauptthread. Lade sie verzögert oder asynchron. Jeder Drittanbieter-Blocker kann den INP um 50 bis 150 Millisekunden erhöhen.
• Event-Handler entlasten: Vermeide rechenintensive Operationen direkt in Klick-Events. Nutze stattdessen Web Workers für komplexe Berechnungen.
• DOM-Größe reduzieren: Ein DOM mit über 1.500 Elementen verlangsamt Rendering und Interaktion. Paginiere lange Produktlisten, statt alles auf einmal zu laden.

Ein Vergleich mit A/B-Testing zur Conversion-Optimierung zeigt: Shops, die INP und LCP gleichzeitig verbessern, erzielen bessere Testergebnisse, weil die Nutzererfahrung insgesamt flüssiger wird.

Cumulative Layout Shift misst, wie oft und wie stark sich sichtbare Elemente während des Ladens verschieben. Ein Wert unter 0,1 gilt als gut. Jeder Shop-Besitzer kennt den Moment: Der Nutzer will auf „Kaufen“ klicken, und plötzlich rutscht der Button nach unten, weil ein Banner nachgeladen wurde.

CLS ist besonders ärgerlich, weil es direkt die Nutzerführung stört. Es führt zu Fehlklicks, Frustration und Abbrüchen. Die Optimierung ist technisch einfach, erfordert aber Disziplin im Entwicklungsprozess.

So hältst du CLS unter 0,1:

• Abmessungen für Bilder und Videos definieren: Jedes <img> und <video> braucht explizite Breiten- und Höhenattribute. Der Browser reserviert dann sofort den richtigen Platz.
• Fonts korrekt laden: Nutze font-display: swap oder lade Schriften vorab mit <link rel="preload">. So vermeidest du das berüchtigte Flash of Unstyled Text (FOUT), das Textblöcke in der Höhe springen lässt.
• Dynamische Inhalte reservieren: Werbebanner, Cookie-Banner und Newsletter-Popups sollten Platzhalter mit fester Höhe nutzen. So rutschen nachfolgende Elemente nicht nach.
• Neue Inhalte unten einfügen: Infinite Scroll oder dynamisch nachgeladene Produkte sollten am Ende der Liste erscheinen, nicht oben.
• Animations-Tricks vermeiden: Layout-Animationen, die top, left oder margin animieren, triggern CLS. Nutze stattdessen transform.

Ein Mode-Shop reduzierte seinen CLS von 0,31 auf 0,04, indem er feste Container für dynamische Banner einführte und Bilddimensionen in das CMS integrierte. Die mobile Conversion Rate stieg um 6 Prozent.

Ein mittelständischer Shopify-Shop für Sportausrüstung hatte folgende Ausgangswerte im März 2024:

• LCP: 4,7 Sekunden (schlecht)
• INP: 380 Millisekunden (schlecht)
• CLS: 0,28 (schlecht)

Der Shop generierte 12.000 Besucher pro Monat bei einer Conversion Rate von 1,2 Prozent. Das Ziel: Alle drei Werte in den „gut“-Bereich bringen.

Die durchgeführten Maßnahmen:

• Alle Bilder auf WebP konvertiert, Hero-Bilder auf 80 KB komprimiert
• Shopify-CDN für alle Assets aktiviert
• Fünf überflüssige Drittanbieter-Apps deinstalliert
• Kritisches CSS inline eingebunden
• Bilddimensionen in Liquid-Templates als Attribute hinterlegt
• JavaScript-Bundles von 1,2 MB auf 340 KB reduziert

Die Ergebnisse nach sechs Wochen:

• LCP: 1,9 Sekunden (gut)
• INP: 120 Millisekunden (gut)
• CLS: 0,03 (gut)

Die organische Sichtbarkeit stieg um 18 Prozent, die Absprungrate sank von 58 auf 41 Prozent. Die Conversion Rate kletterte auf 1,7 Prozent – ein Zuwachs von 42 Prozent bei gleichem Traffic. Die Maßnahmen kosteten insgesamt drei Entwicklertage.

Dieses Beispiel zeigt, dass Website-Geschwindigkeit optimieren keine rein technische Übung ist, sondern direkt den Umsatz beeinflusst.

Core Web Vitals lassen sich mit verschiedenen Tools messen. Die Wahl hängt davon ab, ob du einzelne Seiten prüfen oder Trends überwachen willst.

• PageSpeed Insights: Googles Standard-Tool für Einzelmessungen. Zeigt Lab-Daten (simuliert) und Field-Daten (aus dem Chrome User Experience Report). Ideal für schnelle Checks.
• Google Search Console: Zeigt Core Web Vitals für die gesamte Domain im Zeitverlauf. Unterteilt nach Desktop und Mobile. Das beste Tool für Trendanalysen und zur Priorisierung von URLs.
• GTmetrix: Bietet detaillierte Wasserfall-Analysen und Filmstrip-Ansichten des Ladens. Gut für die Identifikation von Bottlenecks.
• Web Vitals Extension: Ein Chrome-Plugin, das LCP, INP und CLS in Echtzeit anzeigt, während du durch den Shop navigierst. Praktisch für schnelle Tests ohne Tool-Wechsel.
• Chrome DevTools: Der Performance-Tab zeigt detaillierte Flamegraphs und Layout-Shift-Clustern. Für Entwickler unverzichtbar.

Die beste Praxis: Search Console für die wöchentliche Überwachung, PageSpeed Insights für gezielte Checks nach Optimierungen, DevTools für die technische Analyse. So behältst du den Überblick, ohne in Daten zu ertrinken.

Viele Shops scheitern an Core Web Vitals, weil sie typische Fehler wiederholen. Hier sind die häufigsten Stolpersteine:

• Keine Bildoptimierung: Produktbilder in voller Auflösung ausliefern. Ein 4K-Bild auf einer Mobilseite zu laden, ist ressourcenverschwendung pur. Nutze responsive Images mit srcset.
• Zu viele Drittanbieter-Scripts: Jede App, jedes Widget, jedes Tracking-Tool lädt JavaScript. Review-Plugins, Live-Chat, Popups, Social-Media-Buttons – alles zusammen erzeugt schnell einen INP über 500 Millisekunden.
• Keine festen Dimensionen für dynamische Inhalte: Cookie-Banner, Newsletter-Forms und Werbeblöcke ohne Platzhalter verschieben das Layout. Das ist die häufigste Ursache für schlechte CLS-Werte.
• Mobile ignorieren: Desktop-Werte mögen gut aussehen, aber 70 Prozent des eCommerce-Traffics kommen von Mobilgeräten. Optimierungen müssen mobile-first gedacht werden.
• Einmal messen, nie wieder prüfen: Core Web Vitals ändern sich mit jedem Update, jeder neuen App, jedem Content-Change. Ohne regelmäßige Überwachung verschlechtert sich die Performance schleichend.

Der teuerste Fehler ist die Annahme, dass Core Web Vitals nur ein „technisches Nice-to-have“ sind. Sie sind ein direkter Ranking-Faktor und ein direkter Conversion-Faktor. Wer sie ignoriert, verschenkt Sichtbarkeit und Umsatz.

Core Web Vitals sind kein theoretisches SEO-Konstrukt. Sie messen, was Nutzer tatsächlich erleben: Wie schnell lädt die Seite? Reagiert sie auf Klicks? Bleibt das Layout stabil? Für eCommerce-Shops sind diese Fragen existenziell.

Die drei Metriken LCP, INP und CLS bieten eine klare, messbare Grundlage für Optimierungen. Wer die in diesem Artikel genannten Maßnahmen umsetzt – Bildoptimierung, CDN, JavaScript-Reduktion, feste Layout-Platzhalter – verbessert nicht nur seine Google-Rankings, sondern auch die Conversion Rate.

Die nächsten Schritte für deinen Shop:

1. Messe aktuelle Werte mit PageSpeed Insights und Search Console
2. Priorisiere die schlechteste Metrik – typischerweise LCP oder INP
3. Implementiere die schnellsten Maßnahmen zuerst (Bilder, CDN, Dimensionen)
4. Überprüfe die Ergebnisse nach zwei Wochen
5. Integriere die Überwachung in deinen wöchentlichen Workflow

Technische Performance ist kein Projekt mit Anfang und Ende. Sie ist ein kontinuierlicher Prozess. Shops, die das verinnerlichen, haben einen Wettbewerbsvorteil, der sich in organischem Traffic und höheren Umsätzen bezahlt macht.