Website-Geschwindigkeit für Shopify-Stores optimieren

Bei der Optimierung der Website-Geschwindigkeit geht es darum, die Ladezeiten von Webseiten zu verkürzen. Dazu wird die Zeit reduziert, die Browser benötigen, um die Inhalte deines Shops herunterzuladen und darzustellen.

Langsame Seiten können dich Umsatz kosten. In einer Umfrage von The Pixel (Englisch) aus dem Jahr 2025 unter 1.000 britischen Online-Konsument:innen gaben 67 % an, im vergangenen Jahr einen Warenkorb aufgrund schlechter Ladegeschwindigkeit abgebrochen zu haben.

In diesem Beitrag erfährst du, wie du die Geschwindigkeit deines Shopify-Stores misst, Seiten und Funktionen identifizierst, die für Verzögerungen sorgen, und Verbesserungen priorisierst.

Was beinhaltet die Optimierung der Website-Geschwindigkeit?

Die Optimierung der Website-Geschwindigkeit umfasst Maßnahmen, mit denen du die Ladezeiten deiner Website verkürzt. Ziel ist es, dass dein Onlineshop schnell genug lädt, damit Kund:innen Produkte durchstöbern und Einkäufe abschließen können, ohne durch lange Wartezeiten abgeschreckt zu werden.

Die Ladegeschwindigkeit lässt sich auf zwei Ebenen bewerten:

• Seitengeschwindigkeit (Page Speed): Wie schnell die Inhalte einer einzelnen URL geladen werden.
• Website-Geschwindigkeit (Site Speed): Wie sich die Ladegeschwindigkeit über die verschiedenen Seiten deiner Website hinweg unterscheidet.

Google definiert in seinen Richtlinien zu den Core Web Vitals drei Zielwerte für eine gute Nutzererfahrung:

Jeder dieser Zielwerte sollte bei mindestens 75 % der Besuche erreicht werden. Die Bewertung erfolgt getrennt für Mobilgeräte und Desktop-Computer.

Der LCP misst, wann der größte sichtbare Inhalt erscheint. Er unterscheidet sich daher von der Zeit, die benötigt wird, um sämtliche Seitenelemente vollständig zu laden. Die Kennzahlen helfen dir dabei, herauszufinden, welche Bereiche deines Shops verbessert werden müssen.

Laut einer Shopify-Analyse zur Shop-Performance aus dem Jahr 2026 war jede zusätzliche Ladezeit von 100 Millisekunden beim LCP mit einer um etwa 3,5 % niedrigeren Conversion-Rate verbunden.

Um die möglichen Auswirkungen auf deinen Umsatz zu verdeutlichen, hilft ein Beispiel: Angenommen, dein durchschnittlicher Bestellwert (Average Order Value, AOV) beträgt 60 US-Dollar, dein Shop verzeichnet täglich 5.000 Besucher:innen und deine Conversion-Rate liegt bei 2 %.

Sinkt die Conversion-Rate auf 1,7 %, fällt dein Tagesumsatz von 6.000 auf 5.100 US-Dollar. Das entspricht einem Umsatzverlust von 900 US-Dollar.

Warum ist die Website-Geschwindigkeit wichtig?

Die Ladezeit deiner Website beeinflusst, wie viele Besucher:innen zu Kund:innen werden, wie Google deine Seiten bewertet und wie viel du für bezahlten Traffic ausgibst.

Vielleicht hast du schon von der sogenannten Drei-Sekunden-Regel gehört. Dahinter steckt die Annahme, dass Nutzer:innen eine Website eher verlassen, wenn sie zu lange lädt. Diese Regel ist allerdings kein offizieller Leistungsstandard von Google. Um die Nutzererfahrung einer Seite zu bewerten, solltest du dich daher an den Core Web Vitals orientieren, statt pauschal eine Ladezeit von drei Sekunden anzustreben.

Google bestätigt, dass seine Ranking-Systeme die Core Web Vitals berücksichtigen. Schnellere Ladezeiten können sich somit positiv auf deine Platzierung in den Suchergebnissen auswirken. Gute Werte garantieren jedoch kein besseres Ranking. Google möchte weiterhin die relevantesten Inhalte anzeigen, selbst wenn die Nutzererfahrung einer Seite nicht optimal ist.

