Der ultimative Guide zur Shopify Ladezeitenoptimierung

Thumbnail Shopify Ladezeitenoptimierung Blogbeitrag

Verfasst von

Lucas Folz

Lucas Folz

Gr├╝nder von YARU

Inhaltsverzeichnis

Kostenlose Erstberatung sichern

Bereit mehr Umsatz mit deinem Shop zu generieren?

Lass uns gemeinsam den n├Ąchsten Schritt machen. In unserem kostenlosen Analysegespr├Ąch finden wir ungenutzte Potentiale. Garantiert!

Dein Shopify Shop l├Ądt langsam und hat schlechte Pagespeed Werte? Die Ladezeiten deines Online Shops sind ein wichtiger Faktor f├╝r SEO und deine Ums├Ątze. Als Rankingfaktor f├╝r Google beeinflusst die Pagespeed also deine Rankings und damit auch deine M├Âgliche Reichweite. Au├čerdem sorgen l├Ąngere Ladezeiten h├Ąufiger f├╝r Kaufabbr├╝che und kosten dich so direkten Umsatz. Wir haben bereits die Ladezeiten von einigen Shopify Stores optimiert und helfen dir mit diesem Guide dabei den Pagespeed deines Shops zu verbessern.

  1. Das richtige Shopify Theme
  2. Bilder & Grafiken optimieren
  3. Das Design vereinfachen
  4. Server anfragen reduzieren
    1. Lazy Loading f├╝r nachrangiges Laden
    2. Apps optimieren
  5. CSS & Javascript reduzieren

Zusammenfassung

Warum solltest du deinen Shopify Shop Pagespeed optimieren?

Lange Ladezeiten sind frustrierend. Und weil frustrierte Kunden weniger Motivation haben in deinem Shopify Store einzukaufen, sollten wir alles tun um den Pagespeed deines Online Shops zu verbessern. Ladezeiten haben insbesondere direkte oder indirekten Einfluss auf:

– Conversion Rate
– Suchmaschinenrankings/SEO
– Anzahl der Besucher
– Verweildauer auf der Webseite
– Umsatz

So hat Zalando in einer Case Studie mit einem A/B-Testing eine Steigerung des Umsatzes pro Kunden um 0,7% feststellen k├Ânnen, wenn die Ladezeiten um jeweils 100 Milisekunden, also 0,1 Sekunden verbessert wurde. Eine Verbesserung der Ladezeiten um eine ganze Sekunde kann also sehr starke Einfluss auf die Ums├Ątze deines Online Shops haben. Auch wir konnten bei unseren Kunden Umsatzverbesserungen nach erfolgreicher Shopify Ladezeitenoptimierung messen.

Doch auch auf das SEO Ranking hat die Pagespeed direkten Einfluss. Nicht zuletzt seit der Einf├╝hrung der Core Web Vitals von Google nehmen die Ladezeiten direkten Einfluss auf deine Suchmaschinenplatzierungen. Es lohnt sich also!

Faktoren, die die Ladezeiten deines Shopify Shops beeinflussen

Es gibt viele Faktoren, die f├╝r schlechte Ladezeiten deines Shopify Stores verantwortlich sein k├Ânnen. Einige davon k├Ânnen wir optimieren, andere liegen nicht in unserer Hand. Hierzu geh├Âren zum Beispiel die Shopify Infrastruktur oder das Endger├Ąt/die Internetverbindung des Endnutzers. Beeinflussen k├Ânnen wir allerdings folgende Faktoren:

– Dein Shopify Theme
– Deine genutzten Apps
– Die Anzahl und Strukturierung deiner Kategorien und Filter
– Das Design deiner Webseite
– Die Schriftarten
– Anzahl und Gr├Â├če von Fotos & Videos
– Die Anzahl von HTTP Requests
– Die Anzahl der Weiterleitungen
– Zu gro├če JavaScript & CSS Dateien
– ├ťberfl├╝ssiger Liquid Code
– Tracking (z.B. Google Analytics, Tag Manager etc.)

Vorbereitung: Wie ist der Zustand deiner Ladezeiten?

