Der Shopify Geschwindigkeits-Score

Die Ladezeit deines Shopify-Shops ist entscheidend – nicht nur für die organischen Rankings bei Google & Co., sondern auch für das Einkaufserlebnis deiner Nutzer und damit für die Conversion-Leistung deines Shopify-Shops. Dieser Umstand ist selbstverständlich auch Shopify bewusst. Daher wird von Shopify für deinen Online-Shop ein Geschwindigkeits-Score berechnet und dir recht prominent im Adminbereich angezeigt. Zudem erfolgt durch Shopify eine Einschätzung, ob dein Shop schneller, genauso schnell oder langsamer als ähnliche Shops ist. Leider erhältst du durch Shopify im Adminbereich nur rudimentäre Erläuterungen, wie die Berechnung und Einschätzung zustande kommen. Die Folge ist Unsicherheit und offene Fragen bei vielen Shopify-Shopbetreibern. Zeit also, etwas Licht ins Dunkel zu bringen.

Wie ergibt sich der Geschwindigkeits-Score?

Der Shopify Geschwindigkeits-Score soll dir helfen, die Geschwindigkeit deines Shopify Shops zu bewerten und basiert auf Analysen, die mit Hilfe von Google Lighthouse durchgeführt werden. Lighthouse ist ein von Google bereitgestelltes Open-Source-Tool zur Verbesserung der Qualität von Webseiten und bietet automatisierte Audits zu den Themenkomplexen Geschwindigkeit, Barrierefreiheit und SEO. Der Shopify Geschwindigkeits-Score ist also eigentlich der Lighthouse Geschwindigkeits-Score und damit ein gewichteter Durchschnitt der einzelnen Lighthouse Metrik-Scores. Um den Geschwindigkeits-Score besser zu verstehen, ist zunächst ein detaillierter Blick auf die fünf Lighthouse-Metriken notwendig:

First Contentful Paint (FCP)

Der FCP misst, wie lange der Browser benötigt, um den ersten DOM-Inhalt zu rendern, nachdem ein Benutzer deinen Shopify-Shop aufgerufen hat. Der FCP-Score deines Shops ist ein Vergleich der FCP-Zeit deines Shops mit den FCP-Zeiten realer Websites, basierend auf Daten aus dem HTTP-Archiv. Beispielsweise erreichen Websites, die im neunundneunzigsten Perzentil liegen, eine FCP-Zeit von etwa 1,2 Sekunden. Wenn die FCP-Zeit deines Shops also 1,2 Sekunden beträgt, ist der FCP-Score deines Shops 99.

Speed Index (SI)

Der SI misst, wie schnell der Inhalt beim Laden deines Shopify-Shops visuell dargestellt wird. Lighthouse nimmt dazu zunächst ein Video vom Laden deines Shops im Browser auf und berechnet den visuellen Verlauf zwischen den einzelnen Frames des Videos. Der SI-Score deines Shops ergibt sich aus dem Vergleich zwischen den ermittelten Werten für deinen Shop und den ermittelten Werten echter Websites, basierend auf Daten aus dem HTTP-Archiv.

Total Blocking Time (TBT)

Die TBT misst die Gesamtzeit, in der der Haupt-Thread des Browsers beim Laden deines Shopify-Shops blockiert war. Der Browser kann eine laufende Aufgabe nicht unterbrechen. Wenn also ein Benutzer mit der Seite interagiert, muss der Browser warten, bis die laufende Aufgabe beendet ist, bevor eine Reaktion auf die Eingabe des Nutzers erfolgen kann. Wenn eine Aufgabe eine längere Zeit dauert, ist es wahrscheinlich, dass der Benutzer die Verzögerung bemerkt und die Seite als träge oder ruckelig empfindet. Der Haupt-Thread des Browsers gilt immer dann als blockiert, wenn eine Aufgabe länger als 50 Millisekunden auf dem Haupt-Thread läuft.

Largest Contentful Paint (LCP)