Auch für bezahlte Suchanzeigen spielt die Ladegeschwindigkeit eine Rolle. Google empfiehlt, die Ladezeiten im Rahmen der Landingpage-Optimierung zu verbessern. Die Qualität deiner Landingpage beeinflusst sowohl den Anzeigenrang (Ad Rank) als auch die Kosten pro Klick (Cost per Click, CPC).

Wenn Besucher:innen über eine bezahlte Anzeige auf deine Website gelangen, diese aber aufgrund langer Ladezeiten vor dem Kauf verlassen, können deine Kosten pro Verkauf steigen, selbst wenn die Klickkosten unverändert bleiben.

Welche Faktoren beeinflussen die Website-Geschwindigkeit?

Verschiedene Faktoren bestimmen, wie schnell Kund:innen deinen Shop laden und nutzen können.

Deine E-Commerce-Plattform

Bei einem selbst gehosteten Shop müssen dein Team oder dein Hosting-Anbieter Server, Caching und Kapazitäten konfigurieren. Shopify übernimmt die Verwaltung dieser Infrastruktur, einschließlich des Content Delivery Network (CDN). Dein Team kann sich auf die Bereiche konzentrieren, die die Geschwindigkeit deines Shops beeinflussen: das Theme, die Produktbilder und die verwendeten Apps.

Der Storefront Renderer (SFR) von Shopify generiert HTML aus deinem Liquid-Theme und den Daten deines Shops. Verbesserungen an dieser Rendering-Infrastruktur stellt Shopify automatisch bereit. Zu den Aufgaben deines Teams gehört es hingegen, Themes aktuell zu halten und unnötigen Code zu reduzieren.

Nachdem der Browser den HTML-Code empfangen hat, muss er weitere Dateien herunterladen und das JavaScript des Shops ausführen. Deshalb beeinflussen sowohl dein Theme als auch die Apps deines E-Commerce-Tech-Stacks, wie schnell Kund:innen die Seite sehen und verwenden können.

Hosting

Plötzliche Traffic-Spitzen können die Serverkapazitäten überlasten und Kaufvorgänge unterbrechen. Beim Elektronikhändler JB Hi-Fi kam es auf der vorherigen Plattform beispielsweise zu einer zweistündigen Störung des Checkouts. Nach dem Wechsel zu Shopify erzielte das Unternehmen seinen bis dahin erfolgreichsten Black Friday und Cyber Monday (BFCM), obwohl der Traffic nahezu doppelt so hoch war wie im Vorjahr.

Vor größeren Verkaufsaktionen solltest du überprüfen, wie dein Hosting-Anbieter mit besonders hoher Nachfrage umgeht. Teste außerdem, ob Drittanbieter-Integrationen auch unter der erwarteten Auslastung zuverlässig funktionieren.

Shopify gibt für seine Plattform eine Betriebszeit von 99,9 % über wichtige Dienste und Regionen innerhalb der vorangegangenen 90 Tage an. In dieser Berechnung sind unter anderem geplante Wartungsarbeiten, Ausfälle von Drittanbieter:innen sowie Fehler durch Theme-Anpassungen oder Apps nicht berücksichtigt.

Website-Architektur

Die Architektur deines Onlineshops bestimmt, wo Seiten gerendert werden und wie Daten an den Browser gelangen. Wenn ein Shop zunächst auf die Antworten mehrerer Dienste warten muss, bevor ein Produkt angezeigt werden kann, sehen Kund:innen möglicherweise über längere Zeit eine unvollständige Seite.

Beim Headless Commerce werden das Frontend und das Commerce-Backend voneinander getrennt. Entwickler:innen übernehmen dann die Verantwortung dafür, wie das individuell entwickelte Frontend Inhalte darstellt, auf E-Commerce-APIs zugreift und Caching verwendet. Ob sich dadurch die Geschwindigkeit verbessert, hängt von den jeweiligen technischen Entscheidungen bei der Implementierung ab.

Bevor du deinen Shop grundlegend neu aufbaust, solltest du zunächst die Ursache für die Verzögerungen ermitteln. Wenn beispielsweise zu große Bilder oder unnötige Skripte für die Probleme verantwortlich sind, solltest du diese zuerst optimieren. Auch bei einer neuen Architektur muss dein Team weiterhin dafür sorgen, dass die an Kund:innen ausgelieferten Inhalte und der Code möglichst effizient sind.

