TL;DR
- LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1 — die Google-Schwellen für "Good"
- Nur 48 % der Shopify-Shops bestehen alle drei auf Mobile
- Core Web Vitals sind seit Juni 2021 offizieller Google-Ranking-Faktor
- Ghost Code von deinstallierten Apps ist Top-3-Ursache für schlechte CWV
- Typische Optimierung bringt +15–40 % CWV-Pass-Rate-Verbesserung
Was sind Core Web Vitals?
Core Web Vitals (CWV) sind die drei von Google definierten Metriken für Page-Experience:
- Largest Contentful Paint (LCP): Zeit bis zum sichtbaren Haupt-Content. Ziel: ≤ 2,5 Sekunden
- Interaction to Next Paint (INP): Reaktionszeit auf Nutzer-Interaktion. Ziel: ≤ 200 Millisekunden (ersetzte FID im März 2024)
- Cumulative Layout Shift (CLS): Summe unerwarteter Layout-Verschiebungen. Ziel: ≤ 0,1
Seit dem Google Page Experience Update (Juni 2021, vollständiger Rollout August 2021) sind CWV offizieller Ranking-Faktor.
Wo Shopify typischerweise scheitert
Laut pagespeedmatters.com 2026 haben nur 48 % der Shopify-Shops Mobile-Status "Good" über alle drei Metriken. Die Top-Ursachen:
- Third-Party-Scripts (apps.shopify.com) — oft >50 % der Ladezeit
- Ghost Code deinstallierter Apps (251 KB ungenutztes JavaScript im Median)
- Unoptimierte Bilder (keine AVIF/WebP, keine Lazy-Loading)
- Large CLS durch App-Widgets, die nach Page-Load einfließen
- Theme.liquid mit vielen Render-Blocking-Scripts
LCP optimieren
LCP ist auf Shopify meist durch große Hero-Bilder und viel Above-the-Fold-JavaScript ausgelöst.
Konkrete Maßnahmen:
- Hero-Bild preloaden:
<link rel="preload" as="image" href="{{ image | image_url }}">im<head> - AVIF/WebP-Format: Shopify-CDN liefert beides automatisch — via
image_urlFilter - Fonts preloaden +
font-display: swap - Render-Blocking JS minimieren: Defer auf alle non-critical Scripts
- Hero-Image nicht lazy-laden (typischer Fehler)
INP optimieren
INP misst nicht nur den ersten Click, sondern den "schlimmsten" während der ganzen Session. Shopify scheitert hier oft an:
- Overloaded Main-Thread durch viele Third-Party-Scripts
- JavaScript-Bundles von mehreren Apps, die parallel laufen
- Unsauberer Event-Handler-Code (lange Tasks > 50ms)
Maßnahmen:
- Third-Party-Scripts entfernen (Ghost Code loswerden — siehe Theme aufräumen)
- Long Tasks splitten mit
scheduler.yield()odersetTimeout(fn, 0) - Code-Splitting: Nur laden, was auf der aktuellen Seite gebraucht wird
- Theme-Extensions statt ScriptTags bei App-Installation bevorzugen
CLS optimieren
CLS entsteht typischerweise durch:
- Bilder ohne
width/height-Attribute - Werbebanner/App-Widgets, die nach DOMContentLoaded einfließen
- Fonts mit FOIT/FOUT ohne
font-display: swap - Pop-Ups und Cookie-Banner, die Content verschieben
Maßnahmen:
- Bild-Dimensionen immer setzen:
width="800" height="600"oderaspect-ratioim CSS - Platzhalter-Container für App-Widgets:
min-heightsetzen, damit Layout beim Einfügen nicht springt - Skeleton-Loader für dynamische Inhalte
- Cookie-Banner: Nicht den Content verschieben lassen — overlay statt push
Was Shopify schon automatisch macht
- Bild-Optimierung über CDN
- HTTP/2, Brotli-Kompression
- Caching-Header
Was Shopify NICHT automatisch macht:
- Ghost Code entfernen (siehe GhostCode)
- App-Script-Konflikte erkennen
- Theme-Code optimieren
Messung und Monitoring
- Lighthouse (ad-hoc):
https://pagespeed.web.dev/ - Core Web Vitals Report in Google Search Console (Feld-Daten aus Chrome UX Report)
- Shopify Theme Performance Report:
admin → Online Store → Themes → Customize → Performance
Ziel: 75. Perzentil in Feld-Daten, nicht nur Lab-Daten im Lighthouse.
Der 48-Stunden-Plan
- Tag 1 Vormittag: Lighthouse-Baseline für Top-3-Seiten (Home, Collection, Product) messen
- Tag 1 Nachmittag: GhostCode-Scan + Cleanup
- Tag 1 Abend: Hero-Image preload, Font preload in theme.liquid
- Tag 2 Vormittag: Bild-Dimensionen auf allen Templates setzen
- Tag 2 Nachmittag: Re-Audit Lighthouse, Vergleich
- Tag 2 Abend: Search Console Core Web Vitals Report einrichten für laufendes Monitoring
Erwarteter LCP-Gewinn: 0,5–1,5 Sekunden. INP −20 bis −80ms.
Nächste Schritte
- Diese Woche: Lighthouse-Baseline + erster Ghost-Code-Scan
- Nächste Woche: CWV-Report in Search Console regelmäßig tracken
- Ongoing: Jede App-Installation auf Performance-Impact testen (Before/After-Lighthouse)
Weiterführend: Shopify Theme aufräumen: 12 Schritte · Ghost Code entfernen · Shopify Performance optimieren