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.
Falls du das noch nicht eingerichtet hast, starte mit Bilder komprimieren in Shopify.
Ü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 Store träge anfühlt, sind dies die häufigsten Ursachen, sortiert nach ihrer Häufigkeit:
1. Überdimensionierte Bilder. Ein 4MB großes Hero-Image. Produktbilder, die direkt von der DSLR in voller Auflösung hochgeladen wurden. Das ist das Performance-Problem Nr. 1 in den meisten Shopify-Stores. 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 Script-Anfragen bedeuten, bevor deine Seite überhaupt lädt. Selbst Apps, die du nie öffnest, verlangsamen deinen Store, wenn deren Scripts weiterhin geladen werden.
3. Render-blocking Scripts. Scripts im <head>, die kein async oder defer Attribut haben, blockieren das Rendern der Seite während des Downloads. Schau dir dazu unseren Guide an: Render-blocking Scripts.
4. Ein altes oder überladenes Theme. Ältere Shopify-Themes (vor 2.0) wurden nicht auf Performance ausgelegt. Dawn schneidet gut ab; ältere Premium-Themes oft nicht. Passend dazu: Nicht verwendeten Code in Shopify entfernen.
5. Eingebettete Videos ohne Lazy Loading. YouTube-iframes laden Megabytes an Scripts von Google-Servern. Ohne das Facade-Pattern bedeutet jede Seite mit eingebettetem Video eine erhebliche Performance-Einbuße. Siehe: Videos in Shopify per Lazy Load laden.
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 in deinem Shopify-Adminbereich zu den Apps. Frage dich bei jeder App: „Wann habe ich diese zuletzt aktiv genutzt?“ Wenn die Antwort „vor Monaten“ oder „ich bin mir nicht sicher“ lautet, deinstalliere sie.
Nach der Deinstallation solltest du übrig gebliebenen Code entfernen. Siehe unseren Guide: So entfernst du Code-Reste von Apps in Shopify.
Passend dazu: Nicht verwendeten Code in Shopify entfernen.
Faustregel: Jede entfernte App, die ein Script-Tag in der theme.liquid hatte, reduziert das Gewicht deiner Seite um einen externen HTTP-Request und potenziell 20–200 KB JavaScript.
Fix 3 — Lazy Loading für Bilder hinzufügen
Prüfe, ob dein Theme bereits loading="lazy" bei Produkt- und Collection-Bildern nutzt. Moderne Themes tun das. Falls 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 laden.
Kompletter Guide: Bilder in Shopify per Lazy Load laden.
Fix 4 — Render-blocking Scripts beheben
Lass PageSpeed Insights laufen und schaue unter „Empfehlungen“ nach „Ressourcen beseitigen, die das Rendering blockieren“. Dort werden spezifische Scripts aufgelistet.
Für jedes gilt: Füge defer hinzu, wenn es ein Theme-Script ist, und async, wenn es ein Analytics- oder Marketing-Script ist. Kompletter Guide: Render-blocking Scripts in Shopify optimieren.
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.
Verwandt: Remove Unused Code in Shopify.
Falls noch nicht eingerichtet, starten Sie mit Compress Images in Shopify.
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 dir die Ergebnisse. Die wichtigsten Metriken:
- LCP (Largest Contentful Paint) — sollte unter 2,5 Sekunden liegen (gut)
- TBT (Total Blocking Time) — hängt mit JavaScript zusammen, 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.
Passend dazu: CSS und JavaScript in Shopify minifizieren.
