Besserer Page Speed und höhere Conversion für The Sports Edit auf Shopify 2.0

The Sports Edit ist ein Multi-Brand-Store aus Großbritannien, der ausgewählte hochwertige Sportbekleidung für Frauen verkauft. Seit dem Start im Jahr 2015 hat das Unternehmen mit verschiedenen Agenturen zusammengearbeitet, um die Codebasis und die Leistung des Shops zu verbessern. Der Wechsel zu Shopify 2.0 war die Gelegenheit, um das ein oder andere in Angriff zu nehmen – und zwar mithilfe von Code.

KLANT

The Sports Edit

INDUSTRIE

Lifestyle, Fashion

TECHNOLOGIE

Shopify plus webshops

SCHICHT

Webshop rebuild

Von uns erbrachte Dienstleistungen

Migration

Store Development

UX/UI Design

Internationalization

Ein neues Design

Mit der Umstellung auf Shopify 2.0 nahm The Sports Edit auch ein Rebranding und ein Redesign vor. Während der Onlineshop früher Sportbekleidung für Männer und Frauen anbot, konzentriert sich The Sports Edit nun exklusiv auf Frauen. E-Commerce-Managerin Sara Davis erklärt die Entscheidung: „Vorher hatten wir eine zweigeteilte Ansicht unserer Webseite – eine Seite für Männer, eine für Frauen –, aber die meisten Produkte haben wir an Frauen verkauft. Wir mussten ständig Kompromisse finden, um auch die Herrenbekleidung weiterhin zu unterstützen. Also haben wir schließlich die Entscheidung getroffen, uns auf eine Sache zu konzentrieren und diese eine Sache wirklich gut zu machen.”

Für The Sports Edit bedeutet das vor allem eins: Besonders guten Content anbieten. Hier kommt Shopify 2.0 mit flexiblen Sektionen und unendlichen Möglichkeiten für Storytelling ins Spiel. Neben der Änderung von Logo und Schriftarten bietet die Website jetzt mehr Bilder, zusätzliche Sektionen mit Rich Content auf den Produktseiten der meistverkauften Produkte und Marken, eine komplett neu gestaltete Blogvorlage mit verbessertem Shopping-Element und insgesamt ein angenehmeres Erscheinungsbild.

Komplexe Apps integrieren – ohne Auswirkungen auf die Geschwindigkeit

Nach den visuellen Optimierungen hat The Sports Edit weiter mit Code zusammengearbeitet, um auch die Website-Performance erheblich zu verbessern. Sara: „Mit dem alten Shop hatten wir Geschwindigkeitsprobleme und fielen bei allen drei Core Web Vitals von Google durch. Das war also eine der obersten Prioritäten. Wir haben festgestellt, dass einige unserer Kernanwendungen die Website verlangsamen, und haben Code gebeten, eine Lösung zu finden. Was das Code-Team auch geschafft hat!”

Wie genau wir das gemacht haben? Kurz gesagt: Wenn man die Bewertungen und User Generated Content von Yotpo mit einer API statt mit einem Widget integriert, wird der Code viel effizienter geladen. Außerdem haben wir die Art und Weise geändert, wie Farbfelder über Algolia geladen werden. Vor Kurzem haben wir Render Better, eine automatisierte Plattform zur Optimierung der Website-Geschwindigkeit und von Core Web Vital für Shopify, eingesetzt, um die Geschwindigkeit weiter zu optimieren. Die Umsetzung hat einige Zeit in Anspruch genommen, aber es hat sich gelohnt: Die Bewertung der Homepage von The Sports Edit auf Google Page Insights verbesserte sich um 42 Prozent auf Mobile und um satte 77 Prozent auf dem Desktop.

Mit dem Ergebnis ist Sara sehr zufrieden: „Die beiden Sprints, die wir im letzten Herbst mit Code durchgeführt haben, haben die Geschwindigkeit enorm verbessert. Wir bestehen jetzt zwei von drei Core Web Vitals – früher sind wir bei allen durchgefallen!”

The Sports Edit x Code LinkedIn Post – 3

So navigieren Sie durch die Shopify-Algolia-Integration

Eine weitere komplexe App, die sich erheblich auf die Seitengeschwindigkeit auswirkt, ist Algolia, eine beliebte Suchmaschine für Shops mit mehr als 100 Produkten. Die Auswirkungen kommen vor allem zum Tragen, wenn Sie viele Anpassungen vornehmen möchten, wie zum Beispiel Optionen für das schnelle Hinzufügen zum Warenkorb, weitere Farbfelder und das Hinzufügen zur Wunschliste über die Produkt-Landingpage.

Doch auch wenn die Geschwindigkeit dadurch beeinträchtigt wird, braucht ein Multi-Brand-Shop wie The Sports Edit eine gute Suchmaschine. Man muss also einen Kompromiss zwischen den Anforderungen von Google und den Bedürfnissen der Kund:innen eingehen. Sara: „Mit umfangreichen Apps muss man manchmal akzeptieren, dass man nur bis zu einem bestimmten Punkt optimieren kann. Letztendlich werden Kund:innen die Seite immer noch als schnell wahrnehmen, auch wenn Google das Gegenteil behauptet. Dennoch haben wir dank Algolia und seinen KI-Ranking-Tools eine massive Verbesserung unserer Absprungrate festgestellt. Das wirkt sich auch auf unsere Conversion Rate aus, die jetzt um fünf Prozent gestiegen ist.

Die Zusammenarbeit mit Code

Trotz der Komplexität des Projekts ist Sara mit der Zusammenarbeit mit Code sehr zufrieden. „Code wurde uns von Vervaunt, unseren E-Commerce-Beratern, empfohlen. Wir waren überzeugt, dass Code genau die Richtigen für unsere Vorstellungen sind – mit einer hervorragenden Shopify-Erfolgsbilanz und dem klaren Fokus auf Geschwindigkeit. Und sie haben geliefert: Neben einer verbesserten UX haben wir jetzt eine viel bessere Codebasis, die Website ist viel schneller, die Konversion ist gestiegen und wir machen echte Fortschritte bei unseren Core Web Vitals.”

Auf die Frage, welchen Rat sie anderen Unternehmen geben würde, die ein ähnliches Projekt umsetzen wollen, sagt Sara: „Seien Sie sich von Anfang an im Klaren darüber, was Sie erreichen wollen und was die wichtigsten Ziele für Ihr Projekt sind. Fragen Sie sich vor (nicht während) der Sprints: Wie soll es funktionieren? Und legen Sie sich außerdem so früh wie möglich auf die Technik fest. Welche Apps Sie wählen, was Sie sich von ihnen erhoffen und ob dies realisierbar ist – wir haben zum Beispiel viel zu lange hin und her überlegt, wie wir Yotpo implementieren sollen. Zudem sollten Sie die Evaluation nach jedem Sprint vornehmen. Es ist wichtig, dass Sie Ihre Fortschritte und die Auswirkungen auf die Geschwindigkeit stets verfolgen, wenn Sie der Website weitere Apps und Anpassungen hinzufügen.”

Sara bewertet das gemeinsame Projekt zusammenfassend als durchweg positiv: „Es war ein umfangreiches Projekt mit einer steilen Lernkurve und einem knappen Zeitplan – es gab also viel Raum für Fehler. Dennoch ist es sehr gut gelaufen und die Front-End-Entwickler von Code haben genau verstanden, was wir erreichen wollten. Es war ein gemeinschaftliches Projekt, das mir insgesamt sehr viel Spaß gemacht hat.”