7 Performance Hacks für einen schnellen Shopify Onlineshop

Die Ladezeiten deines Shopify Onlineshops sollten niemals vernachlässigt werden. Denn wir alle kennen es und wir alle hassen es: Langsame Webseiten. Für Onlineshop Betreiber ist diese Tatsache ganz besonders essentiell, denn überdurchschnittlich lange Ladezeiten führen zu höheren Absprungraten und niedrige Conversion Rates. Darüber hinaus, straft Google schlechte Performance bei deinem organischen Ranking ab und Facebook mit höheren Kosten pro Klick.

Um also den Erfolg des Onlineshops durch schlechte performance nicht aufs Spiel zu setzen, muss das ein oder andere beachtet werden. Generell ist man als Shopify Nutzer hierbei vorneweg gut aufgestellt. Denn viele kritische Funktionalitäten werden von der Plattform automatisch integriert.

Nichtsdestotrotz gibt es einige Fehlerquellen die vermieden werden sollten und der ein oder andere Hack, der vieles bewirken kann! Im folgenden werden 7 wichtige Schritte aufgezeigt, die dir dabei helfen, deinen Shopify Onlinestore rasend schnell zu machen – denn jede Millisekunde zählt!

‍

Einer der Vorteile als Nutzer von Shopify ist es, dass man sich nicht um Dinge wie Code Minification, Code Compression, Content Delivery Networks, Browser Caching oder Hosting Performance Gedanken machen muss! Weitere Shopify Vorteile habe ich in diesem Beitrag näher beschrieben.

Die größten Schwachstellen aufdecken: Wichtige Tools zur Analyse

Zu Beginn ist der wesentlichste Schritt, den eigenen Shopify Onlinestore analysieren zu können. Denn jeder Shopify Onlinestore ist maßgeblich durch das installierte Theme, den verwendeten Apps, dem Content und der eigenen Anpassungen komplett einzigartig.

Hierfür gibt es eine Reihe an Tools, die allesamt für sich sinnvoll sind und definitiv zumindest mal in Verwendung gewesen sein sollten.

Alle Hacks, Tools und Tipps in diesem Beitrag sind komplett kostenfrei umsetzbar und einsetzbar!

A: Shopify’s Performance Tool

Sehr hilfreich und nicht zu vernachlässigen ist das eingebaute Performance Analyse Tool von Shopify selbst. Die vergebene Punktzahl ist im Vergleich zu anderen Shopify Onlinestores entstanden, gibt aber nicht unbedingt aufschluss darüber wie gut deine Performance ist. Nichtsdestotrotz hilft sie dir dabei, die veränderung deiner Performance im Auge zu behalten, denn Shopify trackt hiermit im Laufe der Zeit die Veränderung deiner Ladezeiten.

B: Google’s Performance Tool

Das Maß der Dinge in Sachen Website Performance ist nach wie vor der Pagespeed Insights Test von Google selbst. Wie bei allen Analyse Tools kannst du hier die URL deiner wichtigsten Seiten (Homepage und Produktseite) eingeben und erhältst eine Punktezahl für jeweils die Desktop und Mobile Version.

Die allerwenigsten Stores erhalten hier bei der Analyse der Mobilen Version eine hohe Punktzahl ohne maßgeblich am Code hand angelegt zu haben. Wirklich spannend und hilfreich ist bei diesem Test der Part, wo die Optimierungsvorschläge aufgelistet werden.

Wichtige Metric: FCP (First Contentful Paint) sollte unter 3 Sekunden sein – super wäre eine Zeit von unter 1,8 Sekunden.

C: Testmysite speziell für Shopify Stores

Überaus hilfreich und ausschließlich für Shopify Onlinestores ist das umfassende Analyse Tool von Testmysite. Sehr übersichtlich erhältst man hier zum Theme selbst, dem Shop allgemein und allen wichtigen Unterseiten einen Performance-Bericht.

Einzigartig bei diesem Test ist die Analyse der installierten Apps und der dadurch resultierenden, zusätzlichen Ladezeit. Man erkennt also, welche Installation die größten Performance Einbußen mit sich bringt.

D: Developer Tools von Chrome / Brave Browser

Eine der wichtigsten Tools für das Web Development allgemein und eben auch für eine detaillierte Performance Analyse von Webseiten bieten die Entwickler Tools vom Chrome und Brave Browser. Diese sind als Funktionalität bei diesen beiden Browsern vorinstalliert und können mit Hilfe von Rechtsklick>Untersuchen/Inspect geöffnet werden.

Hier bietet nun der Reiter “Performance” mehrere detaillierte Einblicke in den rohen Ablauf des Ladevorgangs. Diese ungeschönten Analyse Berichte können anfangs etwas erschlagend wirken – birgen aber mit Abstand den meisten Wert in sich!

Alle Bilddateien speziell für Web optimieren

