Shopify-Ladezeit verbessern: Theme, Apps und Bilder prüfen

Dein Shopify-Shop lädt langsam, PageSpeed Insights zeigt Orange oder Rot, und du weißt nicht, ob das Theme, die Apps oder die Bilder schuld sind. Dieser Artikel ist die Shopify-spezifische Fehlersuche: erst die Diagnose mit den Berichten im Shopify-Admin, dann die typischen Ursachen mit einem Prüfweg je Ursache, dann die Lösung. Was LCP, INP und CLS bedeuten und warum Feld- und Labordaten auseinandergehen, steht im allgemeinen Artikel zu den Core Web Vitals im Online-Shop. Hier geht es nur um das, was du in Shopify konkret anfasst.

Diagnose: ist die Shopify-Ladezeit wirklich dein Problem?

Bevor du etwas änderst, brauchst du eine Ausgangsmessung. Sonst weißt du nach dem Aufräumen nicht, ob es geholfen hat.

Die Web-Performance-Berichte im Shopify-Admin

Shopify misst die Core Web Vitals aus echten Besuchen deines Shops. Auf der Themes-Seite im Admin siehst du eine Zusammenfassung der drei Werte über die Zeit. Die vollständigen Berichte findest du in der Berichtsliste unter „Web Performance“: LCP, INP und CLS der letzten 28 Tage, jeweils im Verlauf, nach Seiten-URL oder nach Seitentyp. Du brauchst dafür die Mitarbeiterberechtigung für Berichte.

Der Verlauf ist der wertvollste Teil. Wenn ein Wert an einem bestimmten Tag schlechter wurde, prüfe, was du an dem Tag installiert oder geändert hast. App-Installationen, Theme-Updates und neuer Code hinterlassen dort sichtbare Spuren.

PageSpeed Insights als zweite Meinung

Miss zusätzlich mit Google PageSpeed Insights, und zwar drei Seitentypen mobil: Startseite, eine Kollektion, eine Produktseite. Notiere die Werte. Der Labortest zeigt dir außerdem, welche Skripte und Bilder die meiste Zeit kosten. Das ist die Liste, mit der du im nächsten Abschnitt arbeitest.

Symptome im Verhalten der Besucher

Eine langsame Seite fällt nicht nur in Messwerten auf. Typische Zeichen in GA4: Die Produktseiten haben mobil deutlich mehr Ausstiege als am Desktop, oder die Engagement-Rate liegt bei bezahltem Mobil-Traffic weit unter dem Rest. Wenn du solche Muster siehst, ist die Ladezeit ein Kandidat, aber nicht der einzige. Was sonst die mobile Conversion drückt, steht unter Mobile Conversion-Rate verbessern.

Der Schnelltest: Standardtheme auf einer Kopie

Ein Test, der in einer halben Stunde klärt, ob dein Theme oder deine Inhalte bremsen: Füge ein aktuelles kostenloses Shopify-Theme als zusätzliches Theme hinzu, ohne es zu veröffentlichen, und öffne die Vorschau einer Produktseite. Miss die Vorschau-URL mit PageSpeed Insights. Ist sie deutlich schneller als dein Live-Theme mit denselben Bildern und Produkten, liegt der Hebel im Theme und den App-Einbindungen. Ist sie ähnlich langsam, liegt er in Bildern, Videos und Inhalten.

Ursachen mit Prüfweg

Lösung je Ursache

1. Theme aktuell halten oder wechseln

Shopify empfiehlt ein aktuelles, optimiertes Theme und nennt die eigenen Online-Store-2.0-Themes und die Horizon-Themes als auf Web-Performance ausgelegt. Wenn dein Theme aus einer älteren Generation stammt oder über Jahre angepasst wurde, ist ein Wechsel oft der größte Einzelhebel.

