Shopify Performance: Warum Ihr Shop langsam ist und was Sie dagegen tun können

Die unbequeme Wahrheit über Shopify-Performance

Lassen Sie mich mit einer Zahl anfangen, die wehtut: Seiten, die in 1 Sekunde laden, erzielen Conversion Rates, die 3x höher sind als Seiten, die 5 Sekunden brauchen. Konkret: Eine 1-Sekunden-Seite konvertiert bei 9,6%, eine 5-Sekunden-Seite nur bei 3,3% — ein Unterschied von 191%.

Oder anders ausgedrückt: Wenn Ihr Shop 3 Sekunden statt 1 Sekunde zum Laden braucht, verlieren Sie potenziell 20% Ihrer Conversions. Bei 10.000€ Monatsumsatz sind das 2.000€ — jeden Monat. Nicht wegen schlechter Produkte, schlechtem Marketing oder schlechtem Design. Nur wegen Ladezeit.

Shopify behauptet, 93% der Shops auf ihrer Plattform seien "schnell" — schneller als auf jeder anderen Commerce-Plattform. Das stimmt im Vergleich. Shopifys Server sind im Schnitt 2,8x schneller als die der Konkurrenz. Aber die Server-Geschwindigkeit ist nur ein Teil der Gleichung. Was Ihren Shop langsam macht, passiert meistens im Frontend — und da haben Sie die Kontrolle.

Wie schnell ist "schnell genug"?

Google Core Web Vitals (2025)

Google misst die Performance Ihrer Seite anhand von drei Metriken:

Largest Contentful Paint (LCP) — Wie schnell wird der Hauptinhalt sichtbar?

• Gut: unter 2,5 Sekunden
• Verbesserungsbedürftig: 2,5-4 Sekunden
• Schlecht: über 4 Sekunden

Interaction to Next Paint (INP) — Wie schnell reagiert die Seite auf Klicks?

• Gut: unter 200 Millisekunden
• Verbesserungsbedürftig: 200-500ms
• Schlecht: über 500ms

(INP hat im März 2024 FID als Metrik ersetzt — viele Guides sind hier noch veraltet.)

Cumulative Layout Shift (CLS) — Wie stabil bleibt das Layout?

• Gut: unter 0,1
• Verbesserungsbedürftig: 0,1-0,25
• Schlecht: über 0,25

Was der durchschnittliche Shopify-Shop erreicht

Die Realität: Der durchschnittliche Shopify-Shop hat einen PageSpeed-Score von 50-70 (von 100). LCP liegt typischerweise bei 2,5-4 Sekunden, INP bei 200-500ms, CLS bei 0,1-0,25. Das ist "verbesserungsbedürftig" — nicht schlecht, aber auch nicht gut.

Google empfiehlt für E-Commerce Seiten eine Ladezeit von unter 2 Sekunden. Nutzer verlieren die Geduld bei genau 2,75 Sekunden — ab diesem Punkt steigt die Absprungrate drastisch.

Der SEO-Effekt

Core Web Vitals sind ein offizieller Google-Ranking-Faktor. Sie machen etwa 10-15% der Ranking-Signale aus. Bei konkurrierenden Suchergebnissen können gute Core Web Vitals eine 8-15% höhere Sichtbarkeit bringen.

Das klingt nach wenig? Bei einem Shop, der 40% seines Traffics über organische Suche bekommt, ist das der Unterschied zwischen Seite 1 und Seite 2.

Der größte Performance-Killer: Apps

Hier ist die Zahl, die die meisten Shopify-Händler nicht kennen: 62% aller Drittanbieter-Integrationen verschlechtern die Shop-Performance. Nicht manche. Die Mehrheit.

Wie Apps Ihren Shop verlangsamen

Jede App, die Sie installieren, fügt Code zu Ihrem Theme hinzu:

• JavaScript-Dateien: Jede App lädt ihre eigenen Scripts. Bei 10 Apps können das 10-20 zusätzliche HTTP-Requests sein.
• CSS-Dateien: Styling-Code, der auch auf Seiten geladen wird, wo die App gar nicht aktiv ist.
• Externe API-Calls: Viele Apps laden Daten von externen Servern — zusätzliche Latenz.
• DOM-Manipulation: Apps, die Elemente im Shop einfügen oder verändern, können Layout Shifts verursachen.

Die versteckte Gefahr: Zombie-Code

Das Schlimmste: Wenn Sie eine App deinstallieren, bleibt ihr Code oft im Theme zurück. Sogenannter "Zombie-Code" — er tut nichts mehr, wird aber bei jedem Seitenaufruf geladen.

Nach unserer Erfahrung hat ein typischer Shopify-Shop, der über 2 Jahre gewachsen ist, 3-5 deinstallierte Apps, deren Code noch im Theme steckt. Das kann leicht 500ms-1 Sekunde zusätzliche Ladezeit verursachen.

Die App-Audit-Methode

