Shopify Pagespeed Optimierung | Die wichtigsten Pagespeed-Faktoren und wie du deinen Shopify Pagespeed steigerst

Der Pagespeed, die Pagespeed, das Pagespeed

Egal wie ihr zur Pagespeed steht, wenn ihr einen eigenen Onlineshop habt, sollte euch das Thema Pagespeed oder auf Deutsch auch Ladezeit etwas sagen. 

Spätestens seit Google bekannt gegeben hat, dass die Pagespeed auch Auswirkungen auf die organischen Rankings haben soll, ist die Optimierung dieser in aller Munde und es gilt die Devise, umso schneller, desto besser.

Dabei wird vor allem von der durch Google und seine eigenen Tools getesteten Pagespeed gesprochen. Doch Moment, zuerst gilt es zu klären, wie du die Pagespeed deines Onlineshops überhaupt ermittelst. Du kannst schließlich nicht mit einer Stoppuhr neben dem Laptop sitzen und die Zeit, die deine Website zu laden hat, von Hand stoppen.

‍

‍

Wie die aktuelle Pagespeed feststellen?

PageSpeed Insights ist ein Tool von Google, das die Geschwindigkeit und die Leistung von Websites analysiert und auch direkt Empfehlungen zur Optimierung gibt. Es gibt sowohl eine Browser-Erweiterung als auch eine Online-Version. PageSpeed Insights kann sowohl für mobile als auch für Desktop-Websites verwendet werden und bietet Hinweise zur Verbesserung der Ladezeit, der Bildoptimierung, der Minimierung von Code und vielem mehr.

‍

Neben Pagespeed Insights direkt von Google, was wohl das relevanteste Tool zur messung der Pagespeed ist, gibt es noch weitere Tools:

‍

1. GTmetrix: Ein Tool zur Analyse der Website-Performance, das sowohl die Ladezeit als auch die Anzeige von Empfehlungen zur Optimierung bereitstellt.
2. Pingdom: Ein Tool zur Überwachung der Website-Performance, das sowohl die Ladezeit als auch die Verfügbarkeit überwacht und automatisiert Benachrichtigungen bei Problemen sendet.
3. WebPageTest: Ein Tool, das detaillierte Informationen zur Ladezeit, zur Netzwerknutzung und zur Anzeige von Empfehlungen zur Optimierung bereitstellt.
4. YSlow: Ein Tool, das von Yahoo entwickelt wurde und das die Performance von Websites analysiert und Empfehlungen zur Optimierung gibt.
5. DareBoost: Tool welches nicht nur Performance analysiert sondern auch die User-Experience und die Code-Qualität überprüft und direkt detaillierte Empfehlungen gibt.

‍

Warum sollte man trotz der Alternativen hauptsächlich auf Google Pagespeed Insights vertrauen?

Ganz einfach, weil Google im PageSpeed Insights Tool die für Google relevanten Parameter prüft und eine Einschätzung dazu abgibt, welche wahrscheinlich so oder so ähnlich auch vom Google Algorithmus verwendet wird und zur Einordnung deiner Seite in den SERPS führt.

Grundsätzlich geben die anderen Tools auch Indikatoren, ob deine Seite von der Performance her gut, akzeptabel oder verbesserungswürdig ist, dennoch sind die Vorgaben von Google doch nochmals höher zu bewerten.

‍

Google Analysiert die Seiten nach folgenden Metriken:

• FCP (First Contentful Paint)
• SI (Speed Index)
• LCP (Lagest Contentful Paint)
• TTI (Time to Interactive)
• TBT (Total Blocking Time)
• CLS (Cumulative Layout Shift)

Im Lighthouse Scoring Calculator können die Gewichtungen der einzelnen Metriken nachvollzogen werden. Metriken mit mehr Gewichtung sind natürlich auch schwerwiegender und haben einen größeren Einfluss auf das Overall Rating der Seite.

‍

‍

Für die, die es ganz genau wissen sollten, hier noch ein paar Erläuterungen zu den wichtigsten Metriken und deren Hintergründe. Denn nur wer versteht wie sich das Rating von Google zusammensetzt kann dies natürlich auch beeinflussen uns so den eigenen Shop optimieren

‍

FCP (First Contentful Paint)

FCP misst die Zeit, die benötigt wird, bis der Browser den ersten Text oder das erste Bild geladen hat. Dabei kann es sich um ein SVG oder auch einen Hintergrund handeln.

‍

LCP (Largest Contentful Paint)

