Die wichtigsten Punkte
- 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 den integrierten Geschwindigkeitsbericht von Shopify (Onlineshop → Themes → Geschwindigkeit) und PageSpeed Insights.
- Allein die Bildoptimierung verbessert die Ladezeit meist mehr als jede andere Einzelmaßnahme.
- Fudge schreibt nativen Shopify-Code, ganz ohne den Ballast externer Skripte, der App-abhängige Stores oft ausbremst.
Ein langsamer Shopify-Store kostet Geld. Studien zeigen immer wieder, dass jede zusätzliche Sekunde Ladezeit die Conversion-Rate senkt. Besonders mobile Käufer kennen da kein Pardon – eine Ladezeit von 3 Sekunden verringert die Conversions messbar im Vergleich zu einer Ladezeit von 1 Sekunde. Wie echte Stores im gesamten Ökosystem tatsächlich abschneiden, erfährst du in unserem Report State of Shopify Performance 2026.
Die gute Nachricht: Die meisten Shopify-Stores haben einige 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 Geschwindigkeitsbericht: Onlineshop → Themes → klicke auf dein Theme → Geschwindigkeit. Das zeigt den Speed Score deines Themes und vergleicht ihn mit ähnlichen Shops. Das ist ein nützlicher Startpunkt.
PageSpeed Insights: Teste deine Startseite, eine Produktseite und eine Kategorieseite auf pagespeed.web.dev. Der Mobile-Score ist am wichtigsten – die Desktop-Performance ist in der Regel viel besser. Für eine detaillierte Anleitung zu Mobile Speed und der Optimierung für langsame Geräte schau dir unseren speziellen Guide an.
Lighthouse in den Chrome DevTools: F12 → Lighthouse-Tab → Report generieren. Bietet eine detailliertere Aufschlüsselung als PageSpeed Insights, bei der konkrete Optimierungsmöglichkeiten nach ihrem Impact aufgelistet werden.
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 Änderung mit der größten Wirkung für die meisten Shops. Zielgrößen:
- Hero-/Banner-Bilder: unter 200 KB, maximale Breite 2000px
- Produktbilder: jeweils unter 150 KB
- Kategorie-Thumbnails: unter 80 KB
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 die Stapelverarbeitung
Verwende das WebP-Format. WebP-Bilder sind bei gleicher Qualität in der Regel 25–35 % kleiner als JPEGs. Das CDN von Shopify liefert WebP automatisch an unterstützte Browser aus, du kannst WebP aber 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 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 „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 Werte. Die wichtigsten Metriken, die du tracken solltest:
- 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 die Core Web Vitals von Google und beeinflussen neben der User Experience auch dein Suchmaschinen-Ranking.
Passend dazu: CSS und JavaScript in Shopify minifizieren.
Wenn die Basics erledigt sind, lohnen sich zwei fortgeschrittene Stellschrauben: die Speculation Rules API in Shopify, die die nächste Seite bereits prerendert, bevor der Kunde klickt, und Service Worker für Shopify – hier sollten sich die meisten Shop-Betreiber erst gut einlesen, bevor sie sich daran versuchen.
FAQ
90+ ist exzellent (selten bei echten Shops), 70–89 ist solide, 50–69 ist der Durchschnitt für App-lastige Shops, unter 50 besteht dringender Handlungsbedarf. Dawn kommt standardmäßig auf 90+ Punkte; die meisten etablierten Shops mit 5–10 Apps landen im Bereich von 50–75. Jage nicht nach der 100 — ab 85 lohnt sich der Aufwand kaum noch.
PageSpeed Insights spiegelt Änderungen beim nächsten Test sofort wider. Echte Nutzerdaten (Core Web Vitals aus der Search Console) hinken 28 Tage hinterher, da es sich um einen gleitenden 28-Tage-Durchschnitt handelt. Beurteile Verbesserungen nicht anhand eines einzigen PageSpeed-Durchlaufs — teste mehrmals und achte auf Trends, nicht auf einzelne Scores.
Theme-Editor-Einstellungen (Farben, Schriftarten, Abschnitte, Inhalte) werden nicht in andere Themes übernommen — sie werden pro Theme gespeichert. Du musst die Startseite und andere angepasste Seiten im neuen Theme neu aufbauen. Direkte Code-Anpassungen werden ebenfalls nicht übertragen. Plane eine Migration: Baue das neue Theme als Entwurf auf und veröffentliche es, wenn es bereit ist.
Weniger als bei Mobile, aber ja. Der meiste Traffic in den meisten Shops ist mobil, also hat Mobile Priorität. Desktop-Optimierung ist meistens ein Nebeneffekt der mobilen Optimierung (komprimierte Bilder, weniger Skripte gelten für beides). Ignoriere Desktop nur, wenn du wirklich in deinen Ressourcen eingeschränkt bist — aber das ist fast nie ein sinnvoller Kompromiss.
Möglicherweise. Aggressive Optimierungen wie das Verzögern (Defer) aller Skripte, das Entfernen von scheinbar ungenutztem Code oder das Löschen von Inline-Styles können Apps kaputt machen, die von einer bestimmten Ladereihenfolge oder einem bestimmten Markup abhängig sind. Teste Apps nach größeren Optimierungsrunden immer — Checkout, Bewertungen, Suche, Warenkorb (Cart Drawer) —, um sicherzustellen, dass sie noch funktionieren. Die nachhaltigere Lösung ist es, App-Widgets durch native Theme-Funktionen zu ersetzen: Beschreibe Fudge die Funktion, die du aktuell nutzt, und es baut sie als nativen Theme-Code nach, wodurch der Skript-Ballast der App komplett wegfällt.