Shopify als Anbieter f├╝r deine eCommerce Software ist nat├╝rlich bewusst, wie die Ladezeiten den Erfolg deines Shops beeinflussen. Deshalb bringt Shopify auch schon von Haus aus L├Âsungen mit, die auch die Ladezeit im Blick haben. Durch die Cloud-basierte Infrastruktur von Shopify l├Ądt deine Seite nicht nur in Deutschland schnell, sondern auf der ganzen Welt. Ein integriertes CDN (Content Delivery Network) ist daf├╝r zust├Ąndig, dass Dateien wie Produktbilder und Videos von extern geladen werden. Das Browser Caching von Shopify sorgt au├čerdem daf├╝r, dass bestimmte Daten und Dateien auf den Browsern der Endnutzer zwischengespeichert werden und so schneller abgerufen werden k├Ânnen. So reduziert sich die Ladezeit deutlich, wenn ein Nutzer deinen Online Shop ein zweites Mal aufruft.

Au├čerdem hat Shopify im Jahr 2020 eine verbesserte Version der Theme Engine ver├Âffentlicht, welche Ladzeiten um 40-200% verbessert (Quelle: Shopify Reunite 2020). Wir k├Ânnen uns also sicher sein, dass Shopify sich der Wichtigkeit der Ladezeiten bewusst ist und auch in Zukunft daran arbeitet. Nebenbei sollten wir aber nat├╝rlich auch unsere Aufgaben erledigen und verhindern, dass dein Shopify Shop zu langsam l├Ądt.

Tools f├╝r die Analyse deiner Shopify Ladezeiten

Es gibt verschiedene Tools, die wir zu Hilfe nehmen k├Ânnen um die Ladezeiten unseres Shopify Shops zu ├╝berpr├╝fen und herauszufinden, wie denn ├╝berhaupt der Zustand unseres Shops ist. Die Tools, die wir euch hier zeigen, zeigen uns zum einen wie schnell oder langsam unser Shopify Shop l├Ądt und geben uns teilweise schon hilfreiche Anhaltspunkte, welche Faktoren wir optimieren sollten.

Der Shopify Ladezeitenreport

Der Ladezeitenreport von Shopify zeigt dir, wie dein Shop bei den Ladezeiten im Vergleich zu anderen Shopify Stores aus deiner Branche abschneidet. Au├čerdem gibt er uns eine erste Auskunft ├╝ber die allgemeine Schnelligkeit (basierend auf dem Google Lighthouse performance scoring).

Speed Score

Der Speed Score gibt dir Auskunft dar├╝ber, wie dein Shop in einem von Shopify gew├Ąhlten Umfeld testet. Hierbei werden die Ladezeiten von Kategorie-, Produktseiten und weiteren relevanten Seiten deines Shops kombiniert getestet und ein Gesamtrating erstellt. Da Google seit 2021 komplett nach dem mobile first Ansatz bewertet, wird das Lighthouse performance scoring auch auf Basis deiner mobilen Webseite erstellt.

Shopify bewertet deinen Speed Score auf einer Skala von 1-100. Je h├Âher dein Speed Score, desto schneller l├Ądt dein Online Shop.

Warum habe ich keinen Speedscore?: Der Speedscore kann nur gemessen werden, wenn dein Shop frei zug├Ąnglich ist, da Google Lighthouse quasi einen Besuch in deinem Shop simuliert. Solltest du also noch in der im Entwicklungsmodus sein und deinen Shop deshalb mit einem Passwort gesch├╝tzt haben ist eventuell noch kein Speedscore verf├╝gbar. Gleiches gilt, wenn du den Passwortschutz erst vor wenigen Tagen entfernt hast.

Shopify Speed Ranking Ôëá Speed Score. Im Gegensatz zum Speed Score gibt das Speed Ranking nicht die absolute Performance deines Shops, sondern die relative Ladezeit im Vergleich zu ├Ąhnlichen Stores an. ├ähnliche Shopify Shops bedeutet hierbei, dass es sich um Shops aus deiner Branche mit einer vergleichbaren Gr├Â├če handelt. Hierzu werden Ums├Ątze, Produktanzahl etc. verglichen.

Google Pagespeed Insights (PSI)

