Dein Shopify Store ist langsam? Hier ist die Lösung

In diesem Artikel geht es um die Geschwindigkeitsoptimierung von Shopify Stores. Hier lernst du, wie die Ladegeschwindigkeit gemessen wird, um zu beurteilen, wie schnell oder langsam dein Store ist. Zudem werden die am häufigsten auftretenden Gründe für langsame Shopify Stores vorgestellt. Zum Schluss wird der Prozess der Geschwindigkeitsoptimierung erläutert. 

Inhaltsverzeichnis: Warum ist es wichtig, dass dein Store schnell ist? Wie kannst du die Ladegeschwindigkeit deines Stores messen? Was macht dein Shopify Store langsam? Wie kannst du die Geschwindigkeit deines Stores erhöhen?

 

Zu unseren Services bei SHOPFABRIK gehört primär die Shopify Store Optimierung. Die Optimierung umfasst viele Aspekte eines Stores, unter anderem die Geschwindigkeit. Es gibt viele Gründe, warum eine Seite langsam lädt. Um diese Gründe genau festzustellen, bedarf es mehrere Matrix-Testings und das Verständnis, wie Shopify Stores aufgebaut sind. Wir haben unseren Prozess für Geschwindigkeitsoptimierung über die Jahre optimiert und verfeinert. Nun ist es Zeit für Insider Infos.

Warum ist es wichtig, dass dein Store schnell ist?

Es bedarf keine Erklärung, dass langsame Stores und Webseiten schlechter abschneiden, da Geschwindigkeit als Rankingfaktorgilt, und in der Regel weniger Umsatz erwirtschaften. Heutzutage erwarten die Nutzer:innen nicht nur moderne und informative Webseiten, sondern auch schnelle. Es gilt: Wenn du es nicht geschafft hast, den Inhalt der Webseite innerhalb von 3 Sekunden klar zu präsentieren, dann sind Besucher:innen nicht mehr interessiert. Höchstwahrscheinlich kommt er/sie nicht wieder. 

Die “Bounce Rate” – auf Deutsch „Absprungrate“ – wird oft statistisch gemessen und in E-Commerce Forschungsberichten von Expert:innen immer neu analysiert. Die Absprungrate ist eine Kennziffer dafür, welcher Prozentsatz der Besucher:innen einer Webseite nur einen einzelnen Seitenaufruf erzeugt und danach die Webseite verlässt. Basiert auf die Analyse von mehr als 900 Milliarden Seitenaufrufen, verlassen etwa ein Drittel der Desktop Nutzer:innen und rund zweidrittel der Mobilnutzer:innen eine Webseite, wenn sie langsam ist.

Möchtest du wissen, wie viel Potenzial man mit einem langsamen Store verpasst, dann schaue die nächsten Statistiken genauer an.

Aber wie schnell muss eine Webseite sein? Ab wie viel Sekunden Ladezeit ist eine Webseite langsam? 

Hier ist eine Übersicht mit der Ladezeit und die damit erfasste Absprungrate. Sollten Besucher:innen deines Stores ähnliches Verhalten aufweisen, dann hast du ein immenses Optimierungspotenzial. Je weniger Besucher:innen abspringen, desto größer der Anteil der Käufer:innen. Die Geschwindigkeitsoptimierung bringt nicht nur mehr Umsatz, sondern spart auch viel Geld, falls die Benutzenden durch Google Ads oder Ähnliches auf der Seite gelandet sind.

Oft bekommen wir die Fragen: Ab wie viel Prozent ist die Absprungrate zu viel? Das lässt sich genauer beantworten, wenn die Nische, die Produkte, Traffic Quelle usw. berücksichtigt werden. Aber generell sollte diese unter 55–60% sein. Organischer Traffic weist normalerweise eine niedrigere Absprungrate auf (ca. 35-40%), weil das Produkt gezielt gesucht und höchstwahrscheinlich gekauft wurde. 

Wie kannst du die Ladegeschwindigkeit deines Stores messen?