LCP stellt die Zeit dar, die benötigt wird, bis das größte Element der Seite geladen hat. Es wird davon ausgegangen, dass dies der Mittelpunkt der Seite ist und damit dann auch der Nutzer mit der Seite interagieren kann.

‍

CLS (Cumulative Layout Shift)

CLS bewertet, wie sehr der Inhalt einer Seite während des Ladevorgangs gestört wird und z.B. Bilder aufgrund eines Problems bei der Anzeige nochmals geladen werden müssen. Je weniger Störungen es beim Laden der Seite gibt, desto besser ist das Nutzererlebnis.

‍

Pagespeed und Shopify

Nachdem klar ist, dass die PageSpeed ein zentraler Bestandteil der Optimierung eines Shopify Shops sein sollte, geht es nun mehr darum, wie wir konkret die Pagespeed eines Shopify Shops optimieren können. Bevor es losgehen kann nochmals ein paar Punkte zur Erläuterung

• Bei Shopify handelt es sich um ein SAAS System. Das bedeutet, der Shop-Betreiber hat keine Einflussmöglichkeiten auf die Server. Dadurch fallen natürlich schon einige Optimierungsmöglichkeiten, die System, die selbst gehostet werden, offenstehen weg.
• Einige Punkte für eine optimale Pagespeed sollten schon bei der Konzeption des Shops beachtet werden. So laden z.B. Apps, welche ins Frontend und in die Darstellung des Shops eingreifen, immer eigene Inhalte nach und desto mehr Apps werden verwendet, desto längere Ladezeiten entstehen.
• Apps, die deinstalliert wurden, können trotzdem noch Integrationsrückstände im Theme hinterlassen haben, wenn sie nicht ordentlich entfernt wurden oder die App nicht besonders hochwertig ist. Daher lohnt es sich, das Theme mal zu prüfen und evtl. zu bereinigen. Auch spricht das für eine sorgfältige Auswahl der Apps und evtl. einen Test der App in einer separaten Shopify Instanz, bevor sie in den Liveshop integriert und voreilig getestet wird.
• Shopify Shops sind oft sehr grafik und bildlastig, was Shopify auf jeden Fall von sehr vielen Shopsystemen unterscheidet und auch für viele Händler und D2C Brands der Grund für die Wahl von Shopify als Shopsystem ist. Dennoch laden Bilder und Grafiken natürlich länger als Texte und können falsch integriert zu längeren Ladezeiten führen.

‍

Optimierung Faktoren für Shopify Shops die du ergreifen kannst:

• Grafiken und Bilder in optimaler Größe bereitstellen
• Nur die nötigsten Apps für das Frontend verwenden
• Drittanbieter Tools sauber prüfen von der Integration

‍

So können wir unterstützen

Falls du mit all diesen Möglichkeiten an eine Grenze stößt und sich die Pagespeed einfach nicht mehr weiter positiv beeinflussen lässt, können wir dir natürlich als technischer Partner weiterhelfen und nochmals zusätzliche Optimierungen anbieten.

Was möglich ist:

• Nicht genutztes Java-Script entfernen, das Theme ausmisten und ungenutzten Code entfernen. Genutztes JavaScript komprimieren.
• Ungenutztes CSS entfernen und genutztes CSS komprimieren.
• 3rd Party Code reduzieren
• Evtl. App Rückstände im Code von zuvor installierten Apps entfernen

‍

Fazit:

Alles in Allem lassen sich auch Shopify Shops mit 100 Punkten Pagespeed Score erstellen, diese haben dann aber keine bis sehr wenige Funktionen, die Shopify auf jeden Fall so besonders machen.

Deshalb ist auf jeden Fall zwischen Pagespeed und User Experience abzuwägen und oft führt eine kleine Verschlechterung in der Pagespeed zu einer deutlich besseren User Experience und damit auch oft einer höheren Conversion Rate im Shop.

‍

Unsere Empfehlung daher klar die Pagespeed nie total isoliert zu sehen, sondern immer zu prüfen, welche Möglichkeiten bei gleichbleibender User Experience bestehen und keine nützlichen Features nur wegen der Pagespeed zu entfernen.

Alle Shopify Shops mit einer Pagespeed unter 50 Punkten sollten aber auf jeden Fall die Möglichkeiten prüfen und möglichst optimieren.

‍

Bei Fragen zum Thema Pagespeed kommt gerne auf uns zu und wir können in einem unverbindlichen Erstgespräch die Möglichkeiten zur Optimierung prüfen und euch eine erste Einschätzung geben.