Google Pagespeed Insights ist das hauseigene Tool von Google, welches uns eine erste Auskunft ├╝ber die Ladezeiten gibt. Der Score, den Google PSI angibt, ist dabei f├╝r uns vor Allem eine Tendenz um ein Gef├╝hl zu erhalten, wie langsam bzw. schnell die Ladezeiten unseres Shopify Shops sind. Google testet n├Ąmlich hier auch Faktoren, auf die wir durch die technische Struktur von Shopify als Shopsystem keinen Einfluss haben. Au├čerdem stehen sich Ladezeiten und eine gute Usability auch teilweise im Weg. Funktionen, die f├╝r den Nutzer wichtig und optisch ansprechend sind k├Ânnen sich negativ auf die Performance auswirken. Hier gilt es also abzuw├Ągen, welche Optimierungen durchgef├╝hrt werden und welche nicht.

Google w├╝nscht sich im Idealfall einen Google PSI Score von >90. Dieser wird aber mit Shopify schwierig bis unm├Âglich zu erreichen sein. Auch nicht f├╝r deine Konkurrenz. Also keine Panik, wenn dein Speedscore nicht an der 100 kratzt. Solltest du allerdings einen Wert von unter 50 erreichen ist dringend Handlungsbedarf.

F├╝r Code Experten: Shopify Theme Inspector f├╝r Chrome

Dieses Tool ist vor Allem interessant f├╝r Shop-Betreiber, die sich selbst mit Code auskennen. Der Shopify Theme Inspector analysiert den Code deines Themes und zeigt dir in der ├ťbersicht an, welche Teile deines Themes besonders viel Ladezeit verschlingen. Konkret k├Ânnen wir die Ladezeiten von einzelnen Liquid Dateien bzw. Ausf├╝hrungen sehen. Sollten diese sehr gro├č sein, kann es sein, dass der Liquid Code an der Stelle zu komplex f├╝r die Funktion ist, zu viele Abh├Ąngigkeiten enthalten sind oder die Liquids einen Loop erzeugen. Wenn du also selbst programmieren kannst, kannst du dir im Anschluss die einzelnen Dateien anschauen und ├╝berlegen wo sich der Code optimieren l├Ąsst.

Shopify Ladezeiten Optimieren – Jetzt geht┬┤s an die Arbeit

Ein schnelles Shopify Theme

Schon bei der Auswahl des richtigen Shopify Themes kannst du viel Richtig, aber eben auch falsch machen. Deshalb solltest du schon bei der Auswahl des Themes nicht nur auf die Optik, sondern auch auf die Ladezeiten achten. Ein schlanker Code und kleine Theme-Gr├Â├čen sind eine gute Grundlage f├╝r einen schnellen Shopify Shop.

Achte also bei deinem Shopify Theme auf folgendes

  • Kaufe ein Theme, dass nur die Funktionen hat, die du auch ben├Âtigst. Es gibt mittlerweile unz├Ąhlige Shopify Themes, die eine Masse an Funktionen zur Verkaufs├Ârderung haben. Stelle dir aber vorher die Frage, welche Funktionen du davon ├╝berhaupt verwenden m├Âchtest, bzw. welche dieser Funktionen deinen Kunden einen Mehrwert bieten. Denn: Je mehr Funktionen dein Theme anbietet, desto gr├Â├čer ist es und desto langsamer die Ladezeiten.
  • Shopify 2.0: Ist ein Must have im Jahr 2022. Die neue Technik wurde 2021 von Shopify eingef├╝hrt und bietet neben neuen Funktionen Optimierungen in der Ladegeschwindigkeit. Wenn dein Theme also schon auf Shopify 2.0 setzt ist die Wahrscheinlichkeit auch hoch, dass dieses regelm├Ą├čig aktualisiert wird und keine alte Technik benutzt.

Optimierung von Bildern & Grafiken

Die Optimierung deiner Bilder sind einer der Schl├╝sselfaktoren bei der Shopify Ladezeitenoptimierung. Da sie aber Emotionen wecken und zum Kauf ├╝berzeugen k├Ânnen wir sie nicht einfach entfernen. Um die Ladezeiten der Bilder aber zu optimieren k├Ânnen wir folgendes tun:

  • Bilder komprimieren
  • Dateitypen anpassen