Um herauszufinden, warum Besuchende deine Seite vermutlich verlassen, solltest du nicht nur die Geschwindigkeit messen, sondern auch das Verhalten deiner Nutzer:innen aufspüren.

Google Speed insights für Geschwindigkeitsmessung ist ohne Zweifel ein nützliches Tool, um die ersten Informationen über die Leistung deiner Seite zu bekommen. Google vergibt dann für die von dir getestete Webseite eine Gesamtbewertung von 100 Punkten, die auf mehreren bewährten Verfahren zur Leistungsoptimierung basieren.

Zusammen mit diesem Ergebnis siehst du auch mehrere Empfehlungen von Google, wie du die Leistung und damit auch deinen (PageSpeed Insights-Wert verbessern kannst. Beispielsweise durch Änderungen von Bildgrößen oder die Optimierung des Codes und Anbindungen im Hintergrund. 

  

Die Daten, die diesem Test zugrunde liegen, sind zwar sehr umfangreich, aber eine Punktzahl zwischen 0 und 100 ist nicht unbedingt nützlich, um die Probleme dahinter zu ergründen. Es ist jedoch ein guter Indikator für die allgemeine Schnelligkeit, weshalb Shopify diese Lösung in sein Dashboard integriert hat. 

Wichtige Faktoren hier sind:

• Die Ladezeit für Desktop und Mobile
• Die Interaktionszeit
• Die Empfehlungen in der Diagnose

In Kombination mit Google Insight werden weitere Tools und Methoden eingesetzt, um das Nutzerverhalten genauer nachvollziehen zu können. Beispiel dafür sind die Heatmaps.

 

Heatmaps sind eine leistungsstarke Methode, um zu verstehen, was Nutzer:innen auf Webseiten tun, wo sie klicken, wie weit sie scrollen, was sie sich ansehen oder eben ignorieren. 

Eine Heatmap (oder Wärmekarte) ist eine grafische Darstellung von Daten, bei der die Werte durch Farben dargestellt werden. Mit Heatmaps lassen sich komplexe Daten leicht visualisieren und auf einen Blick verstehen. Website-Heatmaps visualisieren die beliebtesten (heißen) und unbeliebtesten (kalten) Elemente einer Webseite anhand von Farben auf einer Skala von Rot bis Blau.

Quelle:https://www.hotjar.com/heatmaps/

Dagegen zeigen Scroll-Maps den genauen Prozentsatz der Besucher:innen, die bis zu einem beliebigen Punkt auf der Seite nach unten scrollen: je röter der Bereich, desto mehr Besucher:innen haben ihn gesehen.

Quelle :https://www.hotjar.com/heatmaps/

Die Ergebnisse der Heatmaps zusammen mit der Google Insight Analyse können dir ein gutes Feedback zu der Leistung der Seite geben und die mögliche Interpretation dafür. Das sind wertvolle Informationen für den Optimierungsprozess. 

Was macht dein Shopify Store langsam?

Um die Funktionalität des Stores zu erweitern, werden eine Menge Apps und externe Systeme angebunden und Inhalte hochgeladen. Das kann mit der Zeit dazu führen, dass der Store generell langsam wird. Folgend werden wir die häufigsten Gründe für einen eher langsamen Store nennen. 

Apps

Shopify Apps sind wunderbar, um deiner Webseite Funktionen hinzuzufügen, allerdings können zu viele Apps deinen Store verlangsamen, da diese Apps unterschiedlich komplex aufgebaut sind und viele Daten im Hintergrund verarbeiten müssen. 

JavaScript und CSS

Jeder Code im Hintergrund gilt als Inhalt, der geladen werden muss, damit die Seite für die Benutzer:innen sichtbar werden. Wenn es auf dem Store CSS oder Javascript Dateien gibt, die nicht wirklich nützlich oder nicht optimiert sind, belastet dies die Leistung unnötig.

Bilder

Es überrascht nicht, dass Bilder eine der Hauptursachen für langsame Shopify-Geschwindigkeiten sein können. Wenn die Webseite mit neuen Produkten aktualisiert wird, tun dies auch die dazugehörigen Grafiken und Bilder. Wenn sie nicht richtig optimiert sind, können sie eine Verzögerung der Ladegeschwindigkeit verursachen. Dies kann vor allem auf mobilen Geräten ein großes Problem darstellen. 

Nicht nur die Größe der Bilder ist ein Hindernis für die Geschwindigkeit eines Shops, sondern auch die Anzahl der Bilder, die geladen werden. Wenn die Seiten der Kollektionen wachsen, steigt auch die Anzahl der Bilder. Wenn dein Theme keine Paginierung hat, kann dies schnell zu einem Verlust der Geschwindigkeit in deinem Shop führen. 

Wie kannst du die Geschwindigkeit deines Stores erhöhen?

Apps Health-Check und Analyse

In unserem Optimierungspaket führen wir eine ausführliche Analyse für alle Apps in deinem Store durch, um 

• Die Funktionalität zu testen

• Die nicht aktiven und nicht benutzten Apps zu deinstallieren

• Die passenden Apps für deine Anforderungen zu finden, testen, installieren und für dich einzustellen

Als offizieller Shopify Partner beraten wir dich gerne. 

 

Bilder Optimierung

Vor allem bei wachsenden E-Commerce-Unternehmen kommt es häufig vor, dass man beim Hochladen der Bilder vergisst, diese zu optimieren. Ein oder zwei Bilder verursachen keine massiven Probleme, aber wenn du alle Bildänderungen von Produkten, über Blogs bis hin zu Landing Pages zusammenzählst, kann sich das schnell auf die gesamte Leistung auswirken. Dabei solltest du auf folgendes achten: 

• Das richtige Format verwenden. Die richtigen Bildabmessungen sind für jedes Theme unterschiedlich, aber als Faustregel gilt, dass sie den Viewport oder die Bildschirmgröße des Geräts nicht überschreiten sollten. Es gibt viele verschiedene Tricks, die man mit dem Code anwenden kann, um die richtige Bildgröße für die richtige Bildschirmgröße zu laden. So solltest du beispielsweise keine hochauflösenden Retina-Bilder auf einem nicht hochauflösenden Gerät laden, wenn es sich um Produktfotos handelt, die Nutzer:innen vergrößern sollen. Lade nicht gleich ein übergroßes Bild, stattdessen ein Produktbild in der richtigen Größe mit einem Hinweis, dass Nutzer:innen mit dem Mauszeiger über das Bild fahren kann, um ein hochauflösendes Bild zu sehen. Auf diese Weise können die Nutzer:innen und die Suchmaschinen die gesamte Seite betrachten, ohne auf das Laden des hochauflösenden Bildes warten zu müssen. 

• Image Formate optimieren. JPEG hat die beste Farbgenauigkeit. PNG sollten für Bilder mit transparentem Hintergrund verwendet werden.

• Extra Bildinformationen eliminieren (mit Photoshop machbar)

• Thumbnails optimieren. Auf Collection Pages, Landingpages und sogar Suchergebnissen können 30-40 Produkte gleichzeitig laden. Es ist wichtig, die korrekte Größe der Miniaturansicht zu laden und nicht das größere Bild, das auf der Produktbeschreibungsseite zu sehen wäre. 

Verkleinere CSS und Javascript Dateien

Auch bekannt als “Minify”. Bei der Verkleinerung werden überflüssige oder nicht verwendete Daten aus der Website entfernt, ohne die Verwaltung der Ressource durch den Browser zu beeinträchtigen. Beispiele für Minification sind das Löschen von ungenutztem Code, das Entfernen von Codekommentaren und Formatierungen sowie die Verwendung kürzerer Funktionsnamen. Durch Verkleinerung wird die Größe der Webseite reduziert und das Laden beschleunigt, was wiederum die Geschwindigkeit und Leistung der Seite verbessert. Minification wird auf JS, CSS und HTML angewendet.

Es gibt einige Tools für diesen Prozess, allerdings empfehlen wir, diesen von Expert:innen durchführen zu lassen, um zukünftige Unregelmäßigkeiten bei dem Store Code zu vermeiden.