Der LCP gibt die Renderzeit des größten im Viewport sichtbaren Bildes oder Textblocks an, relativ zum Zeitpunkt des ersten Ladevorgangs deines Shopify-Shops. Berücksichtigt werden dabei Image- und Video-Elemente, Elemente, die ein Hintergrundbild aufweisen, sowie Block Level-Elemente, die Texte enthalten. Um deinen Nutzern ein gutes Erlebnis zu bieten, sollte dein Shopify-Shop weniger als 2,5 Sekunden benötigen, um das größte im Viewport sichtbare Bild oder den größten im Viewport sichtbaren Textblock zu rendern.

Cumulative Layout Shift (CLS)

Der CLS ist eine nutzerzentrierte Kennzahl zur Messung der visuellen Stabilität und misst, wie oft deine Nutzer in deinem Shopify-Shop unerwartete Layoutverschiebungen erleben. Diese treten in der Regel auf, weil Ressourcen asynchron geladen werden oder DOM-Elemente dynamisch über den vorhandenen Inhalten zur Seite hinzugefügt werden und können die Nutzererfahrung negativ beeinflussen.

Die fünf beschriebenen Metriken werden bei der Berechnung des Lighthouse Geschwindigkeits-Scores unterschiedlich gewichtet. Dabei fließt der FCP mit 10%, der SI mit 10%, die TBT mit 30%, der LCP mit 25% und der CLS mit 25% in die Berechnung ein. Hinter dem Geschwindigkeits-Score steckt also mehr, als man auf den ersten Blick vermuten würde. Im Shopify-Adminbereich kannst du leider nur den aktuellen Gesamt-Score sowie die Entwicklung des Gesamtscores im zeitlichen Verlauf einsehen. Wenn du einen detaillierten Einblick gewinnen möchtest, kannst du einen Google Lighthouse Report für deinen Shopify-Shop mit der entsprechenden Google Chrome Erweiterung erstellen. Dieser Report gibt dir nicht nur eine ausführliche Aufstellung der Leistung deines Shopify-Shops, sondern auch konkrete Hinweise, an welchen Stellen du optimieren solltest. Du solltest allerdings darauf gefasst sein, dass einige der von Google Lighthouse ausgesprochenen Hinweise in deinem Shopify-Shop gegebenenfalls nicht oder nur mit kaum vertretbaren Aufwänden umsetzbar sind.

Zusätzlich zum Geschwindigkeits-Score erfolgt von Shopify eine Einschätzung, ob dein Shop schneller, genauso schnell oder langsamer als ähnliche Shopify-Shops ist. Um zu bestimmen, welche Shops ähnlich sind, zieht Shopify unter anderem die folgenden Attribute heran: Anzahl der Verkäufe, Umsatz, Anzahl der im Shop verfügbaren Produkte, Varianten, Art der Produkte, Traffic des Shops, installierte Apps und das verwendete Theme. Shopify gibt in dieser Einschätzung also an, wie sich der Geschwindigkeits-Score deines Shops im Vergleich zu den Geschwindigkeits-Scores der Shopify-Shops, die hinsichtlich der benannten Attribute deinem Shop ähnlich sind, verhält. Der Vorteil dieser Vorgehensweise liegt darin, dass beispielsweise Shops mit einem großem Sortiment tendenziell langsamer sind, als Shops, die nur wenige Produkte führen und der relative Vergleich zu potenziellen Wettbewerbern daher in einigen Fällen mehr Aussagekraft haben kann als der absolute Geschwindigkeits-Score.

Wie kannst du den Geschwindigkeits-Score verbessern?

