Key Takeaways
- Die Hauptursachen für langsame Shopify-Shops: zu große Bilder, zu viele App-Skripte, Render-blocking JavaScript und veraltete Themes.
- Überprüfe deinen Speed: Nutze Shopifys integrierten Speed-Bericht (Onlineshop → Themes → Geschwindigkeit) und PageSpeed Insights.
- Bildoptimierung allein verbessert die Ladezeit normalerweise stärker als jede andere einzelne Maßnahme.
- Fudge schreibt nativen Shopify-Code ohne den Overhead externer Skripte, der Shops ausbremst, die von Apps abhängig sind.
Ein langsamer Shopify-Shop kostet Geld. Studien zeigen konsistent, dass jede zusätzliche Sekunde Ladezeit die Conversion Rate senkt. Vor allem Mobile-Shopper sind unerbittlich – eine Ladezeit von 3 Sekunden senkt die Conversions messbar im Vergleich zu einer Ladezeit von einer Sekunde.
Die gute Nachricht: Die meisten Shopify-Shops haben mehrere offensichtliche Performance-Probleme, für die es jeweils klare Lösungen gibt.
Wie kann ich meine Shopify-Geschwindigkeit verbessern?
Beginne mit dem Messen. Behebe dann die größten Probleme zuerst.
Überprüfe deine aktuelle Geschwindigkeit
Shopifys integrierter Speed-Bericht: Onlineshop → Themes → Klick auf dein Theme → Geschwindigkeit. Hier siehst du den Speed Score deines Themes im Vergleich zu ähnlichen Shops. Ein nützlicher Startpunkt.
PageSpeed Insights: Teste deine Homepage, eine Produktseite und eine Kategorieseite auf pagespeed.web.dev. Der Mobile Score ist am wichtigsten – die Desktop-Performance ist meistens deutlich besser.
Lighthouse in den Chrome DevTools: F12 → Tab „Lighthouse“ → Bericht erstellen. Detailliertere Analyse als PageSpeed Insights mit spezifischen Optimierungsmöglichkeiten, sortiert nach Auswirkung.
Warum ist Shopify so langsam?
Wenn sich dein Shop träge anfühlt, sind dies die häufigsten Ursachen, sortiert nach ihrer Relevanz:
1. Zu große Bilder. Ein 4MB Hero-Image. Produktfotos, die direkt von der DSLR in voller Auflösung hochgeladen wurden. Das ist das Performance-Problem Nr. 1 in den meisten Shopify-Shops. Ein 2000px breites Bild, das mit 400px Breite angezeigt wird, verschwendet 70 % des Downloads.
2. Zu viele Apps. Jede App fügt JavaScript hinzu. 15 installierte Apps können 15 separate externe Skript-Anfragen bedeuten, bevor deine Seite lädt. Sogar Apps, die du nie öffnest, bremsen deinen Shop, wenn ihre Skripte noch geladen werden.
3. Render-blocking Scripts. Skripte im <head> ohne async oder defer blockieren das Rendern der Seite, während sie heruntergeladen werden. Siehe unseren Guide zu Render-blocking Scripts.
4. Ein altes oder überladenes Theme. Ältere Shopify-Themes (vor 2.0) wurden nicht auf Performance optimiert. Dawn schneidet gut ab; ältere Premium-Themes oft nicht.
5. Eingebettete Videos ohne Lazy Loading. YouTube-iframes laden Megabytes an Skripten von Google-Servern. Ohne das Facade-Pattern bedeutet jede Seite mit einem eingebetteten Video einen massiven Performance-Verlust.
Fix 1 — Bilder vor dem Upload komprimieren
Dies ist die effektivste Änderung für die meisten Shops. Zielgrößen:
- Hero-/Banner-Bilder: unter 200KB, maximale Breite 2000px
- Produktbilder: jeweils unter 150KB
- Kachel-Vorschaubilder: unter 80KB
Tools:
- Squoosh.app – kostenlos, browserbasiert, exzellente Komprimierung mit Qualitätsvorschau
- TinyPNG – kostenlos, Drag-and-Drop, gut für PNGs
- Adobe Photoshop / Lightroom „Für Web exportieren“ – für Stapelverarbeitung
Nutze das WebP-Format. WebP-Bilder sind bei gleicher Qualität typischerweise 25-35 % kleiner als JPEGs. Das CDN von Shopify liefert WebP automatisch an unterstützte Browser aus, aber du kannst WebP auch direkt hochladen.
Fix 2 — Unnötige Apps prüfen und entfernen
Gehe im Shopify-Adminbereich zu „Apps“. Frage dich bei jeder App: „Wann habe ich diese zuletzt aktiv genutzt?“ Wenn die Antwort „vor Monaten“ oder „ich weiß es nicht“ lautet, deinstalliere sie.
Bereinige nach der Deinstallation eventuelle Code-Reste. Siehe unseren Guide: So entfernst du App-Code-Reste aus Shopify.
Faustregel: Jede entfernte App, die ein Script-Tag in der theme.liquid hatte, reduziert dein Seitengewicht um einen externen HTTP-Request und potenziell 20-200KB JavaScript.
Fix 3 — Lazy Loading für Bilder hinzufügen
Prüfe, ob dein Theme bereits loading="lazy" bei Produkt- und Kategorieseiten-Bildern nutzt. Moderne Themes tun das. Wenn nicht, füge es den Image-Tags in deinen Section-Dateien hinzu.
Nutze niemals Lazy Loading für dein Hero-Image – das ist dein LCP-Element und muss sofort geladen werden.
Kompletter Guide: So nutzt du Lazy Loading für Bilder in Shopify.
Fix 4 — Render-blocking Scripts beheben
Führe PageSpeed Insights aus und schaue unter „Optimierungsmöglichkeiten“ nach „Ressourcen beseitigen, die das Rendering blockieren“. Dort werden spezifische Skripte aufgelistet.
Für jedes gilt: Füge defer hinzu, wenn es ein Theme-Skript ist, und async, wenn es ein Analyse- oder Marketing-Skript ist. Kompletter Guide: So optimierst du Render-blocking Scripts in Shopify.
Fix 5 — Nutze ein schnelles Basis-Theme
Wenn dein aktuelles Theme nach den obigen Fixes bei PageSpeed (Mobile) unter 40 Punkten liegt, solltest du über einen Wechsel zu einem schnelleren Theme nachdenken.
Schnelle Themes zur Auswahl:
- Dawn – Shopifys offizielles kostenloses Theme, erreicht konsistent 90+ Punkte bei PageSpeed Mobile
- Craft – basiert auf der Dawn-Architektur, saubere Performance
- Sense – gleiche Architektur, starke Standard-Werte
Der Performance-Unterschied zwischen einem gut gebauten Theme (Dawn: 90+) und einem älteren Premium-Theme (50-60) ist signifikant und lässt sich allein durch Optimierung kaum aufholen.
Warum Fudge schneller ist als App-basierte Anpassungen
Die meisten „Features“ in Shopify-Shops – Countdown-Timer, Sticky CTAs, Announcement-Bars, FAQ-Bereiche – werden über Apps hinzugefügt. Jede App fügt externe Skripte und Styles hinzu.
Fudge baut diese Features als nativen Liquid/HTML/CSS-Code direkt in dein Theme ein. Keine externen Skript-Anfragen. Kein App-JavaScript, das auf jeder Seite lädt. Der Code ist für dein spezifisches Theme optimiert.
Ein mit Fudge gebauter Sticky Add-to-Cart-Button verursacht vernachlässigbaren Performance-Overhead. Die entsprechende App-Lösung fügt ein Script-Tag, einen externen API-Aufruf und potenziell CSS-Konflikte hinzu.
Was du nach Performance-Optimierungen tracken solltest
Führe PageSpeed Insights vor und nach jeder Änderung aus und notiere die Werte. Die wichtigsten Metriken:
- LCP (Largest Contentful Paint) — sollte unter 2,5 Sekunden liegen (gut)
- TBT (Total Blocking Time) — bezogen auf JavaScript, sollte unter 200ms liegen (gut)
- CLS (Cumulative Layout Shift) — Layout-Stabilität, sollte unter 0,1 liegen (gut)
Diese drei sind Googles Core Web Vitals und beeinflussen neben der User Experience auch dein Suchmaschinen-Ranking.
