Shopify-Website beschleunigen: 12 praktische Tipps
Laut Google steigt die Absprungrate um 32 %, wenn die Ladezeit von 1 auf 3 Sekunden wächst. Bei 5 Sekunden sind es 90 %. Jede zusätzliche Sekunde kostet Sie Bestellungen.
Ein schneller Shopify-Shop rankt besser bei Google, konvertiert mehr Besucher und frustriert weniger Kunden. Die gute Nachricht: Vieles lässt sich ohne Entwickler beheben. Diese 12 Tipps können Sie heute umsetzen.
In diesem Beitrag
- Aktuelle Geschwindigkeit messen
- Core Web Vitals: Die Zielwerte für 2026
- 1-3: Bildoptimierung
- 4-6: App-Stack aufräumen
- 7-9: Theme und Code
- 10-12: Fortgeschrittene Optimierungen
- Video
- Häufig gestellte Fragen
- Weiterlesen
Aktuelle Geschwindigkeit messen
Bevor Sie etwas ändern, brauchen Sie einen Ausgangswert. Drei Tools geben Ihnen ein klares Bild:
- Google PageSpeed Insights (pagespeed.web.dev). Testet Lab- und Felddaten. Zeigt Core Web Vitals mit konkreten Verbesserungsvorschlägen. Testen Sie Startseite, eine Produktseite und eine Kollektionsseite.
- Shopify Speed Score. Im Shopify-Admin unter Online Store > Themes. Basiert auf Lighthouse-Daten. Gut für den groben Vergleich, aber weniger detailliert als PageSpeed Insights.
- GTmetrix. Detaillierte Wasserfall-Ansicht: Welche Dateien laden wann? Wo sind Engpässe? Besonders nützlich, um problematische App-Skripte zu identifizieren.
Notieren Sie Ihre Werte. Nach den Optimierungen testen Sie erneut und sehen den Unterschied.
Core Web Vitals: Die Zielwerte für 2026
Google bewertet drei Metriken, die direkten Einfluss auf Ihr Ranking haben:
- LCP (Largest Contentful Paint): Unter 2,5 Sekunden. Das größte sichtbare Element (meist das Produktbild oder Hero-Banner) soll in unter 2,5 Sekunden geladen sein.
- INP (Interaction to Next Paint): Unter 200 Millisekunden. Wie schnell reagiert die Seite, wenn jemand auf einen Button klickt oder ein Dropdown öffnet?
- CLS (Cumulative Layout Shift): Unter 0,1. Springt das Layout beim Laden? Verschieben sich Buttons oder Bilder, während der Kunde die Seite nutzt?
Alle drei Metriken müssen im grünen Bereich liegen. Ein Score von 90+ bei PageSpeed Insights ist das Ziel. Die meisten Shopify-Shops liegen zwischen 30 und 60 auf Mobilgeräten. Da ist Luft nach oben.
1-3: Bildoptimierung
1. Bilder vor dem Upload komprimieren
Shopify konvertiert Bilder automatisch in WebP und liefert sie über das CDN. Das ist gut. Aber Shopify verkleinert die Dateigröße nicht aggressiv. Ein 5-MB-Foto wird zwar in WebP konvertiert, bleibt aber trotzdem unnötig groß.
Komprimieren Sie Produktbilder vor dem Upload auf unter 500 KB. Tools wie TinyPNG oder Squoosh reduzieren die Dateigröße um 60-80 % ohne sichtbaren Qualitätsverlust. Bei 40 Produktbildern pro Seite macht das einen spürbaren Unterschied.
2. Richtige Bildgrößen verwenden
Ein 4000 x 4000 Pixel großes Produktfoto wird auf dem Handy in 400 x 400 Pixel angezeigt. Der Browser lädt trotzdem die volle Auflösung. Shopify bietet zwar automatische Größenanpassung über den CDN-Link (_400x.jpg), aber das Theme muss die richtigen srcset-Attribute setzen.
Prüfen Sie, ob Ihr Theme srcset und sizes korrekt nutzt. Moderne kostenlose Themes (Dawn, Horizon, Sense) tun das. Ältere oder benutzerdefinierte Themes oft nicht.
3. Lazy Loading für Bilder unterhalb des sichtbaren Bereichs
Bilder, die der Kunde erst beim Scrollen sieht, sollten erst beim Scrollen geladen werden. Das nennt sich Lazy Loading. Shopify-Themes unterstützen das über das loading="lazy"-Attribut.
Wichtig: Das Hero-Bild und das erste Produktbild dürfen nicht lazy-loaded werden. Diese Elemente bestimmen den LCP-Wert und müssen sofort laden. Nur Bilder weiter unten auf der Seite profitieren von Lazy Loading.
4-6: App-Stack aufräumen
4. Ungenutzte Apps deinstallieren
Jede installierte App kann JavaScript und CSS in Ihren Shop einfügen. Auch wenn die App deaktiviert ist. Manche Apps hinterlassen Code in Ihrem Theme, selbst nachdem Sie sie deinstalliert haben.
Gehen Sie Ihre App-Liste durch. Jede App, die Sie nicht aktiv nutzen, deinstallieren. Danach im Theme-Editor prüfen, ob unter “App-Einbettungen” noch Überreste alter Apps auftauchen. Diese manuell entfernen.
5. App-Skripte auf Ladezeit prüfen
Öffnen Sie GTmetrix und schauen Sie sich den Wasserfall an. Sortieren Sie nach Ladezeit. Welche externen Skripte brauchen am längsten? Apps, die bei jedem Seitenaufruf einen externen Server kontaktieren, verlangsamen Ihren Shop bei jedem Klick.
Gute Apps vermeiden das. Rubik Variant Images zum Beispiel speichert Farbfeld-Daten in Shopify-Metafeldern. Metafield-basiert, keine externen API-Aufrufe. Die Daten kommen mit der Seite selbst, ohne Wartezeit auf einen Drittanbieter-Server.
6. Weniger ist mehr: Brauchen Sie wirklich 20 Apps?
Der durchschnittliche Shopify-Shop hat 6-8 Apps installiert. Manche haben 20 oder mehr. Jede App fügt JavaScript hinzu. Jedes Skript muss vom Browser heruntergeladen, geparst und ausgeführt werden. Das summiert sich.
Fragen Sie sich bei jeder App: Generiert sie Umsatz? Oder ist sie nur “nice to have”? Ein Countdown-Timer, der nie getestet wurde, drei verschiedene Review-Apps, ein animiertes Verkaufspopup. Raus damit, wenn kein messbarer Nutzen vorliegt.
7-9: Theme und Code
7. Ein schnelles Theme wählen
Nicht alle Themes sind gleich schnell. Die kostenlosen Shopify-Themes (Dawn, Horizon, Sense, Craft) sind auf Performance optimiert. Sie nutzen natives JavaScript statt jQuery, laden CSS modular und setzen auf moderne Bildformate.
Manche Premium-Themes laden 300+ KB JavaScript beim ersten Seitenaufruf. Das ist ein Problem auf dem Handy über eine 4G-Verbindung. Wenn Sie ein Theme wechseln, testen Sie die Geschwindigkeit vorher auf einem Demo-Shop.
8. System-Schriftarten statt Google Fonts
Google Fonts sind hübsch. Aber jede Schriftart ist eine zusätzliche HTTP-Anfrage und 20-100 KB an Daten. Zwei Schriftarten (Regular + Bold) können leicht 200 KB kosten.
System-Schriftarten (Arial, Helvetica, Georgia) laden sofort, weil sie bereits auf dem Gerät des Kunden installiert sind. Null Wartezeit. Falls Sie auf eine bestimmte Marken-Schriftart angewiesen sind, hosten Sie sie lokal auf Shopify statt von Google zu laden.
9. Ungenutzte Theme-Sektionen entfernen
Viele Themes laden JavaScript und CSS für Sektionen, die Sie gar nicht verwenden. Ein Testimonial-Slider, den Sie nie aktiviert haben, lädt trotzdem eine Slider-Bibliothek. Ein Video-Hintergrund, den Sie ausgeschaltet haben, lädt trotzdem die YouTube-API.
Prüfen Sie im Theme-Editor jede Sektion. Was nicht sichtbar ist und nicht gebraucht wird, entfernen Sie komplett (nicht nur ausblenden). Bei Code-Level-Zugriff können Sie ungenutzte Liquid-Dateien und zugehöriges JavaScript aus dem Theme löschen.
10-12: Fortgeschrittene Optimierungen
10. Critical CSS inline laden
CSS blockiert das Rendern. Der Browser wartet, bis das gesamte CSS geladen ist, bevor er etwas anzeigt. Das verlängert den LCP-Wert.
Die Lösung: Das CSS für den sichtbaren Bereich (“above the fold”) direkt in den HTML-Code einbetten. Den Rest als nicht-blockierend laden. Dawn und andere moderne Themes machen das teilweise automatisch. Wenn Ihr Theme das nicht tut, kann ein Entwickler es nachrüsten.
11. JavaScript verzögert laden (defer/async)
Jedes Skript, das nicht für die erste Darstellung der Seite nötig ist, sollte mit defer oder async geladen werden. Das betrifft Tracking-Pixel, Chat-Widgets, Bewertungs-Apps und Marketing-Tools.
Moderne Shopify-Themes nutzen defer standardmäßig. Aber App-Skripte laden oft synchron, weil der App-Entwickler das nicht optimiert hat. Im GTmetrix-Wasserfall sehen Sie, welche Skripte das Rendern blockieren.
12. Drittanbieter-Skripte begrenzen
Facebook Pixel, Google Analytics, TikTok Pixel, Hotjar, Klaviyo, ein Chat-Widget, ein Cookie-Banner. Jedes dieser Skripte macht HTTP-Anfragen an externe Server. Die Summe kann Ihre Ladezeit um 1-3 Sekunden verlängern.
Fragen Sie sich: Brauche ich wirklich TikTok Pixel auf jeder Seite, oder nur auf bestimmten Landing-Pages? Muss Hotjar ständig laufen, oder reichen gelegentliche Stichproben? Laden Sie nicht-kritische Skripte erst nach der Benutzerinteraktion (zum Beispiel beim ersten Scroll).
Video
Sehen Sie, wie ein optimierter Shopify-Shop mit Rubik Variant Images aussieht:
Häufig gestellte Fragen
Wie schnell sollte ein Shopify-Shop laden?
Google empfiehlt einen LCP unter 2,5 Sekunden. Ein PageSpeed-Score von 90+ auf Desktop und 70+ auf Mobilgeräten ist ein guter Richtwert. Die meisten Shopify-Shops liegen auf dem Handy zwischen 30 und 60. Schon kleine Verbesserungen wirken sich auf Conversion und Ranking aus.
Verlangsamen Apps meinen Shopify-Shop?
Jede App, die JavaScript oder CSS einfügt, hat Einfluss auf die Ladezeit. Besonders problematisch sind Apps, die bei jedem Seitenaufruf externe Server kontaktieren. Gute Apps vermeiden das. Rubik Variant Images nutzt Metafelder statt externer API-Aufrufe. Die Daten laden mit der Seite selbst.
Welches Theme ist am schnellsten?
Die kostenlosen Shopify-Themes (Dawn, Horizon, Sense, Craft) sind auf Performance optimiert. Sie nutzen natives JavaScript, modulares CSS und moderne Bildformate. Viele Premium-Themes laden deutlich mehr Code.
Was sind Core Web Vitals?
Drei Metriken, die Google für das Ranking berücksichtigt: LCP (wie schnell lädt der Hauptinhalt), INP (wie schnell reagiert die Seite auf Klicks) und CLS (wie stabil bleibt das Layout). Alle drei sollten im grünen Bereich liegen.
Weiterlesen
