Shopify Tips & Tutorials

Shopify-Shop beschleunigen: 10 praktische Tipps für schnellere Ladezeiten

March 31, 2026
Website-Geschwindigkeit Dashboard mit Ladefortschritt

Eine Sekunde mehr Ladezeit klingt harmlos. Laut Google steigt die Absprungrate um 32%, wenn die Seite statt einer Sekunde drei Sekunden braucht. Bei fünf Sekunden sind es 90%. Jede Verzögerung kostet Geld, und zwar direkt messbar.

Die gute Nachricht: Die meisten Geschwindigkeitsprobleme in Shopify-Shops lassen sich ohne Entwickler beheben. Dieser Beitrag zeigt 10 Dinge, die Sie heute angehen können.

In diesem Beitrag

Erst messen, dann optimieren

Bevor Sie irgendetwas ändern: Messen Sie den Ist-Zustand. Ohne Ausgangswert wissen Sie hinterher nicht, ob Ihre Änderungen etwas gebracht haben.

Drei kostenlose Tools, die Sie jetzt sofort nutzen können:

  • Google PageSpeed Insights (pagespeed.web.dev): Gibt Ihnen einen Score von 0 bis 100 und zeigt konkret, was die Seite bremst.
  • Shopify Online Store Speed Report: Im Shopify-Admin unter Online Store > Themes. Vergleicht Ihren Shop mit ähnlichen Shops.
  • Chrome DevTools Lighthouse: Rechtsklick > Untersuchen > Lighthouse-Tab. Gleiche Daten wie PageSpeed Insights, aber direkt im Browser.

Testen Sie mindestens drei Seiten: Startseite, eine Collection-Seite und eine Produktseite mit vielen Bildern. Die Startseite allein reicht nicht, weil Produktseiten oft die langsamsten sind.

Core Web Vitals: Was zählt 2026?

Google bewertet Ladegeschwindigkeit anhand von drei Metriken. Die Zielwerte für “gut”:

  • LCP (Largest Contentful Paint): unter 2,5 Sekunden. Das größte sichtbare Element (meistens das Hero-Bild oder das Hauptproduktbild) muss in dieser Zeit geladen sein.
  • INP (Interaction to Next Paint): unter 200 Millisekunden. Wie schnell reagiert die Seite auf Klicks und Eingaben? Schwere JavaScript-Bundles treiben den INP nach oben.
  • CLS (Cumulative Layout Shift): unter 0,1. Wie stark springt der Inhalt beim Laden herum? Bilder ohne Höhe/Breite-Angaben und nachladende Banner verursachen Layout-Shifts.

Alle drei Werte fließen in Googles Ranking ein. Ein Shop mit schlechten Core Web Vitals wird in den Suchergebnissen benachteiligt. Das gilt auch für Google Shopping.

1. Bilder richtig komprimieren

Bilder sind fast immer der größte Geschwindigkeitskiller. Ein unkomprimiertes Produktfoto mit 4000 x 4000 Pixeln und 5 MB pro Datei bremst die Seite massiv. Shopify skaliert Bilder zwar automatisch herunter, aber das Ausgangsbild sollte trotzdem optimiert sein.

Faustregeln: Maximal 2048 Pixel auf der längsten Seite. Dateigröße unter 500 KB. Werkzeuge wie TinyPNG, Squoosh oder ShortPixel komprimieren ohne sichtbaren Qualitätsverlust.

Haben Sie ein Produkt mit vielen Farbvarianten und je 5-8 Fotos pro Farbe? Dann sind Bilder doppelt relevant, weil die Galerie schnell 40+ Dateien enthält. Eine Varianten-Bilder-App, die nur die Fotos der gewählten Variante anzeigt, spart dem Browser das Laden unnötiger Bilder.

2. Bildformate prüfen

Shopify unterstützt WebP und liefert Bilder automatisch in diesem Format aus, wenn der Browser es versteht. WebP ist 25-30% kleiner als JPEG bei gleicher Qualität.

Prüfen Sie, ob Ihre Theme-Templates das image_tag-Filter von Liquid verwenden. Ältere Themes nutzen manchmal noch feste <img>-Tags mit JPG-Pfaden. In dem Fall liefert Shopify keine WebP-Varianten aus.

3. Lazy Loading für Bilder unterhalb des sichtbaren Bereichs

