Wichtigste Erkenntnisse
- Die Hauptgründe für langsame Shopify-Stores: zu große Bilder, zu viele App-Skripte, Render-Blocking JavaScript und veraltete Themes.
- Überprüfe deine Ladezeit: Nutze Shopifys Web-Performance-Berichte (Analysen → Berichte) und PageSpeed Insights.
- Allein die Bildoptimierung verbessert die Ladezeit meist mehr als jede andere einzelne Änderung.
- Fudge schreibt nativen Shopify-Code ohne den Overhead externer Skripte, der App-abhängige Stores ausbremst.
Um ein Shopify-Theme schneller zu machen, komprimiere Bilder, entferne nicht mehr genutzte Apps, setze Render-Blocking Skripte auf defer und nutze Lazy Loading für alles unterhalb des sichtbaren Bereichs (‘below the fold’). Jede zusätzliche Sekunde Ladezeit kostet Conversions, vor allem mobil. Wie echte Stores im gesamten Ökosystem tatsächlich abschneiden, erfährst du in unserem State of Shopify Performance 2026-Bericht.
Wie kann ich meine Shopify-Geschwindigkeit verbessern?
Fange mit dem Messen an. Behebe dann zuerst die größten Probleme.
Überprüfe deine aktuelle Geschwindigkeit
Shopifys Web-Performance-Berichte: Gehe zu Analysen → Berichte und suche nach dem gewünschten Web-Performance-Bericht. Dort siehst du die echten Core Web Vitals deiner Nutzer (LCP, INP und CLS), bewertet als Gut, Mittelmäßig oder Schlecht. Die Seite Onlineshop → Themes zeigt ebenfalls eine Zusammenfassung, die zu den jeweiligen Berichten verlinkt.
PageSpeed Insights: Teste deine Startseite, eine Produktseite und eine Kategorie-Seite (Collection) unter pagespeed.web.dev. Der Mobile-Score ist am wichtigsten – die Desktop-Performance ist normalerweise viel besser. Speziell für langsame Smartphones, siehe Shopify Mobile Speed.
Lighthouse in Chrome DevTools: F12 → Tab ‘Lighthouse’ → Bericht erstellen (Generate report). Bietet eine detailliertere Aufschlüsselung als PageSpeed Insights und listet spezifische Optimierungsmöglichkeiten (Opportunities) nach ihrem Impact auf.
Warum ist Shopify so langsam?
Wenn sich dein Store träge anfühlt, sind hier die häufigsten Ursachen, sortiert danach, wie oft sie die Übeltäter sind:
1. Zu große Bilder. Ein 4 MB großes Hero-Bild. Produktbilder, die direkt in voller Auflösung von der Spiegelreflexkamera hochgeladen wurden. Das ist das Performance-Problem Nr. 1 in den meisten Shopify-Stores. Ein 2000px breites Bild, das mit 400px angezeigt wird, lädt etwa 25-mal so viele Pixel herunter, wie der Bildschirm tatsächlich nutzt.
2. Zu viele Apps. Jede App fügt JavaScript hinzu. 15 installierte Apps können 15 separate externe Skript-Anfragen bedeuten, bevor deine Seite überhaupt lädt. Selbst Apps, die du nie öffnest, bremsen deinen Store aus, wenn ihre Skripte weiterhin geladen werden.
3. Render-blockierende Skripte. 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 ausgelegt. 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 eingebettetem Video massive Performance-Einbußen. Siehe: Lazy Load Videos in Shopify.
Fix 1 — Bilder vor dem Upload komprimieren
Das ist die Änderung mit dem größten Impact für die meisten Stores. Zielgrößen:
- Hero-/Banner-Bilder: unter 300 KB, maximale Breite 2000px
- Produktbilder: unter 200 KB pro Bild
- Collection-Thumbnails (Kategoriebilder): unter 80 KB
Tools:
- Squoosh.app — kostenlos, im Browser nutzbar, exzellente Komprimierung mit Qualitätsvorschau
- TinyPNG — kostenlos, Drag-and-Drop, gut für PNGs
- Adobe Photoshop / Lightroom “Export for Web” — für die Stapelverarbeitung
Nutze das WebP-Format. WebP-Bilder sind bei gleicher Qualität typischerweise 25-35 % kleiner als JPEGs. Shopifys CDN liefert WebP automatisch an unterstützende Browser aus, aber du kannst WebP auch direkt hochladen.
Die komplette Anleitung findest du unter How to Compress Images in Shopify.
Fix 2 — Unnötige Apps prüfen und entfernen
Gehe in deinem Shopify-Adminbereich zu ‘Apps’. Frage dich bei jeder App: “Wann habe ich sie das letzte Mal aktiv genutzt?” Wenn die Antwort “vor Monaten” oder “ich bin mir nicht sicher” lautet, deinstalliere sie.
Bereinige nach der Deinstallation alle Code-Reste mit unserem Guide zum Entfernen von übrig gebliebenem App-Code aus Shopify.
Faustregel: Jede entfernte App, die einen Skript-Tag in der theme.liquid hatte, spart eine externe HTTP-Anfrage und möglicherweise 20-200 KB JavaScript.
Für Theme-Code, den du nicht mehr brauchst, siehe How to Remove Unused Code in Shopify.
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. Wenn nicht, füge es den Bild-Tags in deinen Section-Dateien hinzu.
Lade dein Hero-Bild niemals per Lazy Load – das ist dein LCP-Element und muss sofort laden. Falls deines per Lazy Load geladen wird, siehe Fix Hero Banner Eager Loading in Shopify.
Die komplette Anleitung findest du unter How to Lazy Load Images in Shopify.
Fix 4 — Render-blocking Scripts beheben
Lass PageSpeed Insights laufen und suche unter “Empfehlungen” (Opportunities) nach “Render-blockierende Ressourcen beseitigen”. Dort werden spezifische Skripte aufgelistet.
Für jedes davon: Füge defer hinzu, wenn es ein Theme-Skript ist, und async, wenn es ein Analytics- oder Marketing-Skript ist. Vollständiger Guide: How to Optimize Render-Blocking Scripts in Shopify.
Fix 5 — Nutze ein schnelles Basis-Theme
Wenn dein aktuelles Theme nach den oben genannten Korrekturen beim mobilen PageSpeed unter 40 Punkte erzielt, solltest du einen Wechsel zu einem schnelleren Theme in Erwägung ziehen.
Schnelle Themes, die du in Betracht ziehen solltest:
- Dawn — das offizielle, kostenlose Theme von Shopify, erreicht konstant 90+ Punkte beim mobilen PageSpeed
- Craft — basiert auf der Dawn-Architektur, saubere Performance
- Sense — gleiche Architektur, starke Standardwerte
Der Performance-Unterschied zwischen einem gut programmierten Theme (Dawn: 90+) und einem älteren Premium-Theme (50-60) ist signifikant und allein durch Optimierung kaum aufzuholen.
Warum Fudge schneller ist als App-basierte Anpassungen
Die meisten Shopify-Store-”Features” — Countdown-Timer, Sticky CTAs, Announcement-Bars, FAQ-Bereiche — werden über Apps hinzugefügt. Jede App fügt externe Skripte und Styles hinzu.
Fudge, der KI-Operator für Shopify-Stores, baut genau diese Features als nativen Liquid/HTML/CSS-Code direkt in dein Theme. Keine externen Skript-Anfragen. Kein App-JavaScript, das auf jeder Seite geladen wird: Jedes Feature wird nur dort geladen, wo es auch genutzt wird.
Eine Sticky Add-to-Cart-Leiste, die mit Fudge gebaut wurde, verursacht kaum Performance-Overhead. Die äquivalente App-Lösung fügt ein Skript-Tag, einen externen API-Aufruf und potenziell weitere CSS-Konflikte hinzu.
So nutzen Stores Fudge, um mehrere Single-Purpose-Apps zu ersetzen. Du musst auch nicht wissen, wo du anfangen sollst: Bitte Fudge einfach um ein Speed-Audit. Es listet auf, was deine Seiten ausbremst, und entwirft die Fixes in deinem Theme, damit du sie absegnen kannst. Nachdem du eine App deinstalliert hast, kann Fudge auch den übrig gebliebenen Code finden und ein Clean-up entwerfen.
Was du nach Performance-Optimierungen tracken solltest
Führe PageSpeed Insights vor und nach jeder Änderung aus und notiere dir die Scores. Die spezifischen Metriken, die du tracken solltest:
- LCP (Largest Contentful Paint) - sollte unter 2,5 Sekunden liegen (gut)
- INP (Interaction to Next Paint) - Reaktionsfähigkeit auf Taps und Klicks, sollte unter 200ms liegen (gut). Im PageSpeed-Labortest ist TBT (Total Blocking Time) unter 200ms der Ersatzwert.
- CLS (Cumulative Layout Shift) - Layout-Stabilität, sollte unter 0,1 liegen (gut)
Diese drei sind die Core Web Vitals von Google und beeinflussen neben der User Experience auch dein Suchmaschinen-Ranking.
Wenn die Basics erledigt sind, lohnen sich zwei fortgeschrittene Hebel: die Speculation Rules API auf Shopify, die die nächste Seite vorrendert, bevor der Kunde klickt, und Service Worker für Shopify, die allerdings etwas riskanter sind – hier solltest du dich einlesen, bevor du sie ausprobierst.
Für kleinere CSS- und JavaScript-Dateien, siehe How to Minify CSS and JavaScript in Shopify.
FAQ
Was ist ein "guter" Mobile-PageSpeed-Score für einen Shopify-Store?
90+ ist exzellent (selten bei echten Stores), 70–89 ist solide, 50–69 ist der Durchschnitt für App-lastige Stores, unter 50 bedeutet akuten Handlungsbedarf. Dawn startet ab Werk mit Scores von 90+; die meisten etablierten Stores mit 5–10 Apps landen im Bereich von 50–75. Jage nicht der 100 hinterher – ab 85 lohnt sich der Aufwand kaum noch (Diminishing Returns).
Wie lange dauert es, bis man nach den Fixes Geschwindigkeitsverbesserungen sieht?
PageSpeed Insights zeigt Änderungen sofort beim nächsten Test an. Echte Nutzer-Metriken (Core Web Vitals aus der Search Console) hinken 28 Tage hinterher, da sie ein gleitender 28-Tage-Durchschnitt sind. Beurteile Verbesserungen nicht anhand eines einzigen PageSpeed-Durchlaufs – teste mehrmals und achte auf Trends, nicht auf einzelne Scores.
Verliere ich meine Anpassungen, wenn ich zu einem schnelleren Shopify-Theme wechsle?
Theme-Editor-Einstellungen (Farben, Schriftarten, Sections, Inhalte) werden nicht von einem Theme ins andere übernommen – sie werden pro Theme gespeichert. Du musst die Startseite und andere angepasste Seiten im neuen Theme neu aufbauen. Auch direkte Code-Änderungen werden nicht übertragen. Plane eine Migration: Baue das neue Theme als Entwurf auf und veröffentliche es, wenn es fertig ist.
Muss ich mich überhaupt um die Desktop-Geschwindigkeit kümmern?
Weniger als bei Mobile, aber ja. Der meiste Traffic in den meisten Stores ist mobil, also hat Mobile Priorität. Desktop-Optimierung bekommst du meist gratis dazu, wenn du für Mobile optimierst (komprimierte Bilder, weniger Skripte gelten für beides).
Können Speed-Optimierungen meine Shopify-Apps kaputt machen?
Möglicherweise. Aggressive Optimierungen wie das Verzögern (defer) aller Skripte, das Entfernen von vermeintlich ungenutztem Code oder das Löschen von Inline-Styles können Apps beschädigen, die auf eine bestimmte Lade-Reihenfolge oder HTML-Struktur angewiesen sind. Teste Apps nach größeren Optimierungsrunden immer – Checkout, Reviews, Suche, Cart Drawer –, um sicherzustellen, dass sie noch funktionieren. Die bessere und tiefgreifendere Lösung ist, App-Widgets durch native Theme-Features zu ersetzen: Beschreibe das Feature, das du heute hast, gegenüber Fudge, und es baut es als nativen Theme-Code nach, wodurch das Skript-Gewicht der App komplett verschwindet.
