Shopify Store Speed Optimierung: Was tatsächlich einen Unterschied macht (Fallstudie)
PageSpeed-Score 23 auf dem Handy. Abbruchrate des Warenkorbs von 81%. Umsatz stagnierte drei aufeinanderfolgende Monate trotz steigender Werbeausgaben.
Dies waren die Zahlen, als eine Warschauer Bekleidungsmarke Ende 2025 zu Step-Media kam. Ihr Shopify-Shop war zwei Jahre zuvor von einem Freiberufler gebaut worden, der visuelle Effekte über die Leistung stellte. Als sie uns kontaktierten, ging jeder zusätzliche Dollar an Werbeausgaben an einen Shop verloren, der zu langsam war, um zu konvertieren.
Diese Fallstudie dokumentiert genau, was wir gefunden, was wir behoben haben und wie die Ergebnisse 60 Tage nach dem Relaunch aussahen.
Warum die Shopify Store-Geschwindigkeit wichtiger ist, als Sie denken
Lassen Sie mich Ihnen zuerst die Zahlen nennen.
Laut Google-Recherchen steigt die Wahrscheinlichkeit, dass ein mobiler Besucher abspringt, um 32%, wenn die Seitenladezeit von 1 Sekunde auf 3 Sekunden ansteigt. Von 1 auf 5 Sekunden sind es 90%. Von 1 auf 10 Sekunden sind es 123%.
Deloittes Studie zur mobilen Performance ergab, dass eine Verbesserung der Site-Geschwindigkeit um 0,1 Sekunden zu einer 8,4%igen Steigerung der Conversions für Einzelhandelsseiten und einer 9,2%igen Steigerung des durchschnittlichen Bestellwerts führt.
Für einen Shop, der 20.000 €/Monat Umsatz macht, bedeutet eine 10%ige Konversionsverbesserung 2.000 € mehr pro Monat – jeden Monat, ohne die Werbeausgaben auch nur um einen Euro zu erhöhen.
Geschwindigkeit ist keine technische Eitelkeitsmetrik. Es ist direkter, messbarer Umsatz.
Der Audit: Was wir gefunden haben
Als wir einen vollständigen technischen Audit des Shops durchführten, zeigte die Diagnose Folgendes:
Problem 1: 14 Apps führen JavaScript auf jeder Seite aus
Der Shop hatte insgesamt 23 Apps installiert. Davon injizierten 14 Skripte in jede Seite – einschließlich Apps, die nur auf bestimmten Seiten verwendet wurden (eine Größentabellen-App, die auf der Startseite lief, eine Großhandelspreis-App, die auf jeder Produktseite lief, egal ob der Kunde ein Großhändler war oder nicht).
Auswirkungen: Jedes App-Skript erhöht die Seitenladezeit um 50–400 ms. Kumulativer Effekt: über 3 Sekunden unnötiges JavaScript, bevor ein einziges Pixel angezeigt wurde.
Problem 2: Unoptimierte Bilder (Durchschnittliche Größe: 2,8MB)
Die Produktfotos wurden in ihrer ursprünglichen Kameraauflösung hochgeladen – durchschnittlich 2,8 MB pro Bild. Auf einer Produktseite mit 6 Fotos sind das fast 17 MB Bilddaten, die geladen werden, bevor ein Kunde das Produkt bewerten konnte.
Shopify liefert WebP-Bilder automatisch über sein CDN aus, jedoch nur, wenn die Originaldateien richtig skaliert sind. Dateien, die auf einer Dimension größer als 4096 Pixel sind, umgehen die Optimierung von Shopify.
Auswirkungen: Bilder waren der größte einzelne Faktor für lange Ladezeiten und machten etwa 60 % des gesamten Seitengewichts aus.
Problem 3: Benutzerdefinierte Schriftdateien wurden ohne Preloading geladen
Der Shop verwendete drei benutzerdefinierte Schriftfamilien, die jeweils als separate woff2-Dateien vom Shopify CDN geladen wurden. Keine von ihnen wurde im <head> vorgeladen, was zu Layoutverschiebungen und einer verzögerten Textwiedergabe führte.
Auswirkungen: Googles CLS (Cumulative Layout Shift) Score lag bei 0,31 – weit über dem Schwellenwert von 0,1 für „gut“. Dies beeinträchtigte direkt die SEO-Rankings und erzeugte ein störendes visuelles Erlebnis, da der Text während des Ladens herumhüpfte.
Problem 4: Render-blockierende Drittanbieter-Skripte
Das Google Analytics 4-Skript, der Meta Pixel und der TikTok Pixel wurden alle synchron im <head> geladen. Diese Skripte müssen ausgeführt werden, bevor der Browser sichtbaren Inhalt rendern kann.
Auswirkungen: Jedes Tracking-Skript erhöhte die Time to First Byte (TTFB) um ca. 200–400 ms. Zusammen waren sie für über 1 Sekunde Render-Blocking verantwortlich, bevor jeglicher Inhalt erschien.
Problem 5: Nicht verwendete Shopify-Apps mit aktivem Code
Drei Apps waren Monate zuvor vom Shop-Betreiber deinstalliert worden – doch ihre JavaScript- und CSS-Dateien wurden immer noch geladen, weil der App-Code in die Theme-Templates injiziert und nie entfernt worden war.
Auswirkungen: Der Geister-App-Code von drei deinstallierten Apps fügte jedem Seitenaufruf ungefähr 800 KB unnötiger Daten hinzu.
Die Lösung: Was wir getan haben
Schritt 1: App-Audit und Konsolidierung
Wir haben alle 23 Apps überprüft und kategorisiert:
- So beibehalten: 6 Apps mit echter Funktionalität (Bewertungen, E-Mail-Marketing, Abonnements)
- Durch benutzerdefinierten Code ersetzen: 5 Apps, deren Funktionalität einfach genug war, um nativ erstellt zu werden (Sticky-Add-to-Cart-Button, kürzlich angesehene Produkte, Ankündigungsleiste mit Countdown)
- Ganz entfernen: 8 Apps, die entweder Funktionalität duplizierten oder nicht mehr benötigt wurden
- Geistercode entfernen: Manuelle Entfernung von Restcode von 3 deinstallierten Apps
Ergebnis: 23 Apps auf 6 reduziert. Drittanbieter-JavaScript um 71 % reduziert.
Schritt 2: Bildoptimierung
Wir haben alle 847 Produktbilder in einem Stapeloptimierungsprozess verarbeitet:
- Größe geändert auf maximal 2048px auf der längsten Dimension
- Komprimiert mit verlustbehafteter Komprimierung bei 80% Qualität (optisch nicht vom Original zu unterscheiden)
- Durchschnittliche Dateigröße von 2,8 MB auf 180 KB reduziert – eine 94%ige Reduzierung
Für neue Bilder haben wir eine einfache Upload-Richtlinie festgelegt: maximale Breite von 2000px, exportiert mit 80% Qualität aus Lightroom oder Photoshop.
Schritt 3: Schriftladeoptimierung
Wir haben Preload-Tags für alle drei Schriftfamilien im <head> des Themes hinzugefügt und `font-display: swap` im CSS implementiert, um unsichtbaren Text während des Schriftladevorgangs zu verhindern.
Wir haben auch die Anzahl der geladenen Schriftstärken von 5 Varianten auf 3 reduziert (selten verwendete dünne und extrafette Varianten, die in weniger als 5 % des sichtbaren Textes vorkamen, entfernt).
Schritt 4: Verzögertes Laden von Analysen
Wir haben alle Tracking-Skripte (GA4, Meta Pixel, TikTok Pixel) von der synchronen Ladung im <head> auf eine verzögerte Ladung nach dem Rendern des primären Seiteninhalts umgestellt.
Dies ist Standardpraxis und beeinflusst die Datenerfassung nicht – Analyseereignisse werden korrekt ausgelöst, unabhängig davon, wann das Skript geladen wird.
Schritt 5: Kritische CSS-Inline-Einbindung
Für den Above-the-fold-Inhalt (Hero-Bereich, Navigation, erste Produktreihe) haben wir das kritische CSS extrahiert und direkt in den <head> eingebettet. Dadurch kann der Browser den sichtbaren Teil der Seite sofort rendern, ohne auf das Laden externer Stylesheets warten zu müssen.
Die Ergebnisse: 60 Tage nach dem Relaunch
| Metrik | Vorher | Nachher | Änderung |
|---|---|---|---|
| Mobiler PageSpeed-Score | 23 | 87 | +278% |
| Desktop PageSpeed-Score | 41 | 94 | +129% |
| LCP (mobil) | 6,8s | 1,9s | -72% |
| CLS | 0,31 | 0,04 | -87% |
| Gesamtseitengewicht (Startseite) | 8,4MB | 1,1MB | -87% |
| Mobile Konversionsrate | 0,8% | 1,6% | +100% |
| Abbruchrate des Warenkorbs | 81% | 67% | -14pp |
| Monatlicher Umsatz | 18.200 € | 31.400 € | +73% |
Die Umsatzsteigerung von 73% ist nicht allein auf die Geschwindigkeitsoptimierung zurückzuführen – der Relaunch umfasste auch Verbesserungen des Produktseitenlayouts und die Hinzufügung von Kundenbewertungen. Die Geschwindigkeitsverbesserungen allein machen jedoch einen messbaren Teil der Steigerung der Konversionsrate aus, was durch die Segmentanalyse von Google Analytics 4, die das Verhalten vor und nach den technischen Änderungen vergleicht, bestätigt wurde.
Was Sie jetzt sofort tun können
Nicht jede Verbesserung erfordert einen Entwickler. Hier sind drei Dinge, die Sie heute selbst überprüfen und beheben können:
1. Überprüfen Sie Ihren aktuellen Geschwindigkeitsscore. Gehen Sie zu pagespeed.web.dev, geben Sie die URL Ihres Shops ein und führen Sie den Test aus. Konzentrieren Sie sich auf den mobilen Score – das ist das, was Google für das Ranking verwendet.
2. Überprüfen Sie Ihre installierten Apps. Gehen Sie in der Shopify-Administration unter Apps jede installierte App durch und fragen Sie sich: „Nutze ich diese aktiv?“ Entfernen Sie alles, was Sie nicht verwenden. Überprüfen Sie anschließend Ihren Theme-Code auf Skriptreste von zuvor deinstallierten Apps.
3. Überprüfen Sie die Bildgrößen. Gehen Sie in der Shopify-Verwaltung auf Inhalt → Dateien und sortieren Sie nach Dateigröße. Wenn Sie Produktbilder sehen, die größer als 500 KB sind, exportieren und laden Sie diese in einer kleineren Größe erneut hoch.
Wann ein Entwickler hinzugezogen werden sollte
Wenn Ihr mobiler PageSpeed-Score unter 50 liegt und Sie Geld für Anzeigen ausgeben, kostet Sie das Geschwindigkeitsproblem wahrscheinlich mehr verlorene Conversions, als eine professionelle Optimierung kosten würde, um es zu beheben.
Ein vollständiges Geschwindigkeitsoptimierungsprojekt bei Step-Media dauert typischerweise 1–2 Wochen und kostet 800–2.000 €, je nach Größe des Shops und Anzahl der beteiligten Apps.
Fordern Sie eine kostenlose Geschwindigkeitsprüfung an – wir führen eine vollständige Diagnose durch und sagen Ihnen genau, was Ihren Shop verlangsamt, bevor Sie sich zu etwas verpflichten.
Häufig gestellte Fragen
Wirkt sich die Geschwindigkeitsoptimierung auf das visuelle Design meines Shops aus?
Nein. Die Geschwindigkeitsoptimierung arbeitet auf der technischen Ebene – Bildkomprimierung, Skriptladereihenfolge, CSS-Bereitstellung. Das visuelle Design bleibt identisch.
Wie lange halten Geschwindigkeitsverbesserungen an?
Geschwindigkeitsverbesserungen sind stabil, solange Sie keine neuen, leistungsintensiven Apps hinzufügen oder unoptimierte Bilder hochladen. Wir stellen nach jedem Optimierungsprojekt Richtlinien bereit, die Ihnen helfen, die Leistung aufrechtzuerhalten.
Optimiert Shopify meinen Shop automatisch für Geschwindigkeit?
Shopify bietet eine solide Infrastruktur (globales CDN, automatische WebP-Konvertierung), optimiert jedoch nicht Ihren Theme-Code oder verwaltet Ihre App-Skripte. Das erfordert die Aufmerksamkeit eines Entwicklers.
Welchen PageSpeed-Score sollte ich anstreben?
Über 70 auf Mobilgeräten ist die praktische Schwelle für eine akzeptable Leistung. Über 85 bringt Sie den meisten Wettbewerbern voraus. Über 90 ist ausgezeichnet und ist mit den besten Konversionsraten verbunden.Wie beeinflusst die Seitengeschwindigkeit meine Google-Rankings?
Google verwendet Core Web Vitals (LCP, CLS, INP) als Rankingfaktor. Shops mit schlechten Core Web Vitals-Scores können schlechter ranken als Wettbewerber mit vergleichbarer Inhaltsqualität, aber schnelleren Ladezeiten.
Leanid Liabetski ist ein Shopify-Entwickler und Gründer von Step-Media, mit Sitz in Warschau, Polen. Er hat Shopify-Shops für Marken in den Bereichen Bekleidung, Lebensmittel, Vitamine, Automobil, Medizin und Haushaltswaren aufgebaut und optimiert.