Bilder, die beim ersten Laden nicht sichtbar sind (alles unterhalb des Bildschirms), sollten erst geladen werden, wenn der Nutzer dorthin scrollt. Das ist Lazy Loading.

Die meisten modernen Shopify-Themes haben Lazy Loading eingebaut. Prüfen Sie es trotzdem: Öffnen Sie Ihre Produktseite, scrollen Sie langsam nach unten und beobachten Sie im Network-Tab von Chrome DevTools, ob Bilder erst beim Scrollen geladen werden. Falls nicht, nutzt Ihr Theme kein Lazy Loading.

Wichtig: Das Hauptbild (Hero oder Produktbild) darf nicht lazy-loaded werden. Das ist Ihr LCP-Element und muss sofort laden.

4. App-Audit: Welche Apps bremsen?

Jede installierte Shopify-App kann eigenes JavaScript und CSS in Ihren Shop laden. 15 Apps bedeuten potenziell 15 zusätzliche Script-Dateien, die der Browser laden, parsen und ausführen muss.

So finden Sie die Bremser: Öffnen Sie Ihren Shop in einem Inkognito-Fenster. Chrome DevTools > Network > nach JS filtern. Sortieren Sie nach Dateigröße. Jede externe Domain, die nicht cdn.shopify.com ist, ist ein App-Script. Notieren Sie, welche App welches Script lädt und wie groß es ist.

Deaktivieren Sie testweise Apps, die Sie nicht aktiv nutzen, und messen Sie die Geschwindigkeit erneut. Die Ergebnisse überraschen oft. Mehr dazu in unserem Shopify App-Stack-Audit auf CraftShift.

5. Deinstallierte Apps: Reste entfernen

Wenn Sie eine Shopify-App deinstallieren, bleibt deren Code manchmal im Theme. Liquid-Snippets, CSS-Dateien, JavaScript-Referenzen. Diese Reste laden weiterhin bei jedem Seitenaufruf, obwohl die App nicht mehr aktiv ist.

Gehen Sie in den Theme-Editor (Code bearbeiten) und suchen Sie nach Snippets und Sections, die zu deinstallierten Apps gehören. Deren Namen enthalten oft den App-Namen. Löschen Sie diese Dateien und die zugehörigen {% render %}-Aufrufe im Layout. Machen Sie vorher ein Backup des Themes.

6. Theme-Wahl überdenken

Nicht alle Themes sind gleich schnell. Die offiziellen Shopify-Themes (Dawn, Horizon, Sense, Craft und die anderen kostenlosen Themes) sind auf Performance optimiert. Premium-Themes von Drittanbietern laden oft deutlich mehr Code.

Falls Ihr Shop auf einem alten Theme aus dem Shopify Theme Store läuft und die Performance schlecht ist, lohnt sich ein Blick auf die neueren kostenlosen Themes. Dawn ist seit Jahren der Performance-Benchmark. Horizon (2024 veröffentlicht) ist modern und schlank.

Bedenken Sie: Der Theme-Wechsel ist Aufwand. Prüfen Sie erst, ob die anderen Tipps in dieser Liste ausreichen.

7. Schriftarten reduzieren

Jede Schriftart, die Ihr Shop lädt, ist ein zusätzlicher HTTP-Request. Manche Themes laden 4-6 Schriftvarianten (Regular, Bold, Italic, Light, Semibold, Bold Italic). Jede Variante ist eine separate Datei.

Beschränken Sie sich auf maximal 2 Schriftfamilien mit je 2-3 Schnitten. Regular und Bold reichen für die meisten Shops. Nutzen Sie System-Fonts (Arial, Helvetica, Georgia) als Fallback, die der Browser nicht extra laden muss.

8. Inline-CSS und -JavaScript minimieren

Manche App-Entwickler und Theme-Customizer fügen CSS und JavaScript direkt in Liquid-Templates ein. Das erhöht die HTML-Dateigröße und kann das Rendering blockieren.

Prüfen Sie im Quellcode Ihrer Seite: Gibt es große <style>– oder <script>-Blöcke im HTML? Falls ja, sollten diese in externe Dateien ausgelagert werden, damit der Browser sie cachen kann.

9. Hero-Bereich schlank halten

Der Hero-Bereich (das große Banner oder Slideshow oben auf der Startseite) ist meistens das LCP-Element. Wenn dort ein riesiges Bild, ein Video oder sogar ein animiertes Karussell mit 5 Slides lädt, drückt das den LCP-Wert in den roten Bereich.

