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 Kategorie-Bildern (Collections) verwendet. Moderne Themes tun das. Falls nicht, füge es den Image-Tags in deinen Section-Dateien hinzu.
Nutze für dein Hero-Image niemals Lazy Loading — das ist dein LCP-Element und muss sofort laden. Falls das bei dir der Fall ist, schau dir Hero Banner Eager Loading in Shopify reparieren an.
Vollständiger Guide: Lazy Loading für Bilder in Shopify nutzen.
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
Lass PageSpeed Insights vor und nach jeder Änderung laufen und notiere dir die Scores. Die wichtigsten Metriken, auf die du achten solltest:
- LCP (Largest Contentful Paint) — sollte unter 2,5 Sekunden liegen (gut)
- TBT (Total Blocking Time) — betrifft JavaScript, sollte unter 200ms liegen (gut)
- CLS (Cumulative Layout Shift) — Layout-Stabilität, sollte unterm 0,1 liegen (gut)
Diese drei sind Googles Core Web Vitals und beeinflussen neben der User Experience auch dein Search-Ranking.
Dazu passend: CSS und JavaScript in Shopify minimieren.
FAQ
90+ ist exzellent (sehr selten bei echten Shops), 70–89 ist solide, 50–69 ist der Durchschnitt für Shops mit vielen Apps, bei unter 50 musst du dringend handeln. Dawn startet mit Scores über 90; die meisten etablierten Shops mit 5–10 Apps landen im Bereich 50–75. Jage nicht der 100 hinterher — ab 85 lohnt sich der Aufwand kaum noch (diminishing returns).
PageSpeed Insights zeigt Änderungen beim nächsten Test sofort an. Echte Nutzerdaten (Core Web Vitals aus der Search Console) hinken 28 Tage hinterher, da es sich um einen gleitenden 28-Tage-Durchschnitt handelt. Bewerte Verbesserungen nicht anhand eines einzigen PageSpeed-Tests — teste mehrmals und achte auf Trends, nicht auf einzelne Scores.
Die Einstellungen im Theme-Editor (Farben, Schriftarten, Sections, Inhalte) werden nicht übernommen — sie werden pro Theme gespeichert. Du musst die Startseite und andere individuell angepasste Seiten im neuen Theme also neu bauen. Direkte Code-Änderungen werden ebenfalls nicht übertragen. Plane eine Migration: Baue dein neues Theme als Entwurf (Draft) auf und veröffentliche es, wenn du bereit bist.
Weniger als bei Mobile, aber ja. Der meiste Traffic kommt in fast allen Shops über mobile Endgeräte, daher hat Mobile absolute Priorität. Die Desktop-Optimierung erledigt sich meistens ganz von allein, wenn du für Mobile optimierst (komprimierte Bilder und weniger Skripte gelten für beides). Ignoriere Desktop nur, wenn du absolut keine Ressourcen hast — in den meisten Fällen ist das aber kein sinnvoller Kompromiss.
Möglicherweise. Aggressive Optimierungen wie das "Deferring" (Verzögern) aller Skripte, das Entfernen von scheinbar ungenutztem Code oder das Löschen von Inline-Styles können Apps zerschießen, die auf eine bestimmte Lade-Reihenfolge oder spezielles Markup angewiesen sind. Teste deine Apps nach größeren Optimierungsrunden immer durch — Checkout, Bewertungen, Suche, Cart Drawer (Warenkorb) — um sicherzugehen, dass sie noch funktionieren. Die bessere und tiefgreifendere Lösung ist, App-Widgets komplett durch native Theme-Funktionen zu ersetzen: Beschreibe Fudge einfach die Funktion, die du bisher nutzt, und es baut diese als nativen Theme-Code nach. Dadurch entfällt der Skript-Ballast der App komplett.