Wenn du den Geschwindigkeits-Score deines Shopify-Shops verbessern möchtest, ist es wichtig zu wissen, welche Ansatzpunkte überhaupt existieren. Da es sich bei Shopify um eine Cloud-Lösung handelt, hast du beispielsweise keine Möglichkeit, die Server-Infrastruktur, das Content Delivery Network oder den serverseitigen Cache zu beeinflussen. Diese Bereiche liegen vollständig in der Verantwortung von Shopify und Shopify arbeitet kontinuierlich an Verbesserungen, die auch zu einer Verbesserung des Geschwindigkeits-Scores deines Shops führen können. Selbstverständlich gibt es aber auch Faktoren, die du direkt beeinflussen kannst:

  • Apps: Apps können den Geschwindigkeits-Score deines Shopify-Shops deutlich senken. Du solltest also nur Apps verwenden, die einen wirklichen Mehrwert für dein Business schaffen und die Auswirkungen auf den Geschwindigkeits-Score immer im Blick behalten. Häufig werden auch Apps eingesetzt, um Funktionalitäten zu erzielen, die mit einer Theme-Anpassung deutlich performanter umsetzbar wären. Nicht genutzte Apps solltest du aus deinem Shop aus den genannten Gründen auf jeden Fall entfernen.
  • Theme: Das in deinem Shop eingesetzte Theme kann einen großen Einfluss auf den Geschwindigkeits-Score deines Shops haben. Bereits bei der Auswahl des Themes sollte die Geschwindigkeit eine Rolle spielen. Wenn das verwendete Theme sehr langsam ist, kann ein Theme-Wechsel durchaus attraktiv sein. Sollte ein Wechsel des Themes für dich nicht in Frage kommen, kann eine Überarbeitung der kritischen Stellen Abhilfe schaffen.
  • Liquid: Sollten in deinem Shop individuelle Funktionen mit Liquid umgesetzt worden sein, lohnt sich ein Blick auf die Effizienz des Codes. Die Chrome Extension “Shopify Theme Inspector” kann helfen, ineffizienten Code zu identifizieren. Häufig kann eine Optimierung an diesen Stellen den Geschwindigkeits-Score positiv beeinflussen.
  • Bilder: Der unbedachte Einsatz von Bildern kann deinen Shop spürbar verlangsamen. Achte daher beim Einsatz von Bildern immer auf den Einfluss auf den Geschwindigkeits-Score. So solltest du ausschließlich optimierte Bilder einsetzen und beispielsweise bei Slideshows auf die Nutzung übermäßig vieler Slides verzichten.
  • Schriftarten: Wenn du keine Systemschrift in deinem Shop verwendest, verlangsamt das Laden der eingesetzten Schrift deinen Shop. Das sollte relativ unproblematisch sein, solange du dich auf eine Schriftart beschränkst. Solltest du mehrere verschiedene Schriftarten einsetzen, lohnt sich ein detaillierter Blick, inwieweit dadurch der Geschwindigkeits-Score deines Shops negativ beeinflusst wird.

Wie du siehst, gibt es verschiedene Ansatzpunkte zur Optimierung des Geschwindigkeits-Scores deines Shopify-Shops. Einige Maßnahmen, wie beispielsweise die Bildoptimierungen, lassen sich vergleichsweise einfach umsetzen, während andere Maßnahmen, wie beispielsweise die Optimierung von Liquid-Code, nur mit Expertenwissen umsetzbar sind. Eine gute Strategie ist daher, zunächst die Low Hanging Fruits anzugehen – also die gut umzusetzenden Maßnahmen zu priorisieren. So lassen sich in vielen Fällen vergleichsweise schnell erste überzeugende Erfolge erzielen. Mit diesem Vorgehen steigt daher nicht nur der Geschwindigkeits-Score deines Shops, sondern auch deine Motivation, auch die komplexen und aufwändigen Maßnahmen anzugehen.

Fazit

Schnelle Ladezeiten sind eine Voraussetzung für erfolgreiche Shops. Um dich bei der Einschätzung der Performance deines Shops zu unterstützen, gibt Shopify im Adminbereich einen auf Google Lighthouse basierenden Geschwindigkeits-Score aus. Wenn du den Geschwindigkeits-Score deines Shops verbessern möchtest, solltest du die installierten Apps, das eingesetzte Theme, die Effizienz deines Liquid-Codes sowie die verwendeten Bilder und Schriftarten genauer unter die Lupe nehmen. Wenn du dabei Unterstützung wünschst, komm gerne auf uns zu!