Need for Speed: So einfach optimierst du deine Webseitengeschwindigkeit mit Shopify

Die Webseitengeschwindigkeit ist ein sehr wichtiger Indikator für die Nutzererfahrung deines Onlineshops. Lädt eine Seite zu lange, verlieren die Besucher schnell das Interesse und tendieren dazu diese Page schnellstens zu verlassen. Doch wie schnell passiert das?

Um sicherzugehen, dass die Nutzer ihre Geduld nicht verlieren, sollte deine Seite in 400 Millisekunden geladen sein. Das gleicht ungefähr dem Blinzeln eines Auges und klingt verrückt, doch ist von enormer Wichtigkeit für den Erfolg deines Unternehmens.

Laut einer Studie von Gomez.com sagen 79 % der Online Käufer, dass sie bei einem Webshop mit schlechter Ladeleistung nicht wieder kaufen würden. 40 % erzählen davon ihren Freunden und Bekannten. Und zugegeben: wenn eine Seite langsam lädt, suggeriert es geringe Professionalität, wir werden misstrauisch und bauen kein Vertrauen zu diesem Unternehmen auf.

Auch für mobile Webseiten sind die Leistungsanforderungen drastisch gestiegen. Immer mehr Nutzer verlagern ihre Online-Aktivitäten auf das Smartphone und dabei wird nichts verziehen.

Man wartet ja schließlich nicht auf einen Bus! So erwarten wir von unserem Handy, dass es uns das Leben so leicht und angenehm macht wie möglich, inzwischen sogar noch schneller als am Desktop.

In diesem Beitrag lernst du:

Warum die Ladegeschwindigkeit der Webseite wichtig ist

• Langsamkeit wird bestraft

Woher du weißt, ob deine Webseite zu langsam ist

Was du tun kannst, wenn deine Webseite zu langsam ist

• Google Analytics Berichte 
• PageSpeed Insights
• Google Tag Manager
• Bildgrößen
• Serverkapazität
• Break Points für mobile Seiten

Was bedeutet die Wichtigkeit der Webseitengeschwindigkeit für dich als Shopbetreiber?

Suchmaschinen wie Google - als Wärter der Nützlichkeit von Suchergebnissen - sind natürlich nicht erfreut über die Unzufriedenheit ihrer Nutzer und sind ständig dabei, ihre Suche zu optimieren. So ist es kein Wunder, dass Mankos in Sachen Webseitengeschwindigkeit bestraft werden.

Wer zu langsam ist, den bestraft das Leben

Google und Co. durchforsten deinen Onlineshop, um deinen Qualitätsscore und somit das Ranking für deine Werbeanzeigen festzustellen. Wenn die Nutzererfahrung deines Shops eher bedauerlich ist, wird dir ein niedriger Qualitätsscore zugeschrieben.

Dein Shopify Store erreicht kein gutes Ranking und deine Chance in den Suchergebnissen für deine gewünschten Keywords aufzutauchen, ist ziemlich gering. 

Auch im Wettbewerb um die bezahlten Werbeanzeigen spielt der Qualitätsscore eine große Rolle. Um dort nur den Hauch einer Chance zu haben, die beliebten Plätze oben in der Suche zu ergattern, müsstest du also dein Werbebudget erhöhen, wenn die Qualität nicht so viel hergibt.

Das heißt, mit einem Pagespeed-optimierten Shop kannst du nicht nur deine Conversion Rate steigern, du reduzierst indirekt auch unnötig hohe Werbeausgaben.

 

Woher weiß ich, dass meine Webseite zu langsam lädt?

Falls du dich schon mit einigen unserer SEO Artikel vertraut gemacht hast, bist du bereits stolzer Besitzer eines Google Analytics Kontos. Wenn nicht, dann hol es unbedingt nach.