Der Preis: Anpassungen, Snippets und App-Einbindungen musst du im neuen Theme nachbauen. Plane das als Projekt und teste alles in der unveröffentlichten Kopie, vor allem Produktseite, Warenkorb und die Einbindung deiner Tracking-Codes. Wie sich ein Theme-Wechsel auf URL-Struktur und Suchmaschinen-Eintrag auswirkt, steht im Artikel zur Shopify-SEO; die Adressen bleiben gleich, die Ausgabe von Titeln und strukturierten Daten kann sich ändern.

Wenn du beim Theme bleibst: Prüfe, ob eine neuere Version verfügbar ist, und übernimm sie auf einer Kopie. Schalte Seitenübergänge und Animationen ab und vergleiche die Messwerte vorher und nachher. Shopify weist selbst darauf hin, dass Animationen Seiten verlangsamen können.

2. Apps aussortieren

Jede App, die etwas im Shop anzeigt oder misst, lädt in der Regel Skripte und Stylesheets auf jeder Seite. Zu viele Apps, die Ressourcen auf der Storefront laden, bremsen. Die Frage lautet also nicht „Ist die App gut?“, sondern „Schafft sie genug Wert, um ihre Ladezeit zu rechtfertigen?“.

Geh so vor:

1. Schreibe alle installierten Apps in eine Liste mit einem Satz dazu, was sie leisten und wer im Team sie nutzt.
2. Deinstalliere Apps ohne klare Antwort.
3. Öffne im Theme-Editor die App-Embeds. Dort siehst du, welche Apps Code in dein Theme einbetten, und kannst nicht genutzte Embeds deaktivieren, ohne die App zu deinstallieren.
4. Lies vor jeder Deinstallation im App-Store-Eintrag oder beim Anbieter nach, ob zusätzliche Schritte zum Entfernen nötig sind.

3. Reste deinstallierter Apps entfernen

Das Deinstallieren einer App entfernt ihren Code nicht automatisch aus dem Theme. Genau daran scheitern viele Aufräumaktionen: Die App ist weg, ihr Skript lädt weiter.

Öffne den Code-Editor des Themes und suche in theme.liquid sowie in den Snippets nach Skript-Einbindungen fremder Domains und nach Kommentaren mit App-Namen. Entferne nur, was du eindeutig einer nicht mehr genutzten App zuordnen kannst, und arbeite auf einer Theme-Kopie. Wenn du unsicher bist, frag den früheren App-Anbieter nach der Anleitung zum vollständigen Entfernen. Shopify beschreibt das Vorgehen in der Hilfe zur Verbesserung der Web-Performance.

4. Bilder richtig hochladen

Shopify optimiert Bilder über sein Bild-CDN automatisch: Format, Größe und Kompression werden passend ausgeliefert. Du musst also nicht selbst in WebP oder AVIF konvertieren. Trotzdem gibt es zwei Dinge, die nur du steuerst.

• Ausgangsgröße: Lade Bilder in etwa der Größe hoch, in der sie maximal angezeigt werden. Ein 6.000 Pixel breites Foto für eine 800 Pixel breite Produktkachel ist Ballast, auch wenn das CDN es verkleinert.
• Format nach Inhalt: JPG für Fotos, PNG nur, wenn du Transparenz brauchst. Grafiken mit transparentem Hintergrund als JPG zu speichern spart nichts und sieht schlecht aus; Fotos als PNG hochzuladen macht sie unnötig groß.

Für Alt-Texte, Dateinamen und die Frage, welche Bilder überhaupt ranken sollen, siehe Bilder-SEO und Alt-Texte.

5. Schriften reduzieren

Jede Schriftfamilie und jeder Schnitt, den das Theme lädt, verzögert die erste sichtbare Darstellung. Prüfe in den Theme-Einstellungen, wie viele verschiedene Schriften und Schnitte aktiv sind. Zwei Familien mit je zwei Schnitten reichen für fast jeden Shop. Wenn dein Theme Systemschriften anbietet, teste sie: Sie brauchen keinen Download und sind auf Mobilgeräten kaum vom Wunschdesign zu unterscheiden.

6. Startseite entschlacken

