Core Web Vitals im Online-Shop: LCP, INP und CLS in der Praxis

Die Core Web Vitals sind die drei Kennzahlen, mit denen Google die Nutzererfahrung auf einer Seite bewertet. Für einen Online-Shop sind sie nicht bloß „ein SEO-Thema“: Eine langsame oder ruckelnde Website kostet Umsatz – vor allem auf dem Smartphone, wo der Großteil des Traffics stattfindet. Lassen wir die Theorie beiseite und konzentrieren uns auf das, was wir in der Praxis tatsächlich beheben.

Die drei Kennzahlen in je einem Absatz

LCP (Largest Contentful Paint): wie schnell das größte Element auf dem Bildschirm erscheint. In einem Shop ist das meist das Hauptproduktfoto oder das große Bild auf der Startseite. Gut: bis 2,5 Sekunden.

INP (Interaction to Next Paint): wie schnell die Seite reagiert, wenn der Nutzer etwas antippt – einen Filter, „In den Warenkorb“, eine Größenauswahl. INP hat den früheren FID abgelöst. Gut: bis 200 ms.

CLS (Cumulative Layout Shift): wie stark sich Inhalte beim Laden verschieben. Der Klassiker: Sie wollen auf einen Button tippen, und er rutscht nach unten, weil darüber ein Banner geladen wurde. Gut: bis 0,1.

Ob eine Seite besteht, beurteilt Google am 75. Perzentil der echten Besuche – 75 % Ihrer Besucher müssen also eine gute Erfahrung machen.

Wo Sie messen – und warum die Zahlen abweichen

• Felddaten (echte Nutzer): der Core-Web-Vitals-Bericht in der Google Search Console und der Bereich mit Daten echter Nutzer in PageSpeed Insights. Das ist es, was für Google zählt.
• Labordaten (simuliert): Lighthouse und der Score in PageSpeed Insights. Nützlich für die Diagnose, aber nicht das, was Google fürs Ranking heranzieht.

Jagen Sie nicht dem Lighthouse-Score von 100/100 hinterher. Jagen Sie grünen Felddaten auf den Seiten nach, die Geld verdienen. Bei kleinen Websites ohne genügend Traffic für Felddaten sind die Labordaten der beste Anhaltspunkt, den Sie haben.

Die vier Templates, auf die es ankommt

Ein Shop besteht im Grunde aus vier Templates. Optimieren Sie Templates, nicht einzelne Seiten:

1. Startseite: meist ein LCP-Problem durch einen schweren Slider.
2. Kategorie: meist INP durch Filter und CLS durch Bilder ohne Größenangaben.
3. Produkt: meist LCP durch das Hauptfoto und INP durch die Variantenauswahl.
4. Warenkorb/Checkout: meist INP durch schwere Zahlungsskripte und Versandkostenberechnungen.

LCP verbessern

Im Shop ist das LCP-Element fast immer ein Bild. Die Maßnahmen nach Wirkung sortiert:

• Serverantwortzeit (TTFB). Antwortet der Server langsam, ist alles andere auch langsam. Page Caching für nicht angemeldete Besucher, ordentliches Hosting, ein CDN.
• Kein Lazy Loading für das Hauptbild. Das LCP-Bild sollte sofort geladen werden, idealerweise mit fetchpriority="high".
• Richtige Größe und richtiges Format. Ein 3000 px breites Foto für einen 400 px breiten Handybildschirm ist Verschwendung. Liefern Sie WebP oder AVIF mit srcset aus.
• Weg mit dem Slider. Über die erste Folie hinaus werden Slider auf der Startseite kaum angeklickt, und sie verschlechtern fast immer das LCP. Ein einziges statisches Bild erfüllt den Zweck besser.
• Schriften. Weniger Schriftfamilien und -schnitte, font-display: swap und selbst gehostete Schriftdateien.

INP verbessern

INP trifft WooCommerce-Shops mit vielen Plugins am härtesten, denn jedes Plugin bringt zusätzliches JavaScript mit.