Zu viele Drittanbieter-Apps

E-Commerce-Apps, die zusätzliche Skripte in deinen Shop integrieren, erhöhen den Verarbeitungsaufwand für den Browser. Ein Widget für Kundenbewertungen kann beispielsweise zusätzliche Anfragen für Code, Bilder und Bewertungsdaten auslösen.

Laut dem "Web Almanac" von HTTP Archive führte eine typische Desktop-Seite im Median 83 Anfragen an Drittanbieter:innen (Englisch) aus. Das waren fünf mehr als im Jahr 2024. Eine einzelne App kann mehrere Anfragen verursachen. Die Zahl entspricht daher nicht der Anzahl installierter Apps.

Achte bei der Auswahl von Apps auf das Abzeichen „Built for Shopify“ (Englisch). Damit werden Apps gekennzeichnet, die bestimmte Qualitätsanforderungen von Shopify erfüllen, darunter auch Leistungsstandards. Teste jede App in deinem eigenen Shop, um ihre Auswirkungen in Kombination mit deinem Theme und deinen bestehenden Integrationen zu messen.

Entferne Apps, die du nicht mehr verwendest. Kläre anschließend mit den jeweiligen App-Entwickler:innen, ob noch Code-Reste vorhanden sind. Vergleiche die Geschwindigkeit derselben Seiten vor und nach den Anpassungen mithilfe von PageSpeed Insights und den Web-Performance-Berichten von Shopify.

Wie kannst du Informationen zur Website-Geschwindigkeit abrufen?

Mit den folgenden vier Tools kannst du langsame Seiten identifizieren und überprüfen, ob deine Änderungen die Performance deines Shops verbessern. Beginne mit den Web-Performance-Berichten von Shopify und Google PageSpeed Insights, um deine Core Web Vitals zu bewerten.

Wenn du einzelne Netzwerkanfragen genauer untersuchen möchtest, kannst du zusätzliche Test-Tools einsetzen.

So führst du einen Website-Geschwindigkeitstest durch

Teste die Seiten, die Kund:innen zum Stöbern und Einkaufen verwenden. Untersuche anschließend alle Core Web Vitals, die die empfohlenen Zielwerte von Google nicht erreichen.

1. Wähle repräsentative Seiten aus. Berücksichtige deine Startseite, eine stark frequentierte Kategorieseite und eine beliebte Produktseite. Öffne in Shopify den Bereich „Analytics > Reports“ und prüfe die Web-Performance-Berichte, um URLs mit schlechten Ergebnissen zu finden.
2. Führe einen Test mit PageSpeed Insights durch. Gib eine URL ein und wähle „Analysieren“. Werte die Ergebnisse für Mobilgeräte und Desktop-Computer separat aus. Prüfe außerdem, ob sich die realen Nutzerdaten auf die konkrete URL oder auf die gesamte Website beziehen. Letzteres wird als „Origin“ gekennzeichnet.
3. Untersuche die betroffene Kennzahl. Vergleiche die Ergebnisse mit den nachfolgenden Grenzwerten. Nutze die Lighthouse-Diagnosen, um mögliche Ursachen zu identifizieren. Wenn keine realen Nutzerdaten verfügbar sind, kannst du mit den Labordaten Ladeprobleme untersuchen. Für die Messung des INP sind allerdings tatsächliche Nutzerinteraktionen erforderlich.
4. Behebe das Problem und teste erneut. Wiederhole den Test mit denselben Einstellungen und vergleiche mehrere Durchläufe. Prüfe anschließend deine Berichte mit realen Nutzerdaten, um festzustellen, ob Kund:innen tatsächlich von der Verbesserung profitieren.

Die Zielwerte der Core Web Vitals von Google gelten für das 75. Perzentil. Das bedeutet, dass mindestens 75 % der Besuche den jeweiligen Grenzwert erreichen sollten. Mobilgeräte und Desktop-Computer werden dabei getrennt betrachtet.

Die realen Nutzerdaten von PageSpeed Insights umfassen die vergangenen 28 Tage. Deshalb kann es eine Weile dauern, bis sich eine Verbesserung in den Ergebnissen widerspiegelt. Auch bei den Berichten von Shopify kann es zu einer Verzögerung von bis zu 36 Stunden kommen.

Wie kannst du die Geschwindigkeit deiner Website optimieren?

Sobald du herausgefunden hast, welche Seiten und Core Web Vitals verbessert werden müssen, solltest du dich auf Maßnahmen konzentrieren, die genau diese Performance-Probleme beheben. Die folgenden Optimierungen helfen dir dabei, häufige Ursachen für langsame Websites zu beseitigen:

1. Verwende ein Content Delivery Network (CDN)
2. Vermeide übermäßige Theme-Anpassungen
3. Überprüfe die Schnellansicht auf Kategorieseiten
4. Entferne unnötige Pop-ups
5. Reduziere Hero-Slider auf deiner Startseite
6. Komprimiere Bilder und optimiere ihre Größe und Anzahl
7. Verwende Lite Embeds für Videos
8. Reduziere Weiterleitungen und fehlerhafte Links
9. Aktiviere Lazy Loading
10. Vermeide Skripte, die die HTML-Verarbeitung blockieren
11. Organisiere dein Tracking mit Google Tag Manager
12. Vermeide übermäßige Liquid-Schleifen

1. Verwende ein Content Delivery Network (CDN)

Shopify stellt ohne zusätzliche Kosten ein Content Delivery Network bereit, das von Cloudflare unterstützt wird. Ein CDN verteilt die Inhalte deines Shops auf Server rund um die Welt. Dadurch verkürzt sich die Entfernung, die Dateien zurücklegen müssen, um Kund:innen zu erreichen.

Shopify konfiguriert die Auslieferung über das CDN, das Browser-Caching und die Komprimierung automatisch. Dein Team kann sich deshalb darauf konzentrieren, die Anzahl und Größe der Bilder, Apps und Theme-Dateien zu reduzieren, die beim Aufrufen einer Seite geladen werden müssen.

Verwende in Liquid-Templates den Shopify-Filter asset_url, um auf Theme-Dateien zu verweisen. Beispielsweise erzeugt {{ 'cart.js' | asset_url }} eine CDN-URL mit einem Versionsparameter, der aktualisiert wird, sobald sich die Datei ändert. Lass von Entwickler:innen überprüfen, ob fest im Code hinterlegte Datei-URLs vorhanden sind, die diese Versionierung umgehen. Für Produktbilder und andere hochgeladene Bilder kannst du den Filter image_url verwenden, um passende Bildgrößen abzurufen.

2. Vermeide übermäßige Theme-Anpassungen

Verwende ein aktuelles Theme, das für eine gute Web-Performance optimiert ist. Die Horizon-Themes und Online-Store-2.0-Themes von Shopify enthalten entsprechende Performance-Optimierungen.

Bevor du dich für ein Theme entscheidest, kannst du die Theme-Performance-Daten von Shopify prüfen. Damit lassen sich die Core Web Vitals verschiedener Shops vergleichen, die dasselbe Theme verwenden. Da auch Apps und individuelle Anpassungen die Ergebnisse beeinflussen, solltest du deinen eigenen Shop nach jeder Theme-Änderung testen. Theme-Anpassungen können die Geschwindigkeit deiner Website beeinträchtigen, insbesondere wenn sie unnötigen Code oder zusätzliche Grafiken enthalten. Berücksichtige deshalb bei Designentscheidungen immer auch die Auswirkungen auf die Performance.

Nirav Sheth, CEO und Gründer des Shopify Platinum Partners Anatta, erklärt: „Schnelle Tricks zur Geschwindigkeitsoptimierung schaffen keine Grundlage für langfristige Performance. Das gelingt nur durch echte Verbesserungen, und die beginnen mit der Optimierung der zugrunde liegenden Theme-Architektur.“

3. Überprüfe die Schnellansicht auf Kategorieseiten

Mit einer Schnellansicht (Quick View) können Kund:innen Bilder und Produktdetails direkt beim Durchstöbern eines Sortiments ansehen, ohne die jeweilige Produktdetailseite öffnen zu müssen. Manche Implementierungen laden jedoch bereits umfangreiche Produktdaten für alle Artikel einer Kollektion im Voraus. Dadurch können sich die Ladezeiten verlängern. Wenn Kund:innen die Schnellansicht nur selten verwenden, rechtfertigt ihr Nutzen möglicherweise nicht die negativen Auswirkungen auf die Performance.

Prüfe in deinen Theme- oder App-Einstellungen, ob die Schnellansicht aktiviert ist. Bei individuell entwickelten Lösungen solltest du die Auswirkungen auf die Geschwindigkeit von Entwickler:innen überprüfen lassen. Wenn du die Funktion nicht mehr verwenden möchtest, kannst du den entsprechenden Code entfernen lassen.

4. Entferne unnötige Pop-ups

Pop-ups werden verwendet, um besondere Angebote anzuzeigen oder Besucher:innen zum nächsten Schritt in der Customer Journey zu bewegen. Ob beim Einlösen eines Gutscheins oder bei der Eingabe einer E-Mail-Adresse: Pop-ups können helfen, neue Besucher:innen anzusprechen und den Grundstein für die weitere Kommunikation zu legen.

Allerdings kommt es beim Einsatz von Pop-ups im E-Commerce auf die richtige Balance an. Zu viele blinkende Grafiken können die Geschwindigkeit und Performance deiner Website beeinträchtigen. Außerdem lenken sie Nutzer:innen von den Website-Inhalten ab, die du bereits für eine bessere Conversion-Rate optimiert hast. Lege deshalb klare Regeln für den Einsatz von Pop-ups fest, um Verzögerungen beim Laden deiner Website zu vermeiden.

Du kannst beispielsweise bestimmte Auslöser für Pop-ups einrichten, damit zusätzlicher Code nicht direkt beim Aufrufen der Seite geladen werden muss. Dafür eignen sich Exit-Intent-Pop-ups, die beim erkennbaren Verlassen der Seite erscheinen, oder zeitverzögerte Pop-ups. Beide Varianten sorgen dafür, dass zwischen dem ersten Laden der Seite und dem Anzeigen des Pop-ups etwas Zeit vergeht.

5. Reduziere Hero-Slider auf deiner Startseite

Große Hero-Slider eignen sich gut, um deine Produkte prominent zu präsentieren. Allerdings haben sie einen Nachteil: Die Bildgröße und -qualität, die für eine ansprechende Darstellung erforderlich sind, können die Ladezeiten verlängern. Das gilt besonders, wenn du vier oder fünf Slides verwendest. Wenn dein Hero-Slider die Performance beeinträchtigt, solltest du die Anzahl der Slides reduzieren oder stattdessen ein einzelnes, hochwertiges Hero-Bild verwenden.

Falls du dich für einen Slider entscheidest, solltest du einige UX-Best-Practices berücksichtigen:

• Beschränke dich auf zwei bis drei Slides.
• Präsentiere die Slides als statische Inhaltsabschnitte statt als automatisch wechselndes Karussell.
• Verwende srcset oder Lazy Loading zur Optimierung der Bildauslieferung.

6. Komprimiere Bilder und optimiere ihre Größe und Anzahl

Auf einer typischen Startseite im Jahr 2025 machten Bilder im Median etwa 1.059 KB von insgesamt 2.862 KB (Link auf Englisch) einer Desktop-Seite aus. Damit benötigten Bilder mehr Datenvolumen als JavaScript, Schriftarten, CSS und HTML zusammen.

Lade Bilder in möglichst hoher Ausgangsqualität hoch. Das Bild-CDN von Shopify komprimiert Bilder automatisch und wählt abhängig vom Browser der Besucher:innen ein geeignetes Format wie WebP oder AVIF. Du musst daher nicht jedes Bild vor dem Hochladen manuell komprimieren.

Dein Theme bestimmt, welche Bildgrößen der Browser anfordert. Der Shopify-Filter image_url benötigt eine Angabe zur Breite oder Höhe und gibt eine CDN-URL für diese Größe zurück. Wenn du nur die Breite angibst, bleiben die ursprünglichen Bildproportionen erhalten. Shopify verhindert außerdem, dass Bilder über ihre Originalabmessungen hinaus vergrößert werden.

Für responsive Bilder können Entwickler:innen image_url mit image_tag kombinieren. Dadurch wird ein srcset mit mehreren Bildgrößen erzeugt. Eine korrekte Angabe des sizes-Attributs hilft dem Browser dabei, eine geeignete Datei für den verfügbaren Darstellungsbereich auszuwählen.

Überprüfe außerdem, wie viele Bilder auf jeder Seite geladen werden. Entferne doppelte Produktbilder und dekorative Grafiken, die keinen wesentlichen Informationswert bieten. Achte anschließend darauf, dass Vorschaubilder und mobile Layouts Dateien mit passenden Abmessungen anfordern.

7. Verwende Lite Embeds für Videos

Videos sind ein beliebtes Marketinginstrument zahlreicher Unternehmen. Der standardmäßige Einbettungscode von YouTube kann allerdings die Datenmenge deiner Website deutlich erhöhen. Einige Dateien werden bereits heruntergeladen, bevor Besucher:innen auf die Wiedergabetaste klicken. Außerdem verwendet der Standardcode das HTML-Element <iframe>, bei dem Breite und Höhe des Videoplayers festgelegt sein können. Dadurch passt sich das Video möglicherweise nicht optimal an unterschiedliche Bildschirmgrößen an.

Eine Lösung sind sogenannte Lite Embeds. Bei dieser Methode wird beim ersten Laden der Seite lediglich das Vorschaubild des YouTube-Videos eingebunden. Der eigentliche Videoplayer und das zusätzliche JavaScript werden erst geladen, wenn Nutzer:innen auf das Vorschaubild klicken.

YouTube-Vorschaubilder sind etwa 15 Kilobyte groß. Durch Lite Embeds lässt sich die Größe einer Webseite deshalb um fast ein Megabyte reduzieren.

8. Reduziere Weiterleitungen und fehlerhafte Links

Zu viele Weiterleitungen und fehlerhafte Links können die Performance deiner Website beeinträchtigen und sich negativ auf deine SEO-Rankings auswirken.

302-Weiterleitungen signalisieren beispielsweise, dass eine Seite vorübergehend verschoben wurde. Sie können SEO-Nachteile verursachen und lösen zusätzliche HTTP-Anfragen aus, wodurch sich die Datenübertragung verzögert. Verwende stattdessen eine cachefähige Weiterleitung oder die integrierte Weiterleitungsfunktion von Shopify im Navigationsbereich. Shopify verwendet dabei standardmäßig 301-Weiterleitungen.

Vermeide es außerdem, URLs auf Seiten weiterzuleiten, die selbst wiederum eine Weiterleitung enthalten. Nach einer Website-Migration solltest du interne Links so aktualisieren, dass sie direkt auf die neuen Zielseiten verweisen. Dadurch müssen Kund:innen beim Wechsel zwischen verschiedenen Seiten keine unnötigen Weiterleitungen durchlaufen. Fehlerhafte Links zu Seitenelementen wie Bildern, CSS-Dateien oder JavaScript-Dateien verursachen zusätzliche HTTP-Anfragen und können die Ladegeschwindigkeit beeinträchtigen. Mit Tools wie Broken Link Checker kannst du solche Links identifizieren und entfernen.

Individuell gestaltete 404-Fehlerseiten helfen außerdem Besucher:innen, die versehentlich eine falsche URL deiner Website aufrufen.

9. Aktiviere Lazy Loading

Lazy Loading ist eine Technik, bei der nicht sämtliche Inhalte einer Webseite sofort geladen werden. Onlineshops mit Lazy Loading laden bestimmte Inhalte erst dann, wenn Nutzer:innen eine entsprechende Aktion ausführen.

Ein Beispiel dafür ist eine Produktseite in deinem Shop. Inhalte, die direkt beim Aufrufen sichtbar sind, etwa der Produkttitel, die Produktbilder und die Produktbeschreibung, können sofort geladen werden. Ergänzende Inhalte werden dagegen erst nachgeladen, wenn Nutzer:innen weiter nach unten scrollen. Dazu gehören beispielsweise User Generated Content (UGC), Social-Media-Karussells und Kundenbewertungen.

Diese Elemente müssen nicht bereits beim ersten Seitenaufruf geladen werden, sondern erst dann, wenn Kund:innen den entsprechenden Bereich erreichen.

10. Vermeide Skripte, die die HTML-Verarbeitung blockieren

Ein Browser verarbeitet HTML, um deine Webseite aufzubauen. Ein externes Skript, das beispielsweise mit <script src="theme.js"></script> eingebunden wird, unterbricht diese Verarbeitung, während das Skript heruntergeladen und ausgeführt wird.

Mit den Attributen async und defer kann der Browser die HTML-Verarbeitung während des Downloads fortsetzen. Allerdings unterscheiden sich die Attribute darin, wann das Skript ausgeführt wird:

• async: Das Skript wird ausgeführt, sobald es bereitsteht. Dadurch kann die HTML-Verarbeitung unterbrochen werden. Da Skripte in beliebiger Reihenfolge ausgeführt werden können, eignet sich dieses Attribut für unabhängig funktionierenden Code.
• defer: Das Skript wird erst ausgeführt, nachdem die HTML-Verarbeitung abgeschlossen ist. Skripte werden dabei in der Reihenfolge ausgeführt, in der sie im Dokument stehen. Das eignet sich für Theme-Skripte, die auf den HTML-Code der Seite oder auf zuvor geladene Skripte angewiesen sind.

Mit <script src="theme.js" defer></script> wird die Ausführung beispielsweise verschoben, bis das HTML vollständig verarbeitet wurde. Diese Attribute gelten für klassische externe Skripte. Für JavaScript-Module gelten andere Laderegeln.

Lass die Abhängigkeiten zwischen Skripten von Entwickler:innen überprüfen, bevor du ihre Attribute änderst. Teste anschließend die Navigation, die Auswahl von Produktvarianten und die Warenkorbfunktionen, um mögliche Probleme durch die veränderte Ausführungsreihenfolge zu erkennen.

11. Organisiere dein Tracking mit Google Tag Manager

In Shopify kannst du Tracking-Pixel unter „Einstellungen > Kundenereignisse“ verwalten. Pixel erfassen Ereignisse wie Produktaufrufe und abgeschlossene Bestellungen für deine Analyse- und Werbedienste. Wenn für den gewünschten Dienst eine entsprechende Integration verfügbar ist, solltest du ein App-Pixel verwenden.

Mit Google Tag Manager (GTM) kann dein Team Tracking-Tags zentral konfigurieren. Allerdings können einzelne Tags weiterhin Skripte herunterladen und Netzwerkanfragen auslösen. Entferne deshalb nicht mehr verwendete Tags und überprüfe, ob Tracking-Ereignisse sowohl über Apps als auch über GTM doppelt erfasst werden. Beschränke außerdem die Auslöser auf die Ereignisse, die für den jeweiligen Tag tatsächlich benötigt werden.

Wenn du GTM verwenden musst, kannst du dich an der Shopify-Anleitung zum Erstellen eines benutzerdefinierten Google-Tag-Manager-Pixels orientieren. Benutzerdefinierte Pixel werden in einer Sandbox ausgeführt. Diese beschränkt den Zugriff auf die Seite und kann das Verhalten bestehender Tags beeinflussen. Lass die Integration deshalb von Entwickler:innen überprüfen und testen.

12. Vermeide übermäßige Liquid-Schleifen

Liquid ist die Template-Sprache von Shopify. Liquid-Funktionen können beispielsweise verwendet werden, um Bilder oder Produktvarianten auszugeben. Dabei solltest du jedoch immer ihre Auswirkungen auf die Ladezeiten berücksichtigen.

Überprüfe deinen Theme-Code darauf, ob Liquid-Schleifen mehrfach ausgeführt werden, obwohl sie dieselben Informationen abrufen. Das kann passieren, wenn mehrere Entwickler:innen an einem Theme arbeiten. Dadurch entstehen möglicherweise doppelte Prozesse oder widersprüchlicher Code. Wenn du solche Duplikate entfernst, kann sich die Ladegeschwindigkeit deiner Seiten verbessern.

Dokumentiere interne Performance-Standards für alle Personen, die dein Theme bearbeiten. Entwickler:innen sollten bei Code-Reviews prüfen, ob Arbeitsschritte doppelt ausgeführt werden, und den Einsatz verschachtelter Schleifen begründen. Lege außerdem Performance-Budgets für wichtige Seitenvorlagen fest und dokumentiere die Ergebnisse vor und nach jeder Änderung. 

Website-Geschwindigkeit für Mobilgeräte optimieren

Teste den gesamten Kaufprozess auf einem Smartphone über eine mobile Internetverbindung: vom ersten Aufrufen der Landingpage bis zum abgeschlossenen Checkout. Überprüfe, wie schnell Produktbilder erscheinen und ob Schaltflächen unmittelbar auf Eingaben reagieren. Filtere die Web-Performance-Berichte von Shopify nach Mobilgeräten, um Seiten mit schlechten Core Web Vitals zu identifizieren. 

Aktiviere Shop Pay für deinen Checkout, damit Kund:innen bereits gespeicherte Versand- und Zahlungsinformationen wiederverwenden können. Das reduziert den Aufwand beim Ausfüllen von Formularen auf kleinen Bildschirmen. Davon profitieren auch Neukund:innen, die Shop Pay bereits in einem anderen Shop verwendet haben. Teste sowohl den Gast-Checkout als auch den beschleunigten Checkout, um sicherzustellen, dass Kund:innen Versandoptionen auswählen und ihre Zahlungen problemlos abschließen können.

Benjamin Sehl, Mitgründer der Bekleidungsmarke Kotn, erklärt:

„Die meisten unserer Kund:innen entdecken neue Produkte heutzutage unterwegs auf ihren Mobilgeräten. Wenn sie erst ein Formular ausfüllen müssen, verlieren wir sie. Durch die Integration von Shop Pay in unseren Checkout konnten wir den mühsamsten Teil der Customer Journey deutlich angenehmer gestalten. Da Shop Pay mit einem Ökosystem von Millionen Händler:innen verbunden ist, können selbst Neukund:innen mit nur einem Klick bestellen.“

Website-Geschwindigkeit optimieren und Auswirkungen auf die Conversion-Rate messen

Priorisiere langsame Produkt- und Kategorieseiten, die besonders viel Traffic erhalten. Gehe bei der Optimierung deiner Website-Performance schrittweise vor:

1. Dokumentiere deine Ausgangswerte. Halte die Core Web Vitals der betroffenen Seiten und die Conversion-Rate deines Shops fest. Unterscheide dabei zwischen Mobilgeräten und Desktop-Computern.
2. Nimm Änderungen im Theme-Editor vor. Entferne ungenutzte Abschnitte und deaktiviere unnötige Animationen. Diese Anpassungen kannst du selbst durchführen, sofern du die entsprechenden Einstellungen bearbeiten und die Ergebnisse testen kannst.
3. Hole dir Unterstützung bei technischen Problemen. Wenn du ein kostenloses Shopify-Theme verwendest, kannst du dich bei grundlegenden Performance-Verbesserungen an den Shopify Support wenden. Wenn Tests zeigen, dass der Code eines Themes oder einer App die Ursache ist, kannst du die jeweiligen Entwickler:innen kontaktieren. Für individuelle Entwicklungen oder Probleme mit mehreren Integrationen, die über das Fachwissen deines Teams hinausgehen, kann ein Shopify Partner sinnvoll sein.
4. Teste erneut und beobachte deine Conversion-Rate. Überprüfe nach jeder Änderung dieselben Seiten und stelle sicher, dass alle Shop-Funktionen weiterhin funktionieren. Beobachte die Performance anhand neuer realer Nutzerdaten und vergleiche anschließend die Conversion-Rate mit deinen Ausgangswerten. Dokumentiere auch Werbeaktionen und Veränderungen bei den Traffic-Quellen, da diese die Ergebnisse ebenfalls beeinflussen können.

Lege fest, wer nach jedem Theme-Update und jeder App-Installation die Performance überprüft. So stellst du sicher, dass neue Funktionen deine bisherigen Verbesserungen nicht wieder zunichtemachen.

Website-Geschwindigkeit für Shopify-Stores verbessern und Conversions steigern

Ein schneller Shopify-Store sorgt für eine bessere Nutzererfahrung und kann sich positiv auf deine Conversion-Rate auswirken. Um die Ladegeschwindigkeit zu optimieren, solltest du regelmäßig deine Core Web Vitals überprüfen und gezielt die Faktoren beheben, die deinen Store verlangsamen.

Beginne mit besonders wichtigen Produkt- und Kategorieseiten. Optimiere Bilder, reduziere unnötige Skripte und Apps und achte auf ein leistungsfähiges Theme. Shopify unterstützt dich dabei mit einer optimierten Hosting-Infrastruktur, einem integrierten CDN und eigenen Web-Performance-Berichten.

Überprüfe die Ladezeiten nach jeder größeren Änderung und beobachte, wie sich deine Maßnahmen auf die Conversion-Rate auswirken. So stellst du sicher, dass dein Shopify-Store langfristig schnell und nutzerfreundlich bleibt.

Dieser Beitrag erschien ursprünglich im Shopify.com-Blog und wurde übersetzt.