fbpx
  • Home
  • /
  • Blog
  • /
  • Grundlagen
  • /
  • Shopify Pagespeed Optimierung – Schnellere Ladezeit für Deinen Shopify Store

Shopify Pagespeed Optimierung – Schnellere Ladezeit für Deinen Shopify Store


In der heutigen digitalen Welt ist die Geschwindigkeit oder Ladezeit ein wichtiger Faktor für den Erfolg eines Onlineshops. Die Geschwindigkeit der Website vermittelt den ersten Eindruck über Dein Unternehmen. Es ist wichtig zu verstehen, dass Du als Shop-Bestreiber keine zweite Chance bekommst, wenn es um das Nutzererlebnis geht.

Studien haben den direkten Einfluss der Ladezeit auf die Konversion gezeigt. Zu den Faktoren, die bei der Geschwindigkeitsoptimierung eine Rolle spielen, gehören: Bilder und Videos, Hosting, das CMS, Icons und Inhalte, Skripte, Apps und sauberer Code. In diesem Artikel werde ich für Dich die wichtigsten Faktoren etwas näher erläutern und erklären, worauf Du von vornherein achten solltest.

Shopify Pagespeed Faktor Nr. 1: Das Theme

Themes bestehen aus Liquid-, HTML-, CSS- und Javascript-Code. Wenn Du Themes bearbeitest oder anpasst, kann die Dateigröße steigen und die Geschwindigkeit Deines Shopify Stores beeinträchtigen. Die Art und Weise, wie Dein Code geschrieben wurde, kann ebenfalls ein Faktor sein, der sich auf die Geschwindigkeit Deines Shopify Stores auswirkt. Dein Code sollte also kurz sein und es sollte keinen unnötigen Code geben.

Verwende daher ausschließlich Themes aus dem Shopify Theme Store, die bereits für die Geschwindigkeit optimiert wurden. Das aktuelle Standard-Theme Dawn ist z.B. mittlerweile ein sehr ausgereiftes und funktionales Theme, was viele Deiner Anforderungen abdeckt und die Funktionen und Vorzüge des OS 2.0 Updates mit sich bringt.

Shopify Pagespeed Faktor Nr. 2: Die Apps

Der wichtigste Faktor bei der Pagespeed Optimierung auf Shopify sind die Apps. Apps wirken sich in vielerlei Hinsicht auf die Geschwindigkeit Deines Shops aus. Wenn Du normalerweise Apps in Deinem Theme installierst und deinstallierst, besteht die Möglichkeit, dass Code-Reste von deinstallierten Apps in deinem Theme verbleiben und weiterhin unnötige Ressourcen laden. 

Meistens können Ressourcen, die von Apps geladen werden, nicht optimiert werden, weil der Code entweder nicht zugänglich ist, das Risiko besteht, dass er Probleme verursacht. Oder weil alle Änderungen an App-Dateien, die dem Theme hinzugefügt wurden, automatisch von der App überschrieben werden.

Die meisten Anwendungen auf Shopify werden von Drittanbietern erstellt. Diese Anwendungen werden von einem externen Hosting geladen. Alle Skripte, Stile und HTML werden von außen geladen. Dadurch erhöht sich auch die Anzahl der HTTP-Anfragen zum Laden der Quellen, was sich auf die Geschwindigkeit deines Shops auswirkt.

Aber bitte verstehe mich jetzt nicht falsch:

Damit will ich Dir nicht sagen, dass Du keine Apps in Deinem Store installieren sollst. Shopify Apps bieten einen großen Nutzen für Shopbesitzer und Kunden und viele essenzielle Funktionen. Wenn Dir eine App gute Ergebnisse bringt, z. B. höhere Konversionsraten, mehr Besucher, mehr Interaktion mit den Nutzern oder sogar weniger Zeitaufwand für den Kundenservice oder die Buchhaltung, dann ist das großartig und Du solltest diese Apps nutzen. Denn sie machen Dein Leben einfacher und dein Geschäft besser.

Fakt ist: Je mehr Apps du installiert hast, desto mehr Ressourcen müssen geladen werden, was zu mehr Anfragen, Rendering-Blocking und Seitengewicht führt und letztendlich die Ladezeiten Deines Shops verlängert. Halte Dir das immer vor Augen und wäge gut ab, ob und welche App Du installierst. Behalte außerdem im Hinterkopf, dass Apps nach der Deinstallation Code-Fragmente hinterlassen können, die entfernt werden sollten. Das kann ein guter Optimierungs-Hebel sein.

Die Alternative:

Ersetze deine Apps durch anpassbaren Code und optimiere so die Geschwindigkeit. Die beste Alternative in Bezug auf die Leistung von Apps ist es, die gewünschte Funktion mithilfe eines Entwicklers direkt in Dein Theme zu programmieren oder jemanden vom Shopify-Marktplatz einzustellen.

Eine benutzerdefinierte Funktion kann mit dem Unternehmen mitwachsen. Das heißt, wenn sich Deine Anforderungen in Zukunft ändern, kannst Du Dich jederzeit an das Unternehmen wenden, das Deinen Code erstellt hat, um ihn umzugestalten. Der Entwickler kann jederzeit jeden Fehler oder jedes Problem beheben, oder eine besondere Funktion einbauen. 

Verwende also nur so viele Apps wie nötig. Deinstalliere Apps, die Du nicht mehr brauchst. Nachdem Du eine App deinstalliert hast, solltest du den übrig gebliebenen Code aus Deinem Theme entfernen. Versuche, die Probleme mit Theme-Liquid, CSS- und Java Script-Code zu lösen, anstatt eine App zu installieren, vor allem bei kleinen Aufgaben. Installiere neue Apps wohl überlegt.

Shopify Pagespeed Faktor Nr. 3: Bild-Optimierung

Du solltest immer weboptimierte Bilder verwenden und auf die Größe der Bilder achten, da große Bilder mehr Zeit zum Laden benötigen. Um deinen Shop schneller zu machen, solltest du Lazy Loading aktivieren. Viele Themes haben diese Funktion schon mit an Bord. Idealerweise bearbeitest Du Deine Bilder von vornherein so, dass Sie eine akzeptable Größe haben. Hier gilt ein gesunder Mittelweg zwischen Auflösung & Dateigröße. 

Es kommt immer auf den speziellen Fall an, denn z. B. sollten Schmuck Shop sehr gute Bilder bereitstellen, die auch „zoombar“ sind, sodass man kleine Details der Produkte erkennen kann. Dennoch sollte die Dateigröße im Blick behalten werden. Um Bilder vor dem Upload in den Shop zu laden, eignen sich Tools wie Tiny PNG zur Komprimierung.

Hast Du bereits viele Bilder im Shop, welche eine beachtliche Dateigröße mit sich bringen sowie den Shop verlangsamen, kannst Du Apps nutzen, um diese zu komprimieren. Hier gilt aber, wie schon oben erwähnt die Regel gut zu überlegen, welche App Du installierst und ob sie nicht auf der anderen Seite wieder unnötigen Code erzeugen kann. Das bedeutet: Achte am besten schon immer vor dem Upload der Bilder penibel auf die Dateigröße, um späteren Ärger und viel Arbeit zu vermeiden.

Shopify Pagespeed Faktor Nr. 3: Video-Optimierung 

Übergroße Videos, die nicht sichtbar sind, können das Laden anderer, wichtigerer Teile einer Seite behindern. Wenn die Nutzer/innen darauf warten müssen, dass große Videos geladen werden, können sie deinen Shopify Store als langsam empfinden. Verwende daher YouTube iFrames oder Vimeo für Deine Videos anstatt HTML-Tags.

Shopify Pagespeed Faktor Nr. 4: Schriftarten

Verwende die interne Bibliothek Deines Themes, da Shopify eine große Auswahl an Schriftarten dort schon zur Verfügung stellt. Sie wird schneller geladen als jede andere benutzerdefinierte Schriftart.

Fazit

Als gute Praxis sollten Händler/innen die Anzahl der Apps, die sie zu einem bestimmten Zeitpunkt in ihrem Shop installiert haben, immer wieder überprüfen. Wenn Du eine neue App hinzufügst, solltest du die Vor- und Nachteile abwägen und eine Entscheidung treffen. Diskutiere in einem Shopify Forum oder frage Deinen Entwickler, ob diese App wirklich gut ist, ob Du sie wirklich brauchst oder ob sie besser mit einem Theme-Tweak erledigt werden kann. 

Behalte außerdem die oben genannte Punkte im Auge. Wenn Du dies beherzigst, bist Du schon auf einem sehr guten Weg was die Shopify Pagespeed Optimierung angeht. Wünschst Du Dir jedoch einen erfahrenen Blick auf Deinen Shop, Deine Apps und möchtest mehr aus allem heraus holen, dann scheue Dich nicht mit mir Kontakt aufzunehmen. 

Hey, ich bin Florian.

Hast Du Fragen rund um das Thema Shopify und E-Commerce? Lass uns in Kontakt treten und wir finden heraus ob ich Dir helfen kann, Dein Business im Onlinehandel weiter voranzubringen.

Florian Müller Shopify Ecommerce Freelancer