• Weniger Drittanbieter-Skripte. Chat-Widgets, Pop-ups, Heatmaps, mehrere Pixel: Jedes davon hat seinen Preis. Behalten Sie nur, was Sie aktiv nutzen.
• Skripte nur dort laden, wo sie gebraucht werden. Das Skript des Zahlungsanbieters braucht die Startseite nicht, das Slider-Skript braucht der Checkout nicht.
• Kategoriefilter. Filter, die bei jedem Klick die ganze Seite per schwerem AJAX neu laden, sind eine häufige Ursache für schlechtes INP. Geben Sie sofort ein visuelles Feedback (einen Ladezustand) und optimieren Sie die Datenbankabfragen.
• Variantenauswahl. Ein Wechsel von Größe oder Farbe sollte Preis und Foto sofort aktualisieren, nicht erst nach einer Anfrage an den Server.
• Kleineres DOM. Kategorieseiten mit Hunderten Produkten und riesigen Mega-Menüs machen jede Interaktion langsamer.

CLS verbessern

CLS lässt sich in der Regel am leichtesten beheben:

• Größenangaben bei jedem Bild (width und height oder aspect-ratio), damit der Browser den Platz reserviert.
• Reservierter Platz für Banner und Hinweise. Eine Leiste „Kostenloser Versand ab 40 €“, die erst nach dem Laden erscheint, schiebt die ganze Seite nach unten.
• Cookie-Banner als Overlay am unteren Rand, nicht als Leiste, die den Inhalt verdrängt.
• Schriften mit Metriken nahe an der Ersatzschrift, damit der Text nicht springt.
• Bewertungen und Drittanbieter-Widgets mit fester Höhe.

Ein Plan für zwei Wochen

1. Tag 1–2: Search Console, Core-Web-Vitals-Bericht. Welche Templates fallen auf dem Smartphone durch?
2. Tag 3–5: TTFB und Caching. Ist der Server langsam, fangen Sie dort an.
3. Tag 6–8: Bilder: Formate, Größen, korrektes Lazy Loading, Priorität für das Hauptbild.
4. Tag 9–11: Skripte: Bestandsaufnahme, Entfernen, bedingtes Laden.
5. Tag 12–14: CLS: Größenangaben, Banner, Schriften.

Die Felddaten in der Search Console brauchen rund 28 Tage, bis sie Änderungen vollständig abbilden. Lassen Sie sich also nicht entmutigen, wenn nicht sofort alles grün ist.

Checkout und Backend nicht vergessen

Die Core Web Vitals messen öffentliche Seiten. Zwei Bereiche, die nicht immer in den Berichten auftauchen, wirken sich aber direkt auf den Umsatz aus. Der Checkout hat oft nicht genug Traffic für Felddaten. Testen Sie ihn deshalb von Hand auf einem durchschnittlichen Smartphone mit langsamer Verbindung: Wie lange dauert der Wechsel der Versandart oder das Öffnen des Kartenformulars? Und das Backend: Dauert das Speichern einer Bestellung oder eines Produkts mehrere Sekunden, ist das fast immer ein Zeichen, dass der Server an seine Grenzen stößt – was früher oder später auch Ihre Kunden zu spüren bekommen.

Eine praktische Gewohnheit: Führen Sie nach jeder größeren Änderung (neues Plugin, Theme-Update, neues Tracking-Skript) PageSpeed Insights für eine Produktseite erneut aus und vergleichen Sie das Ergebnis mit dem vorherigen. Verschlechterungen lassen sich am Tag ihres Auftretens viel leichter beheben als drei Monate später.

Fazit

Die Core Web Vitals sind kein Selbstzweck, sondern ein messbarer Weg zu prüfen, ob sich Ihr Shop angenehm nutzen lässt. Und ein angenehmer Shop verkauft mehr.

Wenn Sie herausfinden möchten, wo Ihr Shop Zeit verliert: Unsere Leistung Ladezeit und Core Web Vitals beginnt mit einem ausführlichen Audit. Nehmen Sie Kontakt mit uns auf, um mehr zu erfahren.