Startseiten sammeln über die Jahre Slider, Autoplay-Videos, Instagram-Feeds und Countdown-Banner. Jedes dieser Elemente lädt zusätzliche Dateien und oft fremde Skripte. Ersetze den Slider durch ein statisches Bild mit klarer Botschaft, lade Videos erst per Klick und begrenze die Anzahl der Sections je Vorlage: Eine hohe Zahl von Sections auf einer Seite senkt laut Shopify-Hilfe die Web-Performance.

7. Tag Manager und externe Skripte prüfen

Wenn du einen Tag Manager nutzt, geh die Tag-Liste durch und entferne Tags, die niemand mehr auswertet: alte Pixel, Tests von Tools, die du nicht gekauft hast, doppelte Analytics-Einbindungen. Shopify nennt als häufigste Ursache für schlechte Werte schlicht zu viel JavaScript aus Theme, Apps oder Tag Manager.

8. Kollektionen paginieren

Kollektionen mit sehr vielen Produkten sollten eine Seitennummerierung haben statt alles auf einmal zu laden. Die meisten Themes bieten die Anzahl der Produkte je Seite als Einstellung. Was das für die Indexierung von Filter- und Kollektionsseiten bedeutet, steht unter Filterseiten und SEO.

Schritt für Schritt: ein Nachmittag Aufräumen

1. Messen: Web-Performance-Berichte im Admin öffnen und den 28-Tage-Stand notieren. PageSpeed Insights mobil für Startseite, eine Kollektion und eine Produktseite laufen lassen; Ergebnisse speichern.
2. Theme kopieren: Aktuelles Theme duplizieren. Alle folgenden Änderungen machst du auf der Kopie.
3. Apps listen und streichen: App-Liste durchgehen, App-Embeds im Theme-Editor prüfen, überflüssige Apps deinstallieren.
4. Code-Reste suchen: theme.liquid und Snippets nach Skripten deinstallierter Apps durchsuchen und entfernen.
5. Startseite entschlacken: Slider gegen statisches Bild tauschen, Autoplay abschalten, Sections zählen.
6. Schriften reduzieren: Auf zwei Familien und wenige Schnitte begrenzen.
7. Bilder prüfen: Die zehn größten Bilddateien im Shop finden und in passender Größe neu hochladen.
8. Nachmessen: Dieselben drei Seiten in der Vorschau der Kopie messen. Erst veröffentlichen, wenn Werte und Funktionen stimmen.
9. Nach vier Wochen: Die Web-Performance-Berichte erneut ansehen. Felddaten brauchen Zeit, bis sie die Änderung zeigen.

Was du nicht beeinflussen kannst

Server, Hosting, CDN und der Checkout liegen bei Shopify. Du kannst hier nichts optimieren und musst es auch nicht. Konzentriere dich auf das, was zwischen Server und Browser deines Kunden liegt: Theme, Apps, Bilder, Schriften, Skripte.

Wenn du mehrere technische Baustellen gleichzeitig hast, ordne sie nach Wirkung und Aufwand, statt bei der Ladezeit anzufangen, nur weil sie am sichtbarsten ist. Wie das geht, steht unter SEO-Audit priorisieren. Im SEO-Audit von ecomando siehst du die Ladezeit-Befunde je Seite neben den übrigen technischen Punkten, sodass du die Reihenfolge nicht raten musst.

Checkliste zum Abhaken

• Web-Performance-Berichte im Admin gelesen, Ausgangswerte notiert
• PageSpeed Insights mobil für drei Seitentypen gespeichert
• Theme-Version geprüft, Schnelltest mit Standardtheme-Kopie gemacht
• Alle Apps mit Zweck und Nutzer aufgeschrieben, Überflüssige deinstalliert
• App-Embeds im Theme-Editor geprüft
• Theme-Code auf Reste deinstallierter Apps durchsucht
• Startseite ohne Slider und Autoplay
• Höchstens zwei Schriftfamilien mit wenigen Schnitten
• Größte Bilder in Anzeigegröße neu hochgeladen
• Tag Manager von alten Tags befreit
• Große Kollektionen paginiert
• Nachmessung nach der Veröffentlichung und nach vier Wochen eingeplant