So finden Sie heraus, welche Apps Ihren Shop verlangsamen:

• Baseline messen: PageSpeed Insights Score Ihrer Startseite notieren

• Apps einzeln deaktivieren: Jede App einzeln deaktivieren und neu messen

• Delta berechnen: Welche App verursacht welchen Performance-Verlust?

• Kosten-Nutzen bewerten: Bringt die App genug Wert, um die Performance-Einbuße zu rechtfertigen?

• Zombie-Code suchen: Im Theme-Code nach Referenzen zu deinstallierten Apps suchen

Jede zusätzliche App kann 200-500 Millisekunden zur Ladezeit hinzufügen. Bei einer einzelnen App fällt das kaum auf. Bei 10 Apps summiert es sich auf 2-5 Sekunden — und das ist der Unterschied zwischen einem schnellen und einem langsamen Shop.

Bilder: Der zweitgrößte Hebel

Bilder machen typischerweise 60-80% des Datenvolumens einer E-Commerce-Seite aus. Hier liegen die größten Optimierungspotenziale.

WebP und AVIF: Die modernen Formate

WebP wird von 96,5% aller Browser unterstützt und liefert im Schnitt 30% kleinere Dateien als JPEG. 68% der Top-10.000-Websites nutzen bereits WebP.

AVIF ist noch effizienter: 50% kleiner als JPEG, 20% kleiner als WebP. Die Browser-Unterstützung liegt bei 85-94% — gut genug für die meisten Shops, wenn Sie JPEG als Fallback bieten.

Die optimale Bildstrategie

Für Produktbilder: AVIF als erstes Format (beste Qualität bei kleinster Dateigröße), WebP als Fallback, JPEG als letzter Fallback.

Für Hero-Bilder: Preloading nutzen (mehr dazu gleich). Das Hero-Bild ist fast immer das LCP-Element — es bestimmt, wann Google Ihre Seite als "geladen" betrachtet.

Für dekorative Bilder: CSS-Gradients oder SVGs statt Rasterbilder. Ein animierter CSS-Gradient ist 0 KB. Ein dekoratives Hintergrundbild ist 200 KB.

Lazy Loading richtig einsetzen

Bilder unterhalb des sichtbaren Bereichs (Below the Fold) sollten erst geladen werden, wenn der Nutzer zu ihnen scrollt. Shopify unterstützt das nativ über das loading="lazy" Attribut.

Wichtig: Setzen Sie kein Lazy Loading auf das Hero-Bild oder andere Bilder im sichtbaren Bereich. Das verzögert deren Laden und verschlechtert den LCP.

Feste Dimensionen definieren

Ein häufiger CLS-Verursacher: Bilder ohne definierte Breite und Höhe. Der Browser weiß nicht, wie viel Platz er reservieren soll. Sobald das Bild geladen ist, verschiebt sich der gesamte Seiteninhalt — das ist der "Layout Shift", den Google misst.

Lösung: Immer width und height Attribute auf Bilder setzen, oder über CSS aspect-ratio definieren.

JavaScript optimieren: Die technische Tiefe

Render-blockierendes JavaScript eliminieren

Jedes Script im <head> ohne defer oder async blockiert das Rendering der Seite. Der Browser wartet, bis das Script geladen UND ausgeführt ist, bevor er etwas anzeigt.

Was deferred werden kann (und sollte):

• Google Analytics (GA4)
• Facebook/Meta Pixel
• Hotjar, Clarity und andere Analytics-Tools
• Chat-Widgets (Tidio, Zendesk, etc.)
• Bewertungs-Widgets (Judge.me, Loox)
• Newsletter-Popups

Was NICHT deferred werden sollte:

• Shopifys eigene Scripts (werden von Shopify optimiert)
• Scripts, die für die Darstellung des sichtbaren Bereichs nötig sind
• Checkout-relevante Scripts

Long Tasks aufbrechen

Googles INP-Metrik misst, wie schnell die Seite auf Interaktionen reagiert. "Long Tasks" — JavaScript-Aufgaben, die länger als 50ms dauern — blockieren den Main Thread und machen die Seite "ruckelig".

Typische Verursacher in Shopify:

• App-Scripts, die beim Laden schwere Berechnungen durchführen
• Große DOM-Manipulationen (viele Produktkarten gleichzeitig rendern)
• Komplexe Event-Handler auf Scroll oder Resize

Third-Party-Scripts isolieren

Externe Scripts (von Tracking-Anbietern, Chat-Tools, etc.) können Sie nicht direkt optimieren. Aber Sie können ihren Impact minimieren:

• Laden Sie sie über async oder defer
• Nutzen Sie dns-prefetch für externe Domains
• Erwägen Sie Server-Side Tracking (statt Client-Side) für Analytics
• Verzichten Sie auf Tools, die Sie nicht aktiv nutzen

Preloading: Die wahrgenommene Geschwindigkeit verbessern