Sind Fotos nicht speziell für das Internet optimiert, so stellen sie eine große Belastung für die Performance einer Website dar. Nicht selten sind zu große Bilddateien der schwerwiegendste Grund für langsame Ladezeiten. Beim durchführen eines der oben aufgeführten Tests wird dieses Problem relativ schnell aufgedeckt. Glücklicherweise kann diese schwachstelle auch relativ schnell aufgehoben werden.

4 Faustregeln für bessere Performance bezüglich Bilddateien

1. Fotos sollten nie als .png, sondern im .jpg Format hochgeladen werden. Ausnahme sind Bilder, welche ausschließlich aus Text, einfachen geometrischen Formen oder einfarbigen Flächen bestehen.
2. Logos, Symbole und Icons sollten im besten Falle als .svg File hochgeladen werden.
3. Die Auflösung eines Fotos soll in der Regel nicht 2000px überschreiten. In den allermeisten Fällen sind selbst bei Vollbild Hero Bildern 1800px groß genug.
4. Vor dem hochladen sollte die Datei immer mit einem Dienst wie Optimizilla optimiert werden.

Da Bilddateien eine so große Belastung für Webseiten darstellen, sollte generell lieber sparsam damit umgegangen werden. Jedes weitere Bild sollte bezüglich des marginalen Nutzens abgewogen werden. Speziell bei Website Slidern (Karussell) wird oft mit zu vielen, schweren Fotos die Website erheblich verlangsamt – am besten man verzichtet komplett darauf.

Nur die nötigsten Apps behalten

Die richtigen Apps können unsere Shopify Website zu einem richtigen Conversion Beast machen. Leider ist die downside einer jeden App, dass dadurch die Website um ein Ticken langsamer wird – selbst wenn die zusätzliche Funktionalität nicht so groß ist.

Das Wort Funktion ist hier auch der springende Punkt. Denn jede App bedeutet mindestens eine weitere JavaScript Funktion, welche vom Browser “requested” und verarbeitet werden muss – und dies bringt Zeit Einbußen mit. Um es kurz zu fassen: Man sollte wirklich nur so viele Shopify Apps wie nötig und so wenig wie möglich installieren.

Sollte eine App also einen nicht merklichen Mehrwert darstellen, macht es Sinn diese wieder zu deinstallieren. Doch aufgepasst:

Fast alle Apps hinterlassen selbst nach dem Löschen Code Rückstände in der Theme Datei – dadurch wird die Shopify Website mit unnötigem Code zugemüllt. Meistens wird auf der Website vom App Entwickler diesbezüglich Stellung genommen und erklärt, wo die Rückstände zu finden sind. Ansonsten sollte dieser direkt über die Support Email angeschrieben werden.

Um den Fehler zu vermeiden, die eigene Seite mit schlechten Apps oder deren Code Rückständen zuzumüllen, sollte ein Blick auf unsere Liste der besten Shopify Apps geworfen werden.

Neue Theme Version installieren

Jedes Shopify Theme wird regelmäßig von den Herstellern geupdatet und steht dann wiederum allen Nutzern zum Download und manueller Integration zur Verfügung gestellt. Meistens werden neue Funktionalitäten veröffentlicht, Fehler ausgemerzt aber auch im Performance Bereich werden Besserungen eingepflegt. Ein Theme Update hat daher grundsätzlich einen positivem Impact auf den eigenen Shopify Store.

Ungeachtet der neuen Theme Funktionalitäten hat die Neuinstallation aber auch Implikationen für die eigene Shop Performance. Denn durch diesen “Neuanfang” werden alle Code Rückstände aus alten App Installationen beseitigt! Je nachdem wie lange die letzte Neuinstallation zurück liegt und wieviele Apps in der Zwischenzeit deinstalliert wurden, kann hier ein großer Speed Vorsprung gemacht werden.

Selbst bei großen und gut laufenden Onlineshops ändert sich ständig etwas an der Codebase, den verwendeten Apps oder der Website Struktur an sich. Ein sinnvoller Prozess für wirklich jeden Shopify Nutzer, ist eine regelmäßige, saubere Neuinstallation des Themes und aller Apps. Je nachdem, kann einmal im Jahr oder auch alle 6 Monate viel Sinn machen!

Videos nur mit Bedacht nutzen

Videos sind die neue Sprache des Internets – zurecht! Denn sie vermitteln besser und schneller, als jedes Wort, oder Bild. Besonders wenn diese automatisch abgespielt werden und ästhetisch auf der Website eingebunden sind, können sie eine große Wirkung erzeugen. Doch automatisch abgespielte Videos – sei es in der Produktgallerie, als Hintergrund oder sonst wo – können eine große Belastung für die Performance einer Website darstellen. Hierbei muss der Vorteil der Ästhetik oder Sales-Wirkung wirklich so groß sein, dass die Einbußen in der Ladegeschwindigkeit in Kauf genommen werden können.

Sollte es dennoch zu der Entscheidung kommen, dieses Medium zu nutzen, so muss auf bestimmte Dinge geachtet werden. Denn abhängig davon, wie das Video eingebunden wird, können große Unterschiede in der Performance entstehen.

