Probleme beim Aufrufen der Website und enorme Ladezeiten schrecken viele Kunden ab. Somit entsteht eine hohe Abbruchquote in deinem Shopify Shop. Das muss nicht sein!

81% der Deutschen besitzen ein Smartphone und surfen mobil. Daher muss deine Website mobile friendly gestaltet sein und sehr gut in Speed und Performance. Denn unterwegs hat niemand Lust auf lange Ladezeiten.

Speed und Performance - Verkürze deine Ladezeit, um mehr zu verkaufen

Auf mobilen Geräten genauso gut performen zu können, wie auf der Desktop-Version der Website, ist für viele Onlinehändler ein Problem. Meistens stehen die Zahlen beim PageSpeedInsights-Test nämlich auf Rot, d.h. sie liegen zwischen 0 und 49%.

Doch es gibt so einige Tricks, um dem entgegenzuwirken und die Usability für deine Kunden zu verbessern. Wir haben es getestet und verraten dir, wie auch du es schaffen kannst so ein Vorher-Nachher-Ergebnis zu erzielen:

1. Bilder komprimieren

Zuallererst klären wir, welches Dateiformat im Allgemeinen verwendet werden sollte. Wenn du qualitativ hochwertige und komplexe Grafiken veranschaulichen möchtest, eignet sich dafür immer ein PNG-Format. Der Nachteil ist allerdings, dass diese Dateien groß sind, da sie viele Bildinformationen speichern. 

Um aber deine Performance zu verbessern, solltest du auf JPG-Formate zurückgreifen. Beim Komprimieren und Umwandeln von Bildern in JPG werden bestimmte Bildinformationen gelöscht und das Bild verliert ein wenig an Qualität. Nichtsdestotrotz ist die Auflösung nach wie vor sehr gut und für die mobile Ansicht deines Onlineshops mehr als ausreichend. 

Bilder in JPG-Format brauchen viel weniger Zeit zum Laden und ermöglichen es deinen Kunden deinen Shop schneller zu erreichen.

Vorgehensweise unseres Shopify Expertenteams:

1. Suche im Shopify App Store nach Image Compression Apps
2. Wende die App an.
3. Auch wenn die Komprimierung nur wenige Bytes betrifft, hat es in der Summe gesehen einen hohen prozentualen Einsparungswert.

Unser Shopify Developer Jan hat übrigens ein passendes Video für dich erstellt, in welchem du noch mehr zum Thema Bilder komprimieren und die unterschiedlichen Auswirkungen davon lernst. Höchst empfehlenswert: 

2. Lazy Loading

Bilddateien scheinen der Hauptgrund für die lange Wartezeit zu sein. Außer dem Komprimieren gibt es noch die Möglichkeit des Lazy Loadings, um weitere Ladezeit einzusparen.

Diese Funktion ist gerade für Websites mit vielen Bildern vorteilhaft. Fotos und Bilder, die below-the-fold, also im nicht auf den ersten Blick sichtbaren Bereich der Website auftauchen, werden nicht beim Aufruf des Shops geladen, sondern erst, wenn man an die entsprechende Stelle scrollt. Dies hat natürlich den Vorteil, dass deine Seite schneller lädt und Fotos nur bei Bedarf anzeigt. 

Vorgehensweise unseres Shopify Expertenteams:

1. Prüfe, ob dein Theme bereits Lazy Loading integriert hat. Wenn du den unten abgebildeten Hinweis „Nicht sichtbare Bilder aufschieben“ im Speedtest siehst, hat dein Theme KEIN Lazy Loading integriert.
2. Falls nein, integriere die Lazy Loading Funktion im Theme Code. Dies ist in der Regel nur durch einen Entwickler zu erledigen.

3. AMP-Seiten

Die unter Google laufenden Accelerated Mobile Pages (AMP) sind Seiten, die dazu dienen, Traffic einzufangen und Usern Websiteinhalte schneller zur Verfügung zu stellen. Die wichtigsten Bestandteile einer AMP-Seite werden auf ein Google Netzwerk geladen und bei Bedarf von dort schnell abgerufen. 

AMP-Seiten lassen sich einfach über eine App erstellen. In den Suchmaschinenergebnissen werden diese durch einen kleinen Blitz neben der URL dargestellt.

Sobald der Kunde darauf klickt, gelangt er auf eine "abgespeckte" Version deiner Website mit Google-URL. Sollte er den Produktkauf fortsetzen wollen, wird er automatisch nach dem Klick auf den „in den Warenkorb legen”-Button zu deinem originalen Onlineshop geleitet.

 

Der Vorteil von AMP-Seiten ist, dass sie alle Bilder direkt auf Displaygröße anpassen und Lazy Loading integriert haben. Durch die Schnelligkeit der Seite und den Wiedererkennungswert durch das AMP-Symbol dienen sie deinem Shop als Eintrittspunkt aus den Suchmaschinenergebnissen, was dazu führt, dass sich deine Absprungrate verringert.

Vorgehensweise unseres Shopify Expertenteams:

1. Suche im Shopify App Store nach einer AMP App
2. Installiere die App und passe sie so weit es geht an dein Theme an.
3. Beachte, dass dabei nicht immer alle Funktionen deines Onlineshops mit eingebaut werden können (z.B. Grundpreise). Sprich in dem Fall mit dem Support der App. In vielen Fällen sind die App-Anbieter bereit diese Funktionen individuell deinen AMP-Seiten hinzuzufügen.
4. Teste, ob die AMP-Seiten, wie gewünscht, funktionieren und du die anderen Seiten deines Shops von dort auch weiterhin erreichen kannst.

4. Apps ausmisten

Jeder Onlinehändler kennt es: Mal hat man hier etwas ausprobiert und installiert, mal da deinstalliert und erneut installiert. So sammelte sich über Jahre Vieles an. Doch Apps, die man mittlerweile nicht mehr nutzt, schlummern immer noch in einer Ecke rum. Daher solltest du ordentlich ausmisten. 

Lösche Apps, die du nicht mehr brauchst. Auch wenn sie nicht in Gebrauch sind, wird deine Ladegeschwindigkeit beansprucht. Genauso verhält es sich mit vermeintlich deinstallierten Apps. Im Code stecken immer noch Restfragmente, die man nicht direkt erkennt. 

Vorgehensweise unseres Shopify Expertenteams:

1. Schaue in die Übersicht deiner Apps. Lösche die Apps, die du nicht mehr brauchst.
2. Schauen in deinen Themecode und prüfe, ob von den gelöschten Apps noch Restfragmente übrig geblieben sind. 
3. Lösche ebenfalls Restfragmente, die nicht in den Code passen oder die von deinstallierten Apps übrig geblieben sind

Für eine noch genauere Erklärung hat unser Shopify Developer Jan eine Schritt-für-Schritt-Anleitung als Video für dich parat. Schau rein und setze es direkt um:

Fazit

Einige der Anpassungen sind natürlich stark Kundenabhängig. Je nachdem, welches Theme du benutzt, kann beispielsweise das Lazy Loading bereits integriert sein.

Um deine Ladezeit zu optimieren, solltest du als Erstes dein Pagespeed Ergebnis checken, um nach den Anpassungen ein aussagekräftiges Vergleichsergebnis zu haben. Dann erfolgen die notwendigen Schritte: Bilder komprimieren, ggf. Lazy Loading integrieren, AMP App installieren und unnötige Apps aussortieren, die dich nur Speed kosten.

Dies klingt zunächst aufwändig, führt aber langfristig zu weniger Abbrüchen und somit zu höheren Umsätzen!

Nicht nur die Optimierung von Speed und Performance sind wichtig, auch die SEO solltest du für mehr Sichtbarkeit und höhere Umsätze immer im Blick haben.

Lesetipp: „Shopify SEO - 11 Tipps, für mehr organische Sichtbarkeit“

Ansonsten hat unser Shopify Developer Jan in seinem 3. Speed Video noch ein paar ergänzende Tipps zu den vorgestellten AMP-Seiten, sowie zur Komprimierung deines Themecodes, falls du ein wenig am "Basteln" interessiert bist. Schau also gerne auch da nochmal vorbei: