Die Leistung deines Onlineshops verbessern

Auf die Leistung deines Onlineshops wirken sich mehrere Faktoren aus, von denen du einige steuern kannst.

Um zu erfahren, wie dein Onlineshop heute abschneidet, wirf einen Blick auf deinen Bericht zur Web-Leistung.

Faktoren, die du nicht steuern kannst

Diese Faktoren können sich auf die Leistung deines Shops auswirken, können aber nicht durch Einstellungen oder Anpassungen gesteuert werden, die du an deinem Shopify-Shop vornehmen kannst. Dazu gehören Faktoren auf Seiten deiner Kunden, wie z. B. die Geschwindigkeit ihres Geräts oder Internets, sowie Faktoren auf Seiten von Shopify, wie z. B. Aktualisierungen der Infrastruktur von Shopify.

Gerät, Netzwerk und Standort deines Kunden

Kunden, die deinen Shop besuchen, leben auf der ganzen Welt und haben unterschiedliche Geräte und Internetverbindungen. Dies bedeutet, dass dein Shop abhängig von diesen Faktoren möglicherweise schneller oder langsamer geladen wird.

Wenn ein Kunde dich wegen der Geschwindigkeit deines Shops kontaktiert, bitte den Kunden, zu überprüfen, ob er die neueste Version seines Browsers verwendet, ob er kürzlich den Cache gelöscht hat und sein Internetdienstanbieter keine Ausfälle oder eine herab gefahrene Leistung erlebt.

Shopify-Infrastruktur

Shopify hostet deinen Onlineshop auf schnellen, globalen Servern und begrenzt nicht die Bandbreite deines Shops. Du kannst den Status deines Shopify-Shops unter Shopify-Status überprüfen.

Shopify nimmt fortlaufend Verbesserungen am Code und an der Infrastruktur vor. Einige dieser Verbesserungen können sich auf deine Leistungskennzahlen auswirken.

Im Folgenden findest du einige Funktionen, die sich auf die Geschwindigkeit deines Onlineshops auswirken.

Content Delivery Network (CDN)

CDN steht für Content Delivery Network. Das CDN speichert Bilder und andere Dateien, wie etwa den Inhalt auf der Seite Inhalt> Dateienim Shopify-Adminbereich. Mit dem CDN bietet Shopify Händlern ein CDN von Weltklasse, das von Cloudflare ausgeführt wird und sicherstellt, dass dein Onlineshop auf der ganzen Welt schnell geladen wird. Du kannst den CDN-Status auf der Cloudflare-Statusseite überprüfen.

Lokaler Browser-Cache

Der Shop speichert Caches oder einige Elemente im lokalen Speicher des Kunden vorübergehend. Wenn der Kunde das nächste Mal deinen Onlineshop besucht, kann der Browser Ressourcen aus dem Cache laden, anstatt eine weitere Anfrage an den Server zu senden.

Shopify legt das Browser-Caching für Cache-fähige Ressourcen in deinem Shop auf ein Jahr für jede Datei fest. Dateien, die zwischengespeichert werden können, sind Bilddateien, PDFs, JS-Dateien und CSS-Dateien.

Serverseiten-Cache für Seiten

Zusätzlich zum Caching des lokalen Browsers speichert Shopify Seiten auf der Serverseite. Wenn eine Seite zum ersten Mal geladen wird, ist es möglicherweise langsamer, aber spätere Seitenlasten werden schneller, da Kunden eine zwischengespeicherte Kopie erhalten.

Die Assets im Liquid-Objekt content_for_header

Das Liquid-Objekt `` injiziert Assets, die von verschiedenen Onlineshop-Funktionen verwendet werden, einschließlich Leistungsanalysen und optionalen Funktionen wie dynamischen Checkout-Buttons. Das Laden dieses Objekts und verbundener Assets wirkt sich auf die Geschwindigkeit deines Shops aus. Shopify optimiert das Tag und seine Assets, um es schneller zu machen.

Faktoren, die du steuern kannst

Im Folgenden findest du einige Faktoren, die sich auf die Leistung deines Onlineshops auswirken könnten, und Informationen dazu, wie du diese angehen kannst.

Apps

Wenn du Apps hinzufügst, um die Funktionalität oder das Erscheinungsbild deines Onlineshops zu ändern, fügen diese Apps dem Theme Code hinzu, damit sie ausgeführt werden können. Mancher Code kann entfernt oder neu angeordnet werden, um die Leistung deines Onlineshops zu verbessern. Wenn du keine App verwendest, kannst du den Code entfernen.

Wenn du der Meinung bist, dass eine App deinen Shop verlangsamt, führe die folgenden Schritte aus:

  • Deaktiviere App-Funktionen, die du nicht verwendest, oder entferne die App, wenn du sie nicht benötigst. Berücksichtige dabei das Gleichgewicht zwischen Onlineshop-Funktionen und Geschwindigkeit.
  • Wenn du eine App entfernst, solltest du Code entfernen, der im Rahmen des App-Installationsprozesses hinzugefügt wurde. Die meisten Apps entfernen ihren Code automatisch. Du kannst dich jedoch an den Entwickler der App wenden, um sicherzugehen. Einige Apps helfen dir bei diesem Prozess, indem sie ihren Code mit Tags {% comment %} versehen, die den App-Namen enthalten. Das Entfernen von nicht verwendetem App-Code ist eine Best Practice. Sie verhindert, dass Code für nicht verwendete Funktionen ausgeführt wird und verbessert die Lesbarkeit deines Theme-Codes.
  • Wende dich an deinen App-Entwickler.

Themes

Themes bestehen aus Liquid-, HTML-, CSS- und JavaScript-Code. Wenn du Themes bearbeitest oder anpasst, können die Dateigrößen ansteigen und sich auf deine Web-Leistung auswirken.

Wenn du der Meinung bist, dass etwas in deinem Theme deinen Shop verlangsamt, führe die folgenden Schritte aus:

Theme- oder App-Funktionen

Wenn bestimmte Funktionen aktiviert sind, können sie sich auf die Leistung deines Shops auswirken. Zum Beispiel laden einige Schnellansicht-Pop-up-Fenster vorab Informationen aus jeder Produktseite, wenn eine Kollektionsseite geladen wird. Das Laden von zusätzlichen Daten, die deine Kunden nicht verwenden, kann sich auf die Ladegeschwindigkeit auswirken, ohne einen Mehrwert zu erzielen.

Wenn du der Meinung bist, dass eine Funktion deinen Shop verlangsamt, kannst du die folgenden Schritte ausführen:

  • Verwende ein Heatmap-Tool, um anzuzeigen, ob Kunden bestimmte Funktionen verwenden. Deaktiviere Funktionen, wenn sie nicht verwendet werden.
  • Deaktiviere die Funktion, wenn du sie nicht benötigst. Berücksichtige dabei das Gleichgewicht zwischen Onlineshop-Funktionen und Leistung.
  • Wende dich an deine Theme- und App-Entwickler und frage nach, ob Daten vorab geladen werden.

Komplexer oder ineffizienter Liquid-Code

Du kannst fast den gesamten Liquid-Code bearbeiten, der zum Rendern deines Shops verwendet wird. Es gibt effiziente und ineffiziente Methoden, um Liquid-Code zu schreiben. Durch die wiederholte Ausführung komplexer Operationen kannst du deine Zeit zum Rendern von Liquid-Code steigern, was sich auf deine Web-Leistung im Allgemeinen auswirkt.

Wenn du z. B. die Produkte in einer Kollektion nach Preis anordnen möchtest, solltest du dies tun, bevor du die Produkte in deiner Kollektion durchläufst, und nicht als Teil des Durchlauf-Codes. Das ist empfehlenswert, da sich die Reihenfolge der Produkte nicht für jedes Produkt ändert und die Berechnung der Reihenfolge der Produkte der Anfrage Verarbeitungszeit hinzufügt.

Wenn du Bedenken hast, dass dein Code nicht optimiert ist, kannst du die folgenden Schritte ausführen:

  • Führe den Shopify Theme Inspector für Chrome aus, um die Code-Zeilen zu identifizieren, die Seiten in deinem Onlineshop verlangsamen.
  • Engagiere einen Shopify-Partner, der dir dabei hilft, ineffizienten oder nutzlosen Code zu finden.

Bilder und Videos

Übergroße Bilder und Bilder, die nicht sichtbar sind, können das Laden anderer, wichtigerer Teile einer Seite beeinträchtigen. Wenn Nutzer darauf warten müssen, dass große Bilder geladen werden, verlangsamt dies deinen Shop möglicherweise.