Die tatsächliche Ladezeit ist eine Sache. Die wahrgenommene Ladezeit eine andere. Mit Preloading können Sie beeinflussen, in welcher Reihenfolge Ressourcen geladen werden.

Preload: Kritische Ressourcen priorisieren

Sagen Sie dem Browser, welche Ressourcen er zuerst laden soll:

• Hero-Bild: Das größte sichtbare Element. Bestimmt den LCP.
• Wichtigste Font: Die Schriftart für Headlines und Body-Text.
• Kritisches CSS: Styles für den sichtbaren Bereich.

Prefetch: Die nächste Seite vorbereiten

Wenn ein Nutzer über ein Produkt hovert, ist die Wahrscheinlichkeit hoch, dass er klickt. Mit prefetch können Sie die Produktseite schon im Hintergrund laden. Wenn er dann klickt, ist die Seite quasi instant da.

DNS-Prefetch: Externe Verbindungen vorbereiten

Jede Verbindung zu einem externen Server (CDN, Tracking, Payment) braucht einen DNS-Lookup. Das dauert 20-120ms. Mit dns-prefetch können Sie diesen Lookup vorwegnehmen.

Liquid-Code: Shopifys versteckter Performance-Faktor

Shopifys Template-Sprache Liquid wird auf dem Server ausgeführt. Ineffizienter Liquid-Code verlängert die "Time to First Byte" (TTFB) — die Zeit, bis der Server überhaupt anfängt, etwas auszuliefern.

Häufige Liquid-Fehler

Verschachtelte Schleifen: Eine Schleife in einer Schleife in einer Schleife. Bei 100 Produkten mit je 5 Varianten und 3 Bildern sind das 1.500 Iterationen. Das dauert.

Wiederholte Berechnungen: Wenn Sie denselben Wert in einer Schleife mehrfach berechnen, nutzen Sie assign um ihn einmal zu berechnen und wiederzuverwenden.

Zu viele Collection-Abfragen: Jede Collection-Abfrage kostet Server-Zeit. Begrenzen Sie die Anzahl der Produkte pro Abfrage und die Anzahl der Abfragen pro Seite.

Der Performance-Optimierungsplan: Schritt für Schritt

Woche 1: Messen und verstehen (2 Stunden)

• PageSpeed Insights für Startseite, eine Produktseite und eine Collection-Seite laufen lassen

• Core Web Vitals in Google Search Console prüfen

• Shopifys Online Store Speed Report ansehen

• Liste aller installierten Apps erstellen

Woche 2: Quick Wins umsetzen (3-4 Stunden)

• Alle ungenutzten Apps deinstallieren

• Zombie-Code im Theme suchen und entfernen

• Tracking-Scripts auf defer setzen

• Hero-Bild preloaden

• Feste Bildgrößen für alle Bilder setzen

Woche 3: Bilder optimieren (2-3 Stunden)

• Alle Produktbilder in WebP konvertieren

• Maximale Bildbreite auf 2000px begrenzen

• Lazy Loading für Below-the-Fold-Bilder aktivieren

• Hero-Bilder manuell komprimieren (maximale Qualität bei minimaler Dateigröße)

Woche 4: Deep Optimization (4-6 Stunden)

• Critical CSS identifizieren und inline laden

• Font-Loading optimieren (font-display: swap)

• Prefetch für Produktseiten implementieren

• DNS-Prefetch für externe Domains einrichten

• Liquid-Code auf ineffiziente Patterns prüfen

Danach: Kontinuierlich messen (30 Minuten/Woche)

• Wöchentlich PageSpeed Insights prüfen
• Bei jeder neuen App den Performance-Impact messen
• Core Web Vitals in Search Console monatlich reviewen
• Bei Theme-Updates Performance vorher/nachher vergleichen

Realistische Erwartungen

Nach einer gründlichen Optimierung eines durchschnittlichen Shopify-Shops können Sie erwarten:

Die Conversion-Rate-Steigerung allein rechtfertigt den Aufwand. Bei einem Shop mit 20.000€ Monatsumsatz und 10% CR-Verbesserung sind das 2.000€ mehr pro Monat — für einige Stunden Optimierungsarbeit.

Die wichtigste Erkenntnis

Performance-Optimierung ist keine einmalige Aktion. Jede neue App, jedes Theme-Update, jedes neue Feature kann die Performance beeinflussen. Machen Sie Performance-Monitoring zu einer regelmäßigen Routine — wie das Checken Ihrer Umsatzzahlen.

Und fangen Sie mit den Apps an. Ernsthaft. 62% aller Drittanbieter-Integrationen verschlechtern die Performance. Das ist der größte Hebel, den die meisten Händler haben. Deinstallieren Sie, was Sie nicht brauchen. Messen Sie den Impact von allem, was Sie behalten. Und fragen Sie sich bei jeder neuen App: "Ist der Nutzen die Performance-Kosten wert?"

Jede Millisekunde zählt. Nicht als Marketing-Spruch — als mathematisch belegbare Tatsache.