Bei den meisten Themes wird die Einbindung von Video über Youtube Links vereinfacht. Doch hiervon solltest du die Finder lassen! Abhängig von der Programmierung deines Themes kann es sein, dass durch diese Einbindung nicht nur das Video geladen wird, sondern im Hintergrund tatsächlich die ganze Youtube Landingpage rundherum auch gedownloaded wird.

Außerdem wird dann standardmäßig über das <iframe> tag integriert. Hierbei ist die Höhe und Breite des Videoplayers fixiert. Das bedeutet, auch wenn auf der Website nur ein kleiner Ausschnitt des vollen Videoformats zu sehen ist, wird die komplette Auflösung des Videos geladen. Das sind unnötige Megabite, die die Seite verlangsamen.

Die Lösung hierfür ist ein sogenannter Lite Embed. Das Video muss im Vorfeld auf das Format geschnitten und die Auflösung skaliert werden, die tatsächlich auf der Website benötigt wird. Dann muss das Video bei den Files im Shopify backend hochgeladen werden. Der hierbei generierte Link kann nun für die Einbindung genutzt werden.

Renderblocking Skripte verschieben (Protip)

Wer hierbei nur Bahnhof versteht sollte tunlichst nicht selbst Hand anlegen, sondern einen Experten beauftragen. Das macht wiederum erst Sinn, sobald der monatliche Umsatz hoch genug ist, und die Performance Verbesserung dementsprechend lohnenswert ist. Gleichzeitig ist es von Vorteil, zumindest das Konzept hinter der Lösung zu verstehen:

Zunächst, der Prozess den ein Browser durchläuft, um eine Website für den Besucher zu laden, wird parsing genannt. Im Zuge dieses Vorganges wird die Darstellung des visuellen Teils als rendern bezeichnet. Mit “visuellem Teil” wird jener Abschnitt der Seite bezeichnet, welcher above the fold – also im Bildschirm zuerst nach dem Ladevorgang – sichtbar ist.

Die Ladezeit dieses initial Sichtbaren Teils der Website (First Contentful Paint, laut Google) entspricht der erlebten Ladezeit der Website und ist daher besonder wichtig für das Nutzererlebnis.

Bestimmte Skripte verzögern die Darstellung des above the fold Bereiches der Website ohne dass sie einen unmittelbaren Nutzen haben. Diese sogenannten renderblocking scripts sind im Falle von Shopify Javascript Dateien, welche meistens von zusätzlich Installierten Apps, aber oft auch einfach vom verwendeten Theme kommen.

Abhilfe kann geschaffen werden, indem diese Skripte identifiziert und der Ladevorgang verschoben wird. Das macht man durch das Einsetzen des “defer” Attributs im jeweiligen Skript tag: <script src="jquery.js"></script> -> Nicht blockierend: <script src="jquery.js" defer></script>. Definitiv muss nach dem Einfügen dieses Attributes ausgiebig getestet werden, ob die User Experience der Website unerwartet Schäden davongezogen hat.

Kritisches CSS extrahieren und zuerst laden (Protip)

Die Idee ist wieder, die Zeit für das Rendern des above the fold Bereiches (First Contentful Paint) so schnell wie möglich zu machen, um das Erlebnis des Website Besuchers zu verbessern. Besonders unter schlechten Netzwerk Verhältnissen (mit dem Handy in der U-Bahn) macht dies einen großen Unterschied!

Beim bereits erwähnten parsing Prozess des Browsers werden für die Darstellung der Website unter anderem auch eine oder mehrere CSS Dateien geladen. Dieser für das Styling der Website notwendige Code kann zwischen critical und non-critical unterteilt werden. Einfach gesagt, ist kritisches CSS ausschließlich der Part, welcher für die Darstellung des above the fold Teiles der Website notwendig ist.

Der Performance Hack hierfür ist, das kritische CSS zu identifizieren, dieses dann zu extrahieren und innerhalb des <head> tags inline zuerst zu laden. Der Ladevorgang des restlichen nicht-kritischen CSS Codes kann dann asynchron hinten angestellt werden. Dies erlaubt den Browser die initiale Darstellung der Website viel schneller abzuschließen.

Fazit: Performance Optimierung ist wichtig, aber auch nicht alles

Das Thema Website Speed kann schnell zu einem Rabbit Hole werden – ehe man sich versieht, verbringt man Stunden und Tage damit Millisekunden herauszuholen oder einen weiteren Punkt im Pagespeed Insights Score knacken. Doch irgendwann ist der Aufwand dem Mehrwert nicht mehr gerecht. Glücklicherweise macht es Shopify macht es dem Nutzer ohnehin schon sehr einfach, wenn es um die Performance Optimierung geht. Wenn dann noch zumindest die ersten 5 Punkte dieses Beitrags befolgt werden, steht man als Shop Betreiber mit Sicherheit schon weitaus besser da, als der Großteil der Wettbewerber!