29.9.26

Shopify Ladezeit optimieren: 3 Tipps

Fabian Bauer
SEM & CRO Manager
Grafik zum Thema Shopify
Grafik zum Thema Shopify
Inhaltsverzeichnis
Support bei der Ladezeit Optimierung?
Hier klicken

Eine langsame Shopify-Ladezeit kostet dich Umsatz – nicht irgendwann, sondern bei jedem einzelnen Seitenaufruf. In diesem Beitrag geht es um drei Stellschrauben, die du ohne Entwicklerkenntnisse oder teure Apps anpassen kannst. Kein theoretisches Framework, sondern konkrete Maßnahmen mit direktem Effekt auf Ladezeit und Conversion Rate.

Das Video zeigt die drei Maßnahmen direkt im Shopify-Backend und im Theme-Editor – falls du die Einstellungen lieber im Kontext siehst, als sie nachzulesen. Der Beitrag hier erklärt alles vollständig, auch ohne das Video geschaut zu haben.

Warum die Ladezeit in Shopify so oft unterschätzt wird

Shopify ist als gehostete Plattform grundsätzlich gut aufgestellt: CDN, sichere Server, automatische Updates. Trotzdem haben viele Shops ein Ladezeit-Problem. Der Grund liegt fast immer nicht bei der Infrastruktur, sondern bei dem, was Shopify-Betreiber selbst hinzufügen: Apps, die JavaScript in den Kopfbereich laden, unkomprimierte Produktbilder mit mehreren Megabyte, und Themes, die mit Features vollgepackt sind, die niemand aktiviert hat.

Google bewertet Ladezeit als Rankingfaktor, und Nutzer:innen brechen Seiten ab, die länger als zwei bis drei Sekunden brauchen. Beides zusammen bedeutet: Eine langsame Seite verliert doppelt – bei der organischen Sichtbarkeit und bei der Conversion Rate. Die gute Nachricht ist, dass die größten Hebel in den meisten Shops noch nicht angefasst wurden.

Tipp 1: Bilder richtig komprimieren und im richtigen Format ausliefern

Bilder sind in fast jedem Shop der größte Einzelposten beim Seitengewicht. Shopify konvertiert hochgeladene Bilder zwar automatisch in WebP, wenn der Browser des Nutzers bzw. der Nutzerin das Format unterstützt – aber nur dann, wenn du keine unkomprimierten Originale hochlädst, die so groß sind, dass selbst die komprimierte Variante noch zu viel Gewicht hat.

Die Faustregel: Produktbilder sollten vor dem Upload nicht größer als 1.000 bis 2.000 Pixel auf der langen Seite sein und nach der Komprimierung unter 200 KB liegen. Für Banner und Hero-Bilder gilt dasselbe Prinzip – sie werden oft vergessen, weil sie selten im Produktkatalog auftauchen, aber auf der Startseite geladen werden.

Tools zur Bildkomprimierung

  • Squoosh (squoosh.app): kostenlos, browserbasiert, gibt dir genaue Kontrolle über Qualität und Ausgabeformat
  • TinyPNG: schnell für JPG und PNG in der Batch-Verarbeitung

Wer viele Produktbilder hat und nicht jedes einzeln anfassen will, kann eine dieser Apps einmalig über den bestehenden Katalog laufen lassen. Danach reicht es, neue Bilder direkt komprimiert hochzuladen.

Tipp 2: Apps und deren JavaScript-Last reduzieren

Jede App, die du in Shopify installierst, kann JavaScript und CSS in den Quellcode deines Shops einbetten – und viele tun das, egal ob du die App aktiv nutzt oder nicht. Deinstallierte Apps hinterlassen manchmal sogar Code-Reste im Theme, die weiter geladen werden.

Der erste Schritt: Geh in deinem Shopify-Backend unter Einstellungen -> Apps und Vertriebskanäle und schau, welche Apps du tatsächlich verwendest. Alles, was du nicht aktiv brauchst, sollte deinstalliert werden. Danach lohnt sich ein Blick in den Quelltext der Startseite (im Browser per Rechtsklick -> Seitenquelltext anzeigen), um zu prüfen, ob noch Script-Tags von alten Apps vorhanden sind.

Was nach der Deinstallation zu tun ist

Shopify bietet seit einiger Zeit den App-Block-Mechanismus im Online Store 2.0 an. Apps, die darüber eingebunden werden, laden ihren Code nur auf den Seiten, auf denen du sie explizit hinzufügst. Das ist ein struktureller Vorteil gegenüber älteren Apps, die ihren Code pauschal auf jeder Seite einbetten. Wenn du zwischen zwei funktional ähnlichen Apps wählst, bevorzuge die, die App-Blöcke unterstützt.

Außerdem hilft das Shopify-eigene Tool unter Online-Shop -> Themes -> Aktives Theme -> Theme anpassen dabei, nicht genutzte Sektionen und Blöcke zu entfernen. Weniger aktiver Code bedeutet weniger zu laden.

Tipp 3: Das richtige Theme wählen und Theme-Einstellungen aufräumen

Themes sind der unsichtbare Ladezeit-Faktor, der am seltensten hinterfragt wird. Viele voll ausgestattete Themes laden dutzende JavaScript-Dateien und CSS-Blöcke, von denen ein Großteil für Features steht, die du nie aktivierst – Megamenü, Video-Banner, Produktvergleich, Countdown-Timer. Der Code wird trotzdem geladen.