Tipps: Ein einzelnes Bild statt einer Slideshow. Bild auf maximal 1600 Pixel Breite und unter 200 KB. Kein Autoplay-Video im Hero. Falls Sie eine Slideshow brauchen, laden Sie nur das erste Slide sofort und die restlichen per Lazy Loading.

10. Metafield-basierte Apps bevorzugen

Das ist ein Punkt, den die meisten Geschwindigkeits-Guides übersehen. Viele Shopify-Apps laden ihre Daten von einem externen Server. Der Browser muss erst die Seite laden, dann ein Script ausführen, dann eine API-Anfrage an den App-Server schicken, auf die Antwort warten und die Daten rendern. Das kostet leicht 200-500 ms pro App.

Apps, die ihre Daten in Shopify-Metafields speichern, umgehen dieses Problem. Metafield-Daten kommen mit der Seite selbst, weil Shopify sie in die Liquid-Templates einbettet. Kein extra HTTP-Request. Kein Warten auf einen Drittanbieter-Server.

Rubik Variant Images nutzt genau diesen Ansatz. Alle Varianten-Bilder-Zuordnungen werden in Metafields gespeichert und mit der Seite ausgeliefert. Keine externen API-Aufrufe, kein Warten. Der Unterschied zu Apps, die externe Server abfragen, ist messbar.

Wenn Sie wissen wollen, wie sich Swatch-Apps konkret auf die Ladezeit auswirken: Unser Performance-Vergleich von Swatch-Apps auf CraftShift zeigt die Messergebnisse mit echten Zahlen.

Video

Sehen Sie Rubik Variant Images in Aktion, um den metafield-basierten Ansatz zu verstehen:

Rubik Variant Images kostenlos testen

Häufig gestellte Fragen

Was ist ein guter Shopify-Speed-Score?

In PageSpeed Insights: 90+ ist gut, 50-89 braucht Verbesserung, unter 50 ist schlecht. Shopifys eigener Speed Report zeigt eine relative Bewertung im Vergleich zu ähnlichen Shops. Ein Score über 70 im Shopify-Report ist solide. Beachten Sie: Kein Shopify-Shop erreicht 100/100 in PageSpeed, weil Shopify eigene Scripts lädt, die Sie nicht kontrollieren können.

Machen Apps meinen Shop langsamer?

Nicht alle, aber viele. Jede App kann eigenes JavaScript und CSS laden. Apps, die externe Server abfragen, verlangsamen die Seite stärker als Apps, die Shopify-Metafields nutzen. Prüfen Sie regelmäßig, welche Apps wie viel Code laden. Deinstallieren Sie, was Sie nicht brauchen.

Wie groß sollten Shopify-Produktbilder sein?

Maximal 2048 Pixel auf der längsten Seite. Dateigröße unter 500 KB. Shopify skaliert zwar automatisch herunter, aber ein kleineres Ausgangsbild spart Speicher und beschleunigt die Verarbeitung auf dem Server.

Was sind Core Web Vitals?

Drei Metriken, mit denen Google die Nutzererfahrung misst: LCP (wie schnell wird der Hauptinhalt sichtbar), INP (wie schnell reagiert die Seite auf Interaktionen) und CLS (wie stabil bleibt das Layout beim Laden). Alle drei beeinflussen Ihr Google-Ranking.

Was bedeutet “metafield-basiert” bei Shopify-Apps?

Metafield-basierte Apps speichern ihre Daten direkt in Shopify statt auf einem eigenen Server. Die Daten laden mit der Seite, ohne zusätzliche API-Aufrufe. Das spart Ladezeit und macht die App unabhängig von der Verfügbarkeit externer Server. Rubik Variant Images funktioniert so.

Sollte ich mein Theme wechseln, um schneller zu werden?

Nur als letzten Ausweg. Probieren Sie erst die anderen Tipps in diesem Beitrag. Wenn Ihr Shop danach immer noch langsam ist und Sie ein schwergewichtiges Premium-Theme nutzen, kann ein Wechsel zu Dawn oder Horizon deutlich helfen. Aber der Aufwand eines Theme-Wechsels ist nicht zu unterschätzen.

Weiterführende Artikel

Co-Founder of Rubik Variant Images & Swatch

Related Posts