1. Einst installiert, gehe nun auf den Verhaltensbericht, wähle Site Speed aus und klicke Übersicht. Dieser Wunderbericht zeigt dir alle relevanten Daten, die mit der Webseitengeschwindigkeit deines Shops zusammenhängen. Dazu gehört die durchschnittliche Ladegeschwindigkeit deiner Besucher oder auch die durchschnittliche Server Antwortgeschwindigkeit.
   
   
   
   
2. Schau dir als Nächstes die Page Timings an. Hier wird dein Shop Seite für Seite auf die jeweilige Geschwindigkeit heruntergebrochen. Durch die grün und rot markierten Balken siehst du sofort, welche Seiten gut funktionieren und welche zu langsam sind.

 

Was tun, wenn die Webseite zu langsam lädt?  

Es gibt eine Reihe von Möglichkeiten, die du ergreifen kannst, um die Performance deines Shops auf Vordermann zu bringen. Im Folgenden stelle ich dir diese vor:

• Google Analytics Berichte
• PageSpeed Insights
• Google Tag Manager 
• Bildgrößen
• Serverkapazität
• Breakpoints für mobile Seiten

Google Analytics Berichte zur Hilfe der Problemidentifikation

In Google Analytics klicke auf Speed Empfehlungen. Hier erfährst du genau, was du zu tun hast, um deine Webseitengeschwindigkeit zu steigern, denn Google Analytics leitet dich mit Anweisungen da durch. Praktisch, nicht wahr?!

Beachte, dass dein Geschwindigkeitsscore nicht kleiner als 85 sein sollte, um im grünen Bereich zu bleiben.

PageSpeed Insights zur Optimierung des Shopify Shops

Neben Google Analytics gibt es auch weitere kostenlose Tools, die du nutzen kannst, um die Ladegeschwindigkeit deines Onlineshops zu verbessern. Da wäre zum Beispiel PageSpeed Insights.

Das ist ein praktisches, webbasiertes Tool, das dir nicht nur die Leistung deiner Webseitengeschwindigkeit anzeigt, sondern alle identifizierbaren Probleme und wie du sie beheben kannst.

PageSpeed Insights zeigt dir außerdem noch, wie gut die mobile Version deines Shopify Shops funktioniert. Auch kannst du das Tool benutzen, um deine Konkurrenz auszuspähen, indem du einfach die dazugehörige URL eingibst. So kannst du über ihre Webshop Makel erfahren und diese im eigenen Store meiden.

Google Tag Manager als Verwaltungstool für Tags

Benutzt du viele Marketing Tags (bspw. Analytics, Conversion Tracking, Remarketing, Retargeting usw.), um mehr über das Verhalten deiner Kunden zu erfahren? Gut, aber diese Tags können sich auch auf die Geschwindigkeit deines Shops auswirken und ihn verlangsamen.

Was tun? Verwende den Google Tag Manager, um Tags, die nicht mehr verwendet werden, zu entfernen. Verwalte außerdem alle Tags in einem Ort. Zuvor legst du dir ein GTM-Konto an und hinterlegst die nötigen Codes bei Shopify.

Alles, was du dafür tun musst:

1. Leg dir ein Google Tag Manager Konto an, um an den Code Snippet zu kommen, den du dann wiederum in deinem Shopify Store hinterlegen musst. Folge den Instruktionen des Google Tag Managers.
   
   
2. Füge den Universal Analytics Code aus deinem Google Analytics Konto in Shopify ein. Gehe dafür im Analytics Konto auf Property und Tracking Info und Tracking Code.    
   
   
   
   
3. Im Shopify Admin klicke auf Onlineshop, dann Einstellungen. Scrolle runter zur Google Analytics Sektion und füge den Code ein. 
   
   
   
   
4. Falls du bereits ein GTM-Konto hast, dann gehe in den Verwaltungsbereich und klicke auf Google Tag Manager installieren.
   
   
5. Kopiere den ersten Code im Tag Manager ohne <script> und </script> 
   
   
   
   
6. In deinem Shopify Verwaltungsbereich klicke Onlineshop und dann Einstellungen.
   
   
7. In der Google Analytics Sektion wähle Benutzerdefiniertes JavaScript hinzufügen und füge den vorher kopierten Code ein.
   
   
   
   
8. Du kannst ruhig ignorieren, dass im GTM darauf hingewiesen wird, den Code Schnipsel in den öffnenden <body> Tag einfügen zu müssen. Das betrifft nur die Browser, die JavaScript deaktiviert haben.
   
   
9. Damit der Checkout Prozess auch wirklich erfasst wird, kopiere den ganzen Google Tag Manager Snippet samt öffnenden und schließenden <script> und </script> Tags.
   
   
10. In Shopify Verwaltungsbereich klicke Einstellungen und Checkout.
    
    
11. Unter Bestellabwicklung füge den vorher kopierten Code in die Sektion Zusätzliche Nachrichten/Hinweise ein.
    
    
    
    
12. Sichere das Ganze mit Speichern.
    
    

Bildgrößen optimieren

50 bis 60 % des "Gesamtgewichts" einer Website steckt in den Bildern. Große Bilder können deinen Onlineshop ewig lang laden lassen und so viele potenzielle Kunden vom Kauf bei dir abschrecken.

Zum Glück gibt es eine Menge kostenloser Tools, mit denen du ganz einfach und schnell deine Bilder minimierst (die Bilder sollten nicht größer als 4000 × 2000 Pixel sein). So zum Beispiel mit Tynypng.com. 

Faule Windows Nutzer wie ich können sogar auf Paint zurückgreifen, um den Bildern die nötige Größe zu geben.

Schnelle Server verwenden

Eine gute Nutzererfahrung hängt sehr stark von der Schnelligkeit deiner Server-Hosts ab. Faktoren, die für die richtige Servergröße wichtig sind, sind zum Beispiel:

• der nötige Speicherplatz,
• die erwartete Wachstumsrate deines Onlineshops
• sowie die Serverauslastung.

Doch du hast Glück, denn für dich als Shopify Nutzer, bleibt nicht viel zu tun. Die Shopify Server sind so zuverlässig und belastbar, dass Shopify ihren Kunden eine Server-Funktionalität von 99,99 % zusichert. Check!

Breakpoints für mobile Nutzung

Der sogenannte Breakpoint, zu Deutsch Schaltpunkt, ist der Punkt, an dem die mobile Webseite ihre Größe anpasst, um mit der jeweiligen Browserkonfiguration, die dein Kunde verwendet, am besten abgestimmt zu sein.

Wenn eine mobile Seite nicht mehrere Breakpoints für unterschiedliche Browserkonfigurationen hat, dann wird die Geschwindigkeit der Seite, auf der dein Kunde gerade browst, auf dem Smartphone oder Tablet verlangsamen. Auch die Qualität des Bildes leidet darunter.

Dafür hat Shopify ebenfalls eine smarte Lösung, denn es erlaubt dir in deinem Design Theme eine Vielzahl von verschiedenen Breakpoints zu wählen.

Standardmäßig haben viele Themes folgende Breakpoint Größen: 'small', 'medium', 'medium-down', und 'large'. Bei jeder Screengröße, die unterhalb der genannten Größen liegt, greift die Standardeinstellung von 100 %, die der mobilen Größe entspricht.  

Abschließende Worte

Gute Arbeit! Nicht nur hast du für deine Kunden die notwendigen Bedingungen geschaffen, um ihr Kauferlebnis in deinem Onlineshop zu einer positiveren Erfahrung zu machen, du hast gleichzeitig die Wahrscheinlichkeit für steigende Konversionsraten erhöht, und indirektes Werbebudget eingespart.

Für noch mehr Optimierungswünsche, schau in den SEO Blog oder lade dir den kostenlosen KEINE PANIK Shopify SEO Guide herunter.