Die Bilderkomprimierung ist oft der gr├Â├čte und st├Ąrkste Faktor, den wir bei den von uns optimierten Shops bemerken. Mithilfe von externen Tools l├Ąsst sich die Dateigr├Â├če von Bildern oft drastisch reduzieren ohne, dass das Bild dadurch gro├čartig an Qualit├Ąt einb├╝├čt.

Wenn dein Shop bereits online ist und gro├če Ma├čen an Bildern hat solltest du eine Shopify App benutzen um deine Bilder zu komprimieren. Wir empfehlen hier die Nutzung der Apps TinyIMG oder Crush.pics. Beide Apps komprimieren Bilder, welche bereits in deinem Shopify Store sind und sorgen so f├╝r kleinere Dateien.

Einige Fotos komprimieren diese Apps allerdings nicht (in der kostenlosen Version). Bei diesen Fotos kannst du manuell Hand anlegen und die Seite tinyPNG nutzen. Diese solltest du auch nutzen, wenn du neue Fotos in deinen Online Shop hochl├Ądst. Hier kannst du Fotos hochladen, sie werden komprimiert und im Anschluss kannst du die komprimierten Fotos direkt in Shopify hochladen.

Der richtige Dateityp deiner Bilder kann einen echten Unterschied bei der Gr├Â├če der Datei machen. Shopify supported JPG, PNG, GIF und SVG Dateien. Je nach Einsatzgebiet k├Ânnen die jeweiligen Dateitypen eingesetzt werden.

JPG ist meistens das richtige Format bei Bildern wie Produktfotos oder andere Fotografien.

SVG (Vektorgrafiken) sind sehr gut einsetzbar bei Grafiken, Logos oder Icons. Denn diese lassen sich ohne optische Einschr├Ąnkungen skalieren.

PNG solltest du bei Grafiken mit Text benutzen oder wenn du keine SVG Dateien einsetzen kannst.

Das Design vereinfachen

Ein Schritt der bei der Shopify Ladezeitenoptimierung eigentlich sehr logisch ist, aber trotzdem von vielen Shop-Betreibern vernachl├Ąssigt wird ist das Design. Komplizierte Designs, lange Seiten und gro├če Kategorien mit zu vielen Filtern machen die Seite schwer und komplex. Du solltest dir deshalb schon beim Aufbau der Seite genau ├╝berlegen, welche Inhalte dem Nutzer wirklich weiter helfen und einen Mehrwert bieten. Das wird nicht nur deine Ladezeiten, sondern auch deine Usability verbessern

Allgemeine Design-Grunds├Ątze f├╝r schnelle Shopify Shops

Beim Aufbau der Seiten beginnt die Ladezeitenoptimierung deines Online-Shops. Je besser du deine Marke und deine Produkte pr├Ąsentierst, desto besser verkauft sich dein Produkt auch. Aber weniger ist manchmal mehr. ├ťberladene Seiten k├Ânnen nicht nur den Nutzer ├╝berfordern, sondern auch f├╝r lange Ladezeiten sorgen. Folgende Punkte kannst du befolgen um dein Design „leichter“ zu machen:

  • Hero Bilder statt Slider: Der Slider im Hero Bereich von Online-Shops erfreut sich gro├čer Beliebtheit. Vor Allem aber bei Shop Betreibern. Verschiedene Tests haben gezeigt, dass gerade mobile Nutzer sich gar nicht alle Seiten deines Sliders anschauen. Durch die Technik hinter dem Slider sorgt dieser allerdings f├╝r lange Ladezeiten und ist auch oft f├╝r Ladeschleifen, die deine Seite langsamer machen verantwortlich. Wir empfehlen dir daher: Gestalte den Hero Bereich klar und ├╝berzeugend. Aber entscheide dich f├╝r ein Bild und eine Aussage. Baue stattdessen deine Startseite so auf, dass die weiteren „Banner“ im weiteren Verlauf der Startseite erscheinen und den Kunden abholen.
  • Produkt-Karussells reduzieren: Einige Shops, die wir in der Vergangenheit optimiert haben, haben auf der Startseite jede Menge Produkt-Karussells mit einer hohen Anzahl von Produkten enthalten. Auch diese sind technisch gesehen sehr verstrickt und verlangsamen deine Seite. Reduziere auf der Startseite am Besten auf maximal 1-2 Produkt-Karussels mit echten Bestsellern oder Neuheiten, anstatt hier gleich dein ganzes Inventar zu pr├Ąsentieren.
  • Unn├Âtige Sections entfernen: Wie bereits oben beschrieben laden Seiten mit mehr Inhalten nat├╝rlich l├Ąnger als Seiten, die weniger Texte und Dateien enthalten. Mache also ein Audit deiner einzelnen Unterseiten und nimm gegebenenfalls deine Analytics Daten oder A/B Tests zur Hilfe um nicht nur auf ├ťberlegungen, sondern auf Fakten zu entscheiden welche Inhalte die Conversion wirklich beeinflussen. Inhalte, die mehr Erkl├Ąrung ben├Âtigen kannst du ganz bequem mit einem „Mehr erfahren/Mehr lesen“ link auf eine neue Unterseite oder einen Blogartikel weiterleiten.
  • Verbesserung der Kategoriestruktur & Vereinfachung der Filter: Eine verst├Ąndliche Kategoriestruktur macht es dem Nutzer einfach die richtigen Produkte zu finden. Je nach Produktanzahl in deinem Shop k├Ânnen Filter zus├Ątzlich daf├╝r sorgen, dass der Kunde schnell am Ziel ist. Viele Stores enthalten aber Filter, die nicht wirklich sinnvoll sind um eine Kaufentscheidung zu treffen. Reduziere also wenn m├Âglich die Anzahl der Filter um die Ladezeiten zu verbessern.
  • Mega Men├╝s entfernen: Mega Men├╝s sind im Trend und sehen toll aus. Stelle dir aber die Frage, ob du es auf deiner Seite wirklich brauchst und ob es dem Nutzer wirklich weiterhilft. Wenn du diese Frage mit „Ja“ beantworten kannst, behalte dein Mega Men├╝. Wenn du dir nicht sicher bist solltest du mal ein A/B Testing durchf├╝hren und pr├╝fen, ob es wirklich einen Mehrwert f├╝r deine Kunden bietet.
  • Mobile First: Sp├Ątestens seit Einf├╝hrung des Mobile First Index crawlt Google nur noch mobile Seiten f├╝r die Suchmaschinenrankings. Aber nicht nur deshalb solltest du den Fokus auf das mobile Design deines Shops legen. Im Q2 2022 wurden 55% der eCommerce K├Ąufe in Deutschland mit dem Smartphone get├Ątigt. Gerade auf den kleineren Bildschirmen ist ein reduziertes Design und klare Kommunikation deshalb noch wichtiger.
(Quelle: https://public.tableau.com/app/profile/salesforcecommercecloud/viz/SalesforceShoppingIndex/SalesforceShoppingIndex)

Schriftarten

Die richtige Schriftart zu finden ist ein Thema f├╝r sich. Wenn man aus den Ladezeiten das Beste herausholen m├Âchte sollte man eine der klassischen System Fonts nutzen. Hierzu geh├Âren:

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

Alternativ lassen sich unter den Google Fonts (welche in Shopify integriert sind) auch Schriftarten ausw├Ąhlen, die h├Ąufiger genutzt werden. Diese k├Ânnte dann im Zwischenspeicher des Nutzers sein, wenn dieser in letzter Zeit eine Webseite besucht hat, die die gleiche Font nutzt.

Als Brand Agentur wissen wir aber auch, wie wichtig die Schriftart f├╝r das Design und die Wiedererkennbarkeit deiner Marke sein kann. Solltest du deshalb schon eine Schriftart f├╝r deine Brand festgelegt und diese auch weiter nutzen wollen lassen sich die Ladezeiten mit einem kleinen Umweg auch optimieren. Hierf├╝r ben├Âtigst du aber Programmierkenntnisse oder eine passende Shopify Agentur (wie uns), die sich mit CSS und Liquid auskennt. Hierf├╝r kann die font-display Funktion genutzt werden. Diese sorgt daf├╝r, dass w├Ąhrend der Ladezeiten eine System Font verwendet wird und diese sich automatisch ├Ąndert, sobald deine Schriftart geladen ist.

Server Anfragen reduzieren

Wenn das Endger├Ąt des Nutzers, der deine Seite betritt weniger Dateien laden muss, wird dein Online Shop schneller geladen. Klingt logisch oder? Aber wie k├Ânnen wir das erreichen? Zur Shopify Ladezeitenoptimierung haben wir hierf├╝r zwei m├Âgliche L├Âsungen:

  • Lazy Loading – Inhalte nachladen
  • Apps austauschen/optimieren, die die Ladezeiten verlangsamen

Lazy Loading – Bestimmte Inhalte nachladen

Lazy Loading ist einer der Garanten f├╝r eine erfolgreiche Shopify Ladezeitenoptimierung. Grunds├Ątzlich l├Ądt der Nutzer die aufgerufene Seite deines Shops sofort beim Betreten. Durch Lazy Loading werden bestimmte Inhalte wie Grafiken oder Bilder also erst geladen, wenn der User scrollt und diese Dateien ins Sichtfeld des Nutzers geraten. Also gerade bei Seiten die viele Bilder oder gro├če Produktkataloge enthalten kann Lazy Loading die Ladezeiten drastisch reduzieren.

Es gibt zwei Wege Lazy Loading zu implementieren. Wie wir gleich noch erfahren werden, ist der Einsatz von vielen Apps ebenfalls ein Problem bei der Ladezeitenoptimierung in Shopify. Wer allerdings gar keine Ahnung von Code hat und auf keinen Fall einen Dienstleister engagieren will kann mit Apps wie Loadify die Funktion zu seinem Shop hinzuf├╝gen.

Wer auch hier den idealsten Weg gehen m├Âchte implementiert die lazysizes Bibliothek in sein Shopify Theme. Eine detaillierte Anleitung zur Integration von Lazy Loading in deinem Shop findest du direkt unter dem Link. Solltest du nicht Sicher im Umgang mit Theme Code sein kannst du auch hier einen Termin mit uns vereinbaren und wir ├╝bernehmen die Implementierung von Lazy Load oder gar die ganze Shopify Ladezeitenoptimierung f├╝r dich.

Das Problem mit den Shopify Apps

Shopify Apps sind perfekt um mit m├Âglichst wenig Programmieraufwand viele Funktionen f├╝r die Nutzer oder auch f├╝r dich als Shop-Betreiber bereitzustellen. Leider haben sie nicht nur den Nachteil, dass sie oft deine monatlichen Kosten in ordentliche H├Âhen treiben. Sondern auch die Ladezeiten deines Shopify Shops beeinflussen Apps sehr stark. Du solltest dir deshalb ganz genau ├╝berlegen, welche Apps du wirklich ben├Âtigst und welche zusammen fassen oder durch kleinere Anpassungen am Theme ganz ersetzen lassen.

Shopify Apps deinstallieren/ersetzen: ├ťberpr├╝fe also als Erstes deine Apps und ├╝berlege dir auf welche Apps du im Zweifel komplett verzichten kannst. Falls du einen Shopify Experten kennst, kann er dir sicher auch sagen, welche Apps sich leicht durch Anpassungen ersetzen lassen ohne das jedes mal externer Code geladen werden muss. Mit Hilfe von A/B Testing oder der Nutzung von Tools wie Google Analytics kannst du zum Beispiel herausfinden welche Apps bzw. Funktionen deine Kunden wirklich nutzen.

Alten App Code l├Âschen: Die Struktur von Shopify bringt es leider mit sich, dass Apps selbst nach der Deinstallation teilweise noch „Restcode“ in deinem Theme lassen. Solltest du also in der Vergangenheit schonmal Apps ausprobiert haben, die du nicht mehr nutzt oder jetzt im Zuge der Ladezeitenoptimierung Apps gel├Âscht haben.

Um herauszufinden, welche Apps das sein k├Ânnten, kannst du die Entwicklerkonsole in deinem Browser ├Âffnen und dir die bestehenden Verbindungen im „Network“ Tab anschauen. Solltest du in der Liste also einen Namen finden, der zu einer App passt, die du bereits gel├Âscht hast, befindet sich hier wohl noch Code in deinem Theme.

Der Prozess diesen Code zu entfernen ist teilweise sehr m├╝hselig. Ein guter Anhaltspunkt um diese Codereste zu finden ist aber die theme.liquid Datei, auch wenn es nicht der einzige Ort sein muss an dem sich noch ├ťberbleibsel einer alten App befinden.

Das Laden von Apps einschr├Ąnken: Es ist m├Âglich bestimmte Apps nur auf Seiten zu laden, auf denen sie auch wirklich ben├Âtigt werden. An der Stelle wird es auch wieder ein bisschen komplexer. Wir m├╝ssen n├Ąmlich wieder HTML und Liquid Code bearbeiten. Au├čerdem m├╝ssen einige Tests durchgef├╝hrt werden, damit wir sicher gehen k├Ânnen, dass die Seite weiterhin funktioniert. Hier musst du also vorsichtig sein und solltest die ├änderungen definitiv nicht an einem Live Theme durchf├╝hren. Erstelle also vorher eine Kopie deines Themes in der du arbeiten kannst.

Viele Apps laden ihren Code ├╝ber die theme.liquid Datei. Sollte eine App, die du benutzt aber nur z.B. auf deiner Kategorie- oder Produktseite zum Einsatz kommen, sollte das Script auch nur auf den jeweiligen Seiten laden. F├╝ge im Beispiel der Produktseite also folgenden Code hinzu:

{% if template == 'product' %}
   <!-- App now only loads on the Product pages -->
      {% include 'app-snippet' %}
{% endif %}

CSS & Javascript reduzieren

CSS und Javascript Dateien sind Teil jeder Webseite. Sie sorgen f├╝r das Styling deiner Seite (CSS) oder beeinflussen, wie deine Seite sich verh├Ąlt (JS). Sie beinhalten also direkt Anweisungen f├╝r den Code deiner Seite. Diese Dateien zusammenzufassen bzw. zu reduzieren bedeutet ├╝berfl├╝ssigen Code zu entfernen, damit weniger Code geladen wird. Auch dieser Schritt ist deshalb essentiell f├╝r die Shopify Ladezeitenoptimierung.

Bevor du diesen Code allerdings anpasst, sorge f├╝r ein Back Up deines Themes und bewahre im Idealfall die urspr├╝nglichen CSS & JS Dateien auf, falls ein Entwickler diese sp├Ąter nochmal ben├Âtigt.

Auch hier gilt wieder: Wenn du keine Erfahrung mit dem Lesen und schreiben von Code hast gibt es ein oder zwei Apps, die dir die Arbeit teilweise abnehmen k├Ânnen. Der File Optimizer reduziert CSS & JavaScript Dateien. Da die Optimierung aber teilweise sehr individuell ist, kann es manchmal bei einer Standard-L├Âsung durch eine App zu Fehlern kommen. Solltest du also sicher im Umgang mit Code sein oder einen Shopify Experten zur Hand haben solltest du die CSS und JS-Dateien selbst optimieren. Dieses Tool kann dir zumindest f├╝r die Optimierung des JavaScript Codes eine Hilfe sein.

Zusammenfassung

Die Shopify Ladezeitenoptimierung kann je nach Shop etwas an Zeit beanspruchen. Schnellere Ladezeiten, weniger Kaufabbr├╝che, eine bessere User Experience und bessere Rankings k├Ânnen aber den Umsatz und die Reichweite deines Shopify Stores nachhaltig verbessern. Die Pagespeed Optimierung in Shopify ist deshalb ein unerl├Ąsslicher Prozess, wenn dein Shop erfolgreicher werden soll.

Solltest du im ersten Schritt aus m├Âglichst wenig Aufwand gute Verbesserungen erzielen empfehlen wir dir vor Allem mit folgenden Schritten zu beginnen:

  • Bilderoptimierung
  • Lazy Loading
  • Hero Slider & Karussels ersetzen

Schaue dir vor Allem bei der Optimierung deiner Seite immer wieder den gesamten Surf- und Kaufprozess deiner potentiellen Kunden an um zu erkennen, welche Inhalte ├╝berfl├╝ssig sind. A/B Testings und das erheben von Daten sollten deine Gedanken immer unterst├╝tzen. Denn Daten sind Fakten!