Wenn du Shopify Ladezeit optimieren willst und noch beim Theme-Auswahl-Prozess bist: Lass dich nicht von der Feature-Liste leiten, sondern schau dir den Lighthouse-Score des Demo-Stores an. Google Lighthouse ist in Chrome unter den Entwicklertools (F12 -> Lighthouse) kostenlos verfügbar und gibt dir in wenigen Sekunden einen Performance-Score.

Theme-Einstellungen, die Ladezeit direkt beeinflussen

  • Lazy Loading für Bilder: Die meisten modernen Themes haben diese Option. Aktiviere sie, wenn sie nicht standardmäßig an ist.
  • Animationen und Übergänge: Optisch ansprechend, aber JavaScript-lastig. Deaktiviere alles, was du nicht bewusst einsetzen willst.
  • Schriftarten: Jede zusätzliche Google-Font-Variante ist eine externe Anfrage. Beschränke dich auf maximal zwei Schriftvarianten.
  • Social-Media-Widgets: Eingebettete Instagram-Feeds oder Facebook-Widgets laden externe Skripte nach. Wäge ab, ob der Nutzen die Ladezeit rechtfertigt.

Ladezeit messen: So weißt du, ob die Maßnahmen wirken

Ohne Messung weißt du nicht, ob deine Änderungen etwas gebracht haben. Nutze dafür diese drei Tools:

  • Google PageSpeed Insights (pagespeed.web.dev): Analysiert Mobile und Desktop getrennt, zeigt konkrete Verbesserungsvorschläge mit Zeitersparnis-Schätzungen
  • GTmetrix: Detaillierter Wasserfallgraph, der zeigt, welche Ressourcen wie lange brauchen
  • Google Search Console: Unter Erfahrung -> Core Web Vitals siehst du, wie Google deine Seiten tatsächlich bewertet – basierend auf echten Nutzerdaten

Mach eine Messung vor den Änderungen und eine danach. Teste immer dieselbe Seite – idealerweise die Startseite und eine Produktseite, weil beide unterschiedliche Ressourcen laden. Mobile ist wichtiger als Desktop, weil Google Mobile-First indexiert.

Prioritäten richtig setzen

Nicht jede Optimierung lohnt sich gleich. Hier eine grobe Einschätzung, womit du anfangen solltest:

  • Höchster Hebel: Bilder komprimieren und auf korrekte Dimensionen skalieren. Wirkt sofort, ohne Risiko.
  • Mittlerer Hebel: Nicht genutzte Apps deinstallieren und Code-Reste entfernen. Etwas mehr Aufwand, aber messbarer Effekt.
  • Langfristiger Hebel: Theme-Wahl und Theme-Bereinigung. Größter Effekt, aber auch größter Eingriff – plane das sorgfältig.

Was du nicht tun solltest

Es gibt einige verbreitete Ansätze zur Ladezeit-Optimierung, die in Shopify entweder wenig bringen oder sogar Probleme verursachen können:

  • Caching-Apps: Shopify managed das Caching über sein CDN bereits. Zusätzliche Caching-Apps lösen selten echte Probleme und können manchmal Konflikte verursachen.
  • Blind auf jeden PageSpeed-Hinweis reagieren: Manche Vorschläge betreffen Ressourcen von Shopify selbst, die du gar nicht kontrollieren kannst. Priorisiere, was du tatsächlich ändern kannst.
  • Theme-Code manuell bearbeiten ohne Backup: Immer zuerst eine Kopie des Themes erstellen, bevor du im Code etwas änderst. In Shopify geht das unter Online-Shop -> Themes -> Aktionen -> Duplizieren.

Shopify Ladezeit optimieren ist kein einmaliges Projekt, sondern eine laufende Aufgabe – jede neue App, jedes neue Bild, jedes Theme-Update kann den Score verändern. Wer einmal verstanden hat, wo die Hebel liegen, kann künftige Entscheidungen (welche App installiere ich, welches Bild lade ich hoch) mit diesem Wissen treffen und vermeidet, dass sich der Shop schleichend verlangsamt.

Autorenbox

Hi, ich bin Fabian und unterstütze  Shopify-Shops. Mein Fokus liegt dabei auf zwei Bereichen: der Optimierung von Onlineshops und der gezielten Traffic-Generierung über Google. Und wenn zwischen Kundenprojekten noch etwas Zeit bleibt, teile ich hier im Blog praktische Tipps – direkt aus der Praxis für die Praxis.

Fabian Bauer Headshot
Fabian Bauer
SEM & CRO Manager für Shopify

Shopify Kosten Rechner

Gib deine Spezifikationen ein und erhalte den zukünftigen Preis für deinen Shop. Shopify bietet verschiedene Pläne für unterschiedliche Bedingungen. In der Praxis sind die Kosten für einen Shopify-Onlineshop höher als die monatlichen Abonnementgebühren.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Empfohlener Plan: Shopify Plus

Monatliche Kosten: ab 2500 €
Jährliche Kosten bei Vorauszahlung (20% Rabatt): 100 €
Transaktionsgebühren: Keine