Shopify verfügt über einige Schutzmaßnahmen, um zu verhindern, dass du deinen Onlineshop mit Bildern oder Videos überlastest. Zum Beispiel:

  • Du kannst nicht mehr als 50 Produkte auf einer Kollektionsseite oder 25 Abschnitte auf deiner Startseite haben.
  • Bei vielen Themes wird das Laden von Bildern, die derzeit nicht auf dem Bildschirm angezeigt werden, verschoben.
  • Bei vielen Themes wird auch eine bestimmte Größe eines Bildes basierend auf der Größe des Bildschirms, auf dem das Bild angezeigt wird, geladen.

Diese Schutzmaßnahmen verhindern jedoch nicht vollständig, dass Bilder oder Videos sich auf die Leistung deines Onlineshops auswirken.

Wenn du der Meinung bist, dass Bilder deinen Shop verlangsamen, führe die folgenden Schritte aus:

  • Lies den Leitfaden zur Bildoptimierung.
  • Beschränke Slideshows von Feature-Bildern auf 2 bis 3 Folien oder verwende nur ein Feature-Bild.
  • Wende dich an deinen Theme-Entwickler, um zu erfahren, wie du Bilder am besten mit dem entsprechenden Theme verwenden kannst.

Schriftarten

Du kannst aus verschiedenen Schriftarten für den Text in deinem Onlineshop auswählen. Wenn du jedoch eine Schriftart verwendest, die noch nicht auf dem Computer deines Kunden vorhanden ist, muss die Schriftart heruntergeladen werden, bevor dein Text angezeigt werden kann. Dies hat Auswirkungen auf den Ladevorgang deines Shops.

Du kannst eine Systemschriftart verwenden, um zu vermeiden, dass eine neue Schriftart auf den Computer deines Kunden heruntergeladen wird. Eine Systemschriftart ist eine Schriftart, die auf den meisten Computern bereits installiert ist.

Du kannst eine Mono-, Serif- oder Sans-Serif-Schriftfamilie auswählen. Wenn du eine dieser Schriftfamilien verwendest, kannst du weiterhin Schriftstile wie Fett- oder Kursivdruck verwenden.

Die Schriftart, die auf dem Computer deines Kunden angezeigt wird, hängt von dessen Betriebssystem ab. Im Folgenden findest du einige Beispiele für Schriftarten, die zum Rendern von Text verwendet werden können, wenn du eine Systemschriftfamilie auswählst:

  • Mono: Menlo, Consolas, Monaco, Liberation Mono oder Lucida Console
  • Sans-Serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu oder Neue Helvetica
  • Serif: Iowas Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times oder Source Serif Pro

Tools zur Fehlerbehebung

Du kannst die folgenden Tools verwenden, um die Leistung deines Onlineshops zu ermitteln.

Wenn du Entwickler bist, kannst du die Leistung deines Themes mithilfe der Tools und Best Practices von Shopify weiter optimieren. Mehr Informationen unter Shopify.dev.

PageSpeed Insights

Der Bericht zum Web-Leistungs-Dashboard von Shopify misst anhand der Core Web Vitals, wie echte Benutzer deinen Onlineshop erleben. Du kannst deine eigenen Berichte mit Google PageSpeed Insights erstellen, um detailliertere Kennzahlen für Seiten in deinem Shop anzuzeigen.

Shopify Theme Inspector für Chrome

Der Shopify Theme Inspector für Chrome ist ein Profiling-Tool, das ein Flame Graph verwendet, um die Rendering-Leistung für Liquid anzuzeigen. Mit diesem Tool kannst du die Code-Zeilen identifizieren, die Seiten in deinem Onlineshop verlangsamen. Erfahre, wie du den Shopify Theme Inspector verwendest.

Unterstützung bei der Onlineshop-Leistung erhalten

Wenn du ein kostenloses Theme von Shopify verwendest, kann der Shopify Support dir möglicherweise bei grundlegenden Leistungsverbesserungen behilflich sein.

Wenn du ein Theme eines Drittanbieters verwendest und Hilfe benötigst, wende dich an deinen Theme-Entwickler oder engagiere einen Shopify-Partner. Erhalte mehr Informationen über das Engagieren von Shopify-Partnern.

Wenn du ein Entwicklungsteam oder einen Agenturpartner hast, kannst du auch diese kontaktieren, um weitere Unterstützung zu erhalten.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen