Dein Shop hat ein Problem, das du selbst nicht siehst. Er lädt zu langsam. Nicht für dich, nicht auf deinem schnellen Büro-Internet. Aber für den Durchschnittskunden auf dem Smartphone mit schwachem LTE-Signal unterwegs. Core Web Vitals messen genau das: wie schnell und stabil deine Seite für echte Nutzer lädt. Seit 2021 sind sie ein offizieller Google-Rankingfaktor. Shops, die diese Metriken ignorieren, verlieren Rankings an Shops, die das nicht tun. In diesem Artikel erkläre ich dir, was hinter LCP, CLS und INP steckt, wie du sie misst und welche Maßnahmen in E-Commerce-Shops wirklich etwas bringen.
Was sind Web Vitals und warum entscheiden sie dein Ranking?
Google misst seit 2021 direkt, wie gut Nutzer deine Website erleben. Diese Messungen heißen Core Web Vitals. Es sind keine abstrakten Technik-Kennzahlen. Es sind drei konkrete Messungen, die abbilden, wie frustrierend oder angenehm das Laden deiner Seite für echte Nutzer ist.
Als SEO-Agentur für E-Commerce sehen wir bei fast jedem Shop-Audit, dass diese Metriken entweder völlig unbekannt sind oder zwar bekannt, aber nie angefasst wurden. Das ist ein Fehler, den deine Konkurrenz dir dankt.
Wie lange dauert es, bis das größte sichtbare Element auf deiner Seite geladen ist? In E-Commerce-Shops ist das fast immer das Hero-Produktbild oder das Kategorien-Banner. Alles über 4 Sekunden gilt als "Poor" und kostet Rankings.
Wie schnell reagiert deine Seite auf Klicks, Tipp-Eingaben und andere Interaktionen? INP hat im März 2024 den alten FID-Wert als offiziellen Rankingfaktor ersetzt und misst die Reaktionsfähigkeit präziser als sein Vorgänger.
Wie stark springen Elemente nach dem ersten Seitenaufbau noch herum? Wenn ein Nutzer auf einen Button klicken will, der sich in diesem Moment nach unten schiebt, klickt er auf das falsche Element. CLS misst genau diese Frustration.
Warum sind Web Vitals ein Rankingfaktor? Google will Seiten mit besserem Nutzererlebnis in den Suchergebnissen bevorzugen. Wenn zwei Seiten zu einem Keyword inhaltlich gleichwertig sind, gewinnt die Seite mit besseren Core Web Vitals. In der Praxis ist das kein hypothetisches Szenario. Es passiert bei jedem stark umkämpften E-Commerce-Keyword.
Ein reales Beispiel aus unserer Praxis: Ein D2C-Modeshop hatte LCP-Werte von 5,8 Sekunden auf Mobile. Nach einer gezielten Optimierung sank der Wert auf 2,2 Sekunden. Die organischen Sitzungen stiegen in den folgenden drei Monaten um 34 Prozent. Nicht durch neuen Content. Nur durch schnelleres Laden.
LCP verbessern: Die häufigsten Ursachen in E-Commerce-Shops
LCP ist die wichtigste der drei Metriken für E-Commerce, weil große Produktbilder fast immer das LCP-Element sind. Alles, was das Laden dieses Bildes verzögert, schadet deinem LCP-Wert und damit deinen Rankings.
Wir sehen dieselben Ursachen immer wieder. Shopify-Shops haben dabei oft ein besonderes Problem mit App-Overload, der jeden Seitenaufruf um ein bis zwei Sekunden verlangsamt, bevor das LCP-Element überhaupt laden kann.
Die vier häufigsten LCP-Killer
1. Unkomprimierte Bilder. Produktfotos direkt vom Fotografen hochgeladen, oft drei bis acht Megabyte groß. Shopify konvertiert zwar automatisch zu WebP, aber nur wenn das Originalbild unter einem bestimmten Schwellenwert liegt. Ziel: alle Produktbilder unter 200 Kilobyte im WebP-Format.
2. Fehlendes Fetch Priority Attribut. Das LCP-Element sollte mit fetchpriority="high" geladen werden, damit der Browser es vor allem anderen priorisiert. Ohne dieses Attribut wartet das wichtigste Bild auf weniger wichtige Ressourcen.
3. Zu viele blockierende Skripte. Jede Third-Party-App fügt JavaScript zum Storefront hinzu. Jedes JavaScript-File blockiert den Browser, bis es vollständig geladen ist. Acht bis zwölf App-Skripte können zusammen ein bis zwei Sekunden zum LCP-Wert addieren.
4. Render-blockierende Webfonts. Wenn Google Fonts ohne display=swap eingebunden sind, wartet der Browser mit dem Rendering, bis die Fonts vollständig geladen sind. Das verzögert alles, was der Nutzer sieht, um 300 bis 600 Millisekunden.
So verbesserst du deinen LCP konkret
- Bilder vor dem Upload mit Squoosh oder TinyPNG auf unter 200 KB komprimieren
- Dem LCP-Bild
fetchpriority="high"undloading="eager"hinzufügen - Alle Below-the-fold-Bilder mit
loading="lazy"versehen - Apps-Audit: Welche App hast du in den letzten 30 Tagen aktiv genutzt? Alle anderen deinstallieren
- Google Fonts mit
&display=swapeinbinden, damit Text sofort sichtbar ist - PageSpeed Insights (pagespeed.web.dev) zeigt dir in 60 Sekunden den aktuellen LCP-Wert
"Einen LCP-Wert von 5 Sekunden auf 2 Sekunden zu reduzieren bringt in der Regel mehr organische Sitzungen als drei neue Blogartikel. Die meisten Shops optimieren in der falschen Reihenfolge."
CLS auf null bringen: Layout-Sprünge kosten Conversions
CLS misst, wie stark Elemente auf deiner Seite nach dem ersten Laden noch ihre Position verändern. Die Metrik ist in lcp-Diskussionen oft weniger präsent, hat aber direkten Einfluss auf Conversions. Wenn ein Nutzer auf "In den Warenkorb" klickt und der Button in diesem Moment nach unten springt, klickt er auf das falsche Element. Das passiert auf einem von fünf deutschen E-Commerce-Shops regelmäßig.
Für deine Google Rankings zählt der CLS-Wert als Teil der Page Experience-Signale. Ein CLS über 0,25 wird von Google als "Poor" eingestuft und kann Rankings kosten, besonders in kompetitiven Kategorien.
Typische CLS-Quellen und ihre Lösung
Bilder ohne definierte Breite und Höhe. Wenn der Browser vor dem Laden nicht weiß, wie groß ein Bild ist, reserviert er keinen Platz. Sobald das Bild lädt, schiebt es alles darunter nach unten. Lösung: jedes img-Element braucht width und height-Attribute. Das ist die häufigste und einfachste CLS-Ursache.
Nachträglich eingeblendete Banner. Cookie-Banner, Newsletter-Popups und Promo-Bars, die ein bis zwei Sekunden nach dem Laden erscheinen und den gesamten Seiteninhalt nach unten schieben, erzeugen massiven CLS. Lösung: Platz von Anfang an im Layout reservieren, nicht nachträglich einblenden.
Webfonts ohne Size-Adjust. Wenn der Fallback-Font breiter oder schmaler ist als der geladene Font, verschiebt sich der gesamte Text beim Font-Wechsel. Lösung: size-adjust im CSS für den Fallback-Font setzen, damit beide Fonts nahezu identische Zeilenbreiten erzeugen.
Dynamisch geladene Widgets. Chat-Widgets, Bewertungs-Widgets und Social-Proof-Banner, die asynchron laden und sich in bestehende Layouts einfügen, können CLS erzeugen. Lösung: feste Containerhöhe reservieren oder Widgets außerhalb des Hauptflusses positionieren.
Was du bis hier weißt
- Core Web Vitals sind offizieller Google-Rankingfaktor seit 2021
- LCP misst Ladegeschwindigkeit, INP Reaktionszeit, CLS Layout-Stabilität
- Unkomprimierte Bilder und zu viele App-Skripte sind die häufigsten LCP-Ursachen
- CLS entsteht durch Bilder ohne definierte Größen und nachträglich eingeblendete Elemente
- PageSpeed Insights zeigt dir deinen aktuellen Stand in 60 Sekunden
INP verbessern: So machst du deinen Shop reaktionsschnell
INP ist der jüngste der drei Core Web Vitals. Er misst, wie schnell deine Seite auf Nutzerinteraktionen reagiert: Klicks, Tippen in Suchfelder, Auswählen von Produktvarianten. Der Zielwert liegt unter 200 Millisekunden. Alles über 500 Millisekunden gilt als "Poor".
Hoher INP entsteht, wenn JavaScript-Code ausgeführt wird, während der Nutzer interagiert. Das passiert besonders oft auf Seiten mit vielen Third-Party-Skripten, die auf jeden Klick reagieren: Tracking-Pixel, Analytics-Events, Chat-Widgets. Jedes dieser Skripte kann die Antwortzeit des Browsers um 100 bis 300 Millisekunden verlängern.
Konkrete Maßnahmen für besseren INP
Long Tasks identifizieren. Im Chrome DevTools Performance-Tab zeigt die Timeline, welche JavaScript-Aufgaben länger als 50 Millisekunden dauern. Das sind die Kandidaten, die deinen INP erhöhen. Starte dort die Analyse.
Input-Delay durch Skripte reduzieren. Chat-Widgets und Tracking-Skripte, die synchron laden und auf jeden Klick reagieren, können den Input Delay von null auf 200 bis 400 Millisekunden erhöhen. Lazy Loading dieser Widgets oder deren Entfernung hilft direkt.
Event-Handler optimieren. Nicht jeder Scroll-Event muss eine schwere Funktion auslösen. requestAnimationFrame nutzen, um visuelle Updates auf den nächsten Browser-Frame zu verschieben. Debounce-Logik für Suchfeld-Inputs einsetzen.
Für die meisten E-Commerce-Shops ist INP weniger kritisch als LCP. Wenn du LCP und CLS in Ordnung bringst, ist INP oft automatisch im grünen Bereich. Starte also mit LCP, dann CLS, dann INP.
Core Web Vitals messen: Die richtigen Tools im Überblick
Messen vor dem Optimieren. Ohne Ausgangswert weißt du nicht, wo das größte Problem liegt und ob deine Maßnahmen gewirkt haben. Diese vier Tools reichen für den Anfang vollständig aus. Alle sind kostenlos.
Wenn du parallel an deiner gesamten Google Rankings Strategie arbeitest, sind Core Web Vitals der technische Unterbau. Keine Rankings ohne solide Technik darunter.
| Tool | Was es zeigt | Wann nutzen |
|---|---|---|
| PageSpeed Insights | Lab-Daten und Field Data (echte Nutzer-Daten aus dem CrUX-Report) | Erste Analyse, schnelle Einzelseiten-Tests |
| Google Search Console | Alle URLs im Shop mit schlechten Vitals, aufgeteilt nach Desktop und Mobile | Operativer Überblick über den gesamten Shop |
| Chrome DevTools Lighthouse | Detaillierte Diagnose mit Optimierungsempfehlungen pro Seite | Tiefere Analyse nach Identifikation der Problemseiten |
| CrUX Dashboard | Historische Vitals-Daten für die gesamte Domain über 28-Tage-Fenster | Erfolg einer Optimierung messen, bevor sie in Search Console erscheint |
Wichtig beim Messen: PageSpeed Insights zeigt zwei verschiedene Datensätze. Die Lab-Daten sind ein simulierter Test. Die Field Data kommen von echten Chrome-Nutzern. Wenn du Field Data hast, nutze diese zur Priorisierung. Sie spiegeln die reale Nutzererfahrung wider, nicht eine simulierte Verbindung.
Eines noch zu Lighthouse: immer im Inkognito-Modus messen. Browser-Extensions verfälschen die Ergebnisse und zeigen schlechtere Werte als echte Nutzer sehen.
Der empfohlene Mess-Ablauf für E-Commerce-Shops
- PageSpeed Insights für drei Seiten messen: Startseite, wichtigste Kategorieseite, meistverkauftes Produkt
- Google Search Console öffnen und unter "Core Web Vitals" alle URLs mit Status "Schlechter URL" identifizieren
- Die schlechteste Kategorie-URL mit Lighthouse analysieren, um die konkrete Ursache zu finden
- Maßnahmen umsetzen und 28 Tage warten, bevor du den Effekt in Search Console siehst
- CrUX Dashboard nutzen, um den Trend bereits während der Wartezeit zu beobachten
Core Web Vitals verbessern: Der Aktionsplan für E-Commerce-Shops
Theorie hilft nur so weit. Hier ist der operative Ablauf, den wir bei Shop-Audits nutzen. Realistischer Zeitrahmen für einen typischen Shopify-Shop mit durchschnittlichen Vitals-Problemen: vier bis acht Wochen bis zu nachhaltigen Verbesserungen.
Woche 1: Baseline messen. PageSpeed Insights für alle wichtigen Seiten. Search Console Core Web Vitals Report öffnen. Alle URLs mit "Poor" oder "Needs Improvement" in einer Tabelle festhalten. Ausgangswerte dokumentieren.
Woche 2: LCP angehen. Bilder komprimieren und neu hochladen. fetchpriority="high" auf das LCP-Element setzen. App-Audit: welche Apps sind wirklich notwendig? Überflüssige deinstallieren. Google Fonts-Einbindung mit display=swap prüfen.
Woche 3: CLS beheben. Alle img-Elemente auf fehlende width und height-Attribute prüfen. Cookie-Banner-Verhalten anpassen, damit kein Layout-Shift entsteht. Dynamische Widgets auf feste Container-Höhen setzen.
Woche 4+: INP optimieren und messen. Chrome DevTools Performance-Tab für die Hauptseiten analysieren. Long Tasks identifizieren. Nach 28 Tagen Search Console und PageSpeed Insights neu messen und mit der Baseline vergleichen.
Core Web Vitals zu verbessern ist kein einmaliges Projekt. Es ist ein fortlaufender Prozess, weil sich dein Shop kontinuierlich ändert: neue Apps, neue Bilder, neue Features. Richte dir einen monatlichen Check-in mit PageSpeed Insights ein. Das dauert zehn Minuten und stellt sicher, dass neue Implementierungen die Vitals nicht wieder verschlechtern.
