Ladebalken “Loading”

So gibst du der Pagespeed Optimierung deines Shops einen Boost

Pagespeed Optimierung ist ein zentraler Faktor, um Kundenzufriedenheit und Ranking deines Onlineshops zu verbessern. Wir verraten, worauf es dabei ankommt.

 

 

Mit Shopify entscheiden sich immer mehr Onlinehändler:innen für ein leistungsstarkes und intuitives Shopsystem. Onlineshops aufzubauen und zu eröffnen, ist damit leichter denn je. Umso wichtiger ist es, sich über Faktoren wie Pagespeed oder Performance, die generell zum Bereich SEO gehören, abzuheben, um die Sichtbarkeit und damit das Vertrauen der Kund:innen zu erhöhen. Eine wesentliche Strategie, um nachhaltig Traffic zu generieren, ist die Pagespeed Optimierung. Denn je weiter sich sämtliche Features des E-Commerce entwickeln, desto wichtiger wird die optimierte Umsetzung.

 

In diesem Beitrag erfährst du, wie sich die Faktoren Pagespeed und Performance verbessern lassen, damit du Ranking, Sichtbarkeit und letztlich deinen Umsatz über mehr Kundenzufriedenheit steigern kannst. Lass’ uns gleich starten.


LesetippInternationalisierung im E-Commerce - So gelingt der grenzüberschreitende Handel

 

Was ist Pagespeed Optimierung und wieso ist das wichtig?


Sobald Onlinehändler:innen die Strategie verfolgen, auf Suchmaschinen ihre Sichtbarkeit steigern zu wollen, taucht neben allgemeinen SEO- und Performance-Maßnahmen schnell der Begriff Pagespeed auf. Unter Pagespeed versteht man die Geschwindigkeit, mit der eine Website lädt. Das bezieht sich auf sämtliche Inhalte, wie etwa Bilder, Texte oder Javascripts, die erforderlich sind, um Nutzer:innen die gewünschte Seite anzeigen zu können.

 

Du hast schon mal auf einer Website einen Link oder ein Produkt angeklickt und ewig gewartet, bis es lädt? Und dabei waren dort nicht mal neuartige Features wie VR und AR implementiert? Nicht nur ist so etwas nervtötend, es kostet dich als Betreiber:in eines solchen Onlineshops auch noch potenzielle Kundenzufriedenheit. Genau das soll vermieden werden. Und das führt direkt zur Frage, wie die Performance und insbesondere die Pagespeed nicht gänzlich in die Knie geht.



 

Was beeinflusst die Pagespeed Optimierung deines Shopify Shops?


Um Pagespeed Optimierungen vornehmen zu können, ist es wichtig zu verstehen, welche Einflussfaktoren es gibt, die sich negativ auf die die Pagespeed deines Shops auswirken. Wenn Nutzer:innen eine Seite deines Shops aufrufen, werden im Hintergrund sämtliche Informationen abgerufen, die zur Darstellung der Seite erforderlich sind. All diese Informationen können die Pagespeed potenziell negativ beeinflussen. Das sind unter anderem das HTML-Dokument, das den grundsätzlichen Aufbau der Seite enthält, Grafiken und andere Medieninhalte. Auch Javascripts - falls vorhanden - werden hier geladen und ausgeführt.

 

Nachdem diese Elemente geladen wurden, wird die Seite gerendert - also in visueller Form aufgebaut. Javascripts sind kleinere ausführbare Dateien, die eine Interaktion mit der Website oder Animationen und dynamische Inhalte ermöglichen. Auch das solltest du für die folgenden Maßnahmen im Hinterkopf behalten. Bevor du mit der Pagespeed Optimierung starten kannst, solltest du aber noch deinen Status quo kennen.



 

Pagespeed optimieren - was ist wie zu messen?


Google Pagespeed Screenshot
Hier sehen wir aktuelle Pagespeed-Insights-Ergebnisse von www.google.de


Selbstverständlich gibt es zahlreiche Tools, die dir alle möglichen Insights geben können. Um nicht in Details verloren zu gehen, beschränken wir uns im Sinne eines Beispiels auf eines der wichtigsten Werkzeuge für SEO, das ausreichend spezifische Informationen zu sämtlichen Performance-Aspekten deiner Website liefert.

 

PageSpeed Insights ist ein kostenloses Tool von Google, das einen ausgezeichneten Überblick über die Pagespeed und Ladezeiten deiner Website unter unterschiedlichen Gesichtspunkten gibt. So etwa die Zeitspanne bis deine Seite gerendert wird bis sie durch Eingaben von User:innen interaktionsfähig ist oder auch die Zeit, bis sich keine der Elemente deiner Seiten mehr verschieben.

 

Wir alle kennen Websites, bei denen man etwas anklicken möchte, doch durch einen Ladevorgang verschiebt sich der Button im letzten Moment noch - diese Größe wird etwa durch den CLS-Wert beschrieben. Das ist nur einer der Werte aus einem großen Set, der die Performance deines Onlineshops beschreibt und unter dem Sammelbegriff der Core Web Vitals in der Suchmaschinenoptimierung bekannt ist.

 

Die Akzeptanzwerte der Core Web Vitals hat Google natürlich dokumentiert. Wichtig bei den Tests ist, dass du diese für jeden einzelnen Seitentypen durchführst, da die Werte natürlich nicht für die gesamte Website allumfassend gelten. Produktseiten, Suchergebnisseiten, Startseite, Checkout-Seiten, die für deine Conversion relevantesten Seiten sollten einen Test der Core Web Vitals jedenfalls bestehen.



 

5 Wege zur Pagespeed Optimierung deines Onlineshops


Häufig wird die Optimierung der Ladezeit zu einem sehr technischen Thema, das Entwickler-Ressourcen benötigt. Doch auch mit einigen wenigen Kniffen kannst du bereits einiges bei der Pagespeed Optimierung herausholen.



1. Bilder optimieren

Grafiken gehören zu den stärksten Pagespeed Bremsern auf deiner Website, wenn du nicht aktiv gegensteuerst. Shopify liefert hier praktische Features mit, durch die die Größe von Bildern automatisch angepasst werden.  Auch eine Konvertierung in das effizientere WebP-Format kann automatisch vorgenommen werden, um die Ladezeiten zu verkürzen. Apps, die diese Formatierungen und Konvertierungen vornehmen, gibt es zuhauf.

 

Außerdem wichtig: Achte auf das richtige Format und den sparsamsten Datei-Typ: JPEG bietet qualitativ die beste Lösung bei gleichbleibender Dateigröße von 24 KB. Die Pagespeed Werte haben jetzt eine höhere Wahrscheinlichkeit in den grünen Bereich zu gelangen. Dasselbe Prinzip lässt sich im Übrigen auch bei Videonutzung anwenden.



2. Lazy Loading

Anstatt sämtliche Medieninhalte einer Seite initial zu laden, lassen sich die Elemente, die außerhalb des anfänglichen Sichtbereichs sind, auch nachträglich in den Ladestatus bringen. Bilder und Videos werden damit erst dann geladen, wenn die User:innen an die entsprechende Stelle der Seite gelangen (etwa durch Scrollen). Lazy Loading ist eine Technik, die ein verzögertes Laden von Inhalten ermöglicht.  Die Inhalte werden erst dann geladen, wenn sie benötigt werden,  und nicht bereits vorab mit allen anderen erforderlichen Dateien und Skripten. Die meisten Shopify Themes unterstützen diese Funktion, alternativ finden sich dafür auch eigene Apps wie etwa Loadify oder Lazyfy. Apropos Themes …



3. Custom Themes auf Shopify

Natürlich spielt nicht ausschließlich die Performance eine Rolle bei der Wahl des Themes. Dennoch sollte sie bereits bei der Auswahl deines Themes von Bedeutung sein. Speziell sehr aufwendige und stark animierte Themes bringen oft Nachteile mit sich, die sich im Nachgang nur schwer optimieren lassen. Die Bewertungen der Themes geben häufig bereits Aufschluss darüber, wie performant es ist. Ebenso kannst du dir diesen Beitrag über unsere 8 Theme Favoriten anschauen.

Und sollte das nicht ausreichen, gibt es noch immer die Option eines Custom Themes, bei dessen Entwicklung wir dich mithilfe unserer Expert:innen unterstützen.



4. Sparsamer Einsatz von Apps

Apps für jede erdenkliche Funktion nutzen zu können, ist eine der Stärken von Shopify, doch leider auch ein potenzieller Stolperstein für die Performance und natürlich die Pagespeed. Die Anzahl der Apps also auf das Notwendigste zu reduzieren und “lean” zu werden; das ist nicht nur auf unternehmerischer Ebene sinnvoll, sondern auch für deinen Onlineshop. Damit wird sichergestellt, dass keine wertvollen Ressourcen verschwendet werden und deine Kund:innen mit weniger Ladezeit-Eskapaden zu tun haben.



5. Effektive Caching Strategie

Zu guter Letzt werden wir erneut etwas technischer: Caching ist ein Verfahren zur Speicherung von häufig verwendeten Daten wie Bilder, CSS-Dateien und HTML-Code im Cache des Browsers deiner Website Besucher:innen. Wenn Nutzer:innen deinen Onlineshop erneut besucht, kann der Browser diese Daten aus dem Cache laden, anstatt sie erneut vom Server abrufen zu müssen. Auch das verkürzt die Ladezeit.

 

Shopify integriert seit Längerem eine automatische Caching-Funktion, die statische Inhalte wie Bilder und CSS-Dateien auf einem CDN (Content Delivery Network) speichert. Über ein Shopify Plus-Konto gibt es sogar die Möglichkeit, Caching-Einstellungen auch für dynamische Inhalte anzupassen. Die Ladezeit deiner Seiten wird weiter optimiert und speziell wiederkehrende Nutzer:innen finden eine performantere Seite vor.



 

Pagespeed Optimierung für bessere User Experience und Rankings


Fest steht: Pagespeed Optimierung für Shopify Onlineshops ist ein niemals endendes Projekt, genau wie die laufenden Optimierungen an anderen Stellen. Unter den SEO-Maßnahmen nimmt die Performance einen hohen Stellenwert ein, da sie sich einerseits als starkes Qualitätsmerkmal für Google einfach messen lässt und andererseits auch direkt für Nutzer:innen deiner Website spürbar ist. Insbesondere dann, wenn beispielsweise VR und Augmented Commerce zu deinen Themen zählen.

 

Oberste Prämisse lautet also: Halte deine Seite schlank und frei von aufwändigen Animationen, Karussell Widgets und überflüssigen Elementen, die deinen Kund:innen keine Vorteile bringen. Natürlich darf das übergeordnete Shopdesign, sowie die daran angeknüpfte User Experience nicht unter den Tisch fallen, keine Frage. Denk daran, Performance beeindruckt nicht nur Google, sondern ist auch ein vertrauensbildender Qualitätsfaktor für deine Websitebesucher:innen. Und welche zwei Motivatoren, wenn nicht Kundenvertrauen und Ranking, benötigst du, um dich gleich an deine Pagespeed Optimierungsstrategie zu setzen?