Core Web Vitals für Onlineshops: Conversion-Hebel
Was LCP, INP und CLS wirklich für Shop-Conversion bedeuten, welche fünf Beschleuniger in der Praxis am meisten bringen und wie wir messen, bevor wir optimieren.
Wir machen seit drei Jahren Performance-Audits, vor allem für Shopware- und Shopify-Stores. Die Mythen, denen wir am häufigsten begegnen: „Wir brauchen ein neues Theme", „Cloudflare löst das schon" und „Lighthouse sagt 92, also passt es". Keine dieser Annahmen hat in der Praxis konstant gehalten.
Was die drei Metriken wirklich messen
LCP (Largest Contentful Paint)
Wann wird das größte sichtbare Element fertig gerendert? In Shops ist das fast immer das Hero-Bild oder das erste Produkt-Image im Above-the-fold-Bereich. Ziel: unter 2,5 Sekunden auf 75 Prozent aller Sessions. Was LCP kaputt macht: ungewichtete Bilder, late gerenderte Hero-Slider, Custom-Fonts ohne font-display: swap.
INP (Interaction to Next Paint)
Seit März 2024 verbindlich. Misst die Latenz nach dem ersten Klick oder Tap. Schmerzt am meisten dort, wo Cookie-Banner, Tracking-Skripte und Personalisierungs-Tools auf der gleichen Sekunde mit dem User um die Aufmerksamkeit konkurrieren. Ziel: unter 200 ms. Praxis: viele Shops liegen bei 400 bis 800 ms, ohne es zu wissen.
CLS (Cumulative Layout Shift)
Wie weit verschieben sich Elemente nach dem ersten Render? Klassische Verursacher: Bilder ohne explizite Dimensionen, asynchron geladene Banner, dynamisch eingeblendete Bewertungssterne. Ziel: unter 0,1.
Die fünf Hebel, die in der Praxis funktionieren
1. Bilder mit fester Größe und WebP/AVIF
Wir liefern Produkt- und Hero-Bilder ausschließlich als WebP (AVIF wenn die Browser-Support-Matrix passt), mit expliziter Breite und Höhe im HTML. Das spart sofort 20 bis 40 Prozent Payload und eliminiert CLS-Sprünge. Ein <picture>-Tag mit srcset erlaubt unterschiedliche Auflösungen pro Viewport.
2. Kritisches CSS inline, Rest via async
Above-the-fold-CSS direkt im <head>, der Rest wird verschoben. Shopware 6 erlaubt das via Theme-Compile, Shopify Plus via Liquid-Snippet. Effekt: LCP sinkt typischerweise um 300 bis 700 ms.
3. Third-Party-Scripts auf Diät
Die meisten Shops, die wir auditieren, laden 12 bis 20 Drittanbieter-Skripte. Davon bringen nachweisbar drei bis vier echten Wert. Was wir empfehlen:
- Tracking (GA4 oder Plausible) erst nach Consent laden, niemals vor Hero-Paint
- Chat-Widgets lazy laden, am besten erst nach User-Interaktion
- Review-Widgets unterhalb des Folds rendern, nicht vor dem Produkt-Headline
- Marketing-Tags via Tag-Manager mit klaren Trigger-Regeln, nicht „auf jeder Seite immer"
4. Hero-Layout ohne Slider
Hero-Slider sind ein historischer Fehler. Sie liefern höchstens das erste Bild rechtzeitig und blockieren oft den Main-Thread mit Eigeninitialisierung. Wir empfehlen ein statisches Hero mit klarer Botschaft und einem CTA. Wer mehrere Botschaften zeigen will, baut Sektionen darunter, nicht im Hero.
5. Caching wirklich nutzen
Shopware 6 hat einen mächtigen HTTP-Cache, der oft nicht eingesetzt wird, weil ein Plugin bei jedem Request einen Cookie setzt. Wir prüfen mit jedem Performance-Audit, ob die cache-control-Header tatsächlich grün sind, und welche Edge-Caching- Optionen (Varnish, Cloudflare APO, Bunny.net) verfügbar wären.
Wie wir messen
Lighthouse aus dem Browser ist Diagnose, nicht Wahrheit. Was wir wirklich nutzen:
- CrUX-Daten aus dem PageSpeed-Insights-API für reale Nutzer-Performance der letzten 28 Tage. Das ist die Quelle, die Google selbst für Rankings nutzt.
- WebPageTest mit zwei Geräteprofilen (Desktop schnell, Mobile mittlere Klasse) und drei Netzwerkprofilen.
- Sentry Performance oder SpeedCurve im Live-Betrieb, um Regressionen früh zu erkennen.
Was wir nicht empfehlen
Wir empfehlen explizit nicht: ein neues Theme „weil das alte langsam ist". In 8 von 10 Fällen ist das alte Theme nicht das Problem, sondern die akkumulierten Marketing- und Tracking-Aufsätze. Ein Theme-Wechsel ist teuer und reset oft nur kurzfristig, weil die gleichen Plugins wieder dazukommen.
Performance-Audit mit umsetzbarer Roadmap
Wir messen Ihren Shop nach CrUX und WebPageTest, identifizieren die fünf größten Bremsklötze und liefern eine schriftliche Roadmap mit Aufwandsschätzung pro Maßnahme. Sie entscheiden danach, ob wir oder Ihr Team umsetzt.
Performance-Audit anfragen →Patrick Gundlach arbeitet seit über zehn Jahren an der Schnittstelle von Webentwicklung, Analytics und Tracking. In seinen Artikeln teilt er Erkenntnisse aus konkreten Kundenprojekten, ohne Marketing-Schaum, ohne Werkzeug-Hype.