AppelrathCüpper

Wie Speed Kit im Fashion-E-Commerce hilft

Speed Kit bringt einen Uplift von 3,9x bei Seitenladezeit und über 50% bei Conversions auf appelrath.com. (English version)

Problem

Mit AppelrathCüpper geht eine Erfolgsgeschichte online weiter, die schon vor 130 Jahren begann. Mit Speed Kit konnte AppelrathCüpper seine Performance und seine User Experience auf ein Niveau heben, das bisher nur den Marktführern vorbehalten war. Mit einer neuen Qualität an Seitenladezeiten von unter einer Sekunde gehört appelrath.com zur Spitzengruppe der schnellsten Online-Shops weltweit.

• Herausforderung: Sicherstellung der besten Online-Nutzererfahrung und -Performance für eine Einzelhandelsmarke, die über 100 Jahre Vertrauen und Bekanntheit aufgebaut hat.
• Vorgehensweise: Hinzufügen von Speed Kit als JavaScript-Tool zum bestehenden OXID-basierten Online-Shop für ein schnelles und knackiges Surferlebnis auf der gesamten Website.
• Ergebnis I: 3,9x schnellere Seitenladezeit
• Ergebnis II: 55% mehr Conversions
• Ergebnis III: 16% längere Sitzungsdauer

“Speed Kit gibt uns nicht nur einen spürbaren Geschwindigkeitsschub von 3,9x, sondern auch einen messbaren Conversion-Uplift von 55%.”

Jerrit Kube, Head of Digital & Marketing, AppelrathCüpper

Über AppelrathCüpper und Baqend

Vom Filialist zu E-Commerce

Seit seiner Gründung im 19. Jahrhundert ist AppelrathCüpper eine der ältesten deutschen Modehandelsmarken und bekannt für hochwertige Damenbekleidung. Appelrath.com wurde 2015 ins Leben gerufen, um den Übergang vom rein stationären Handel zum 24/7-Online-Geschäft zu vollziehen. Im direkten Wettbewerb mit Big Playern wie Zalando und Amazon ist es das Ziel von AppelrathCüpper, seine bewährte Mode-Einzelhandelsmarke auch im Fashion-E-Commerce zu einem führenden Unternehmen zu machen. Um diese Herausforderung auf technischer Ebene zu meistern, wurde Speed Kit ins Spiel gebracht.

Technisches Setup

Appelrath.com läuft auf OXID für sein Shop-Backend. Da AppelrathCüpper an sein Online-Geschäft die gleichen hohen Anforderungen stellt wie an seine Produkte, arbeitet man bei Aufbau und Betrieb des Online-Shops mit Dept (ehemals Superreal) zusammen. Dept ist eine internationale Webentwicklungsagentur mit mehr als 1000 Experten in allen Bereichen des Online-Handels, einschließlich Marketing, Design und technischer Umsetzung. Mit ihrer Expertise im E-Commerce und als Baqend-Partner nehmen sie Performance sehr ernst.

Um die Nutzerfreundlichkeit auf technischer Ebene zu optimieren, wurde Speed Kit für appelrath.com als Mittel gegen störende Seitenladezeit gewählt. Speed Kit ist eine Web-Performance-Versicherung: Als JavaScript-Snippet hinzugefügt beschleunigt es Webseiten typischerweise um mehr als 50%. Mit seinen automatischen Optimierungen verbessert Speed Kit jedoch nicht nur die Nutzerfreundlichkeit, sondern erhöht auch die Konversionsrate und das SEO-Ranking, entlastet den Server und reduziert die Marketingkosten durch niedrigere Bounce-Raten drastisch.

In einem ersten Schritt analysierte Dept, um wie viel Speed Kit appelrath.com beschleunigen würde. Zu diesem Zweck wurde der Page Speed Analyzer verwendet, ein auf dem bekannten WebPagegest aufbauendes Performance-Tool. Der Page Speed Analyzer sagt präzise vorher, welcher Uplift durch Speed Kit erreicht werden kann, indem er einen Vergleich zwischen (1) der Basisgeschwindigkeit der zu testenden Website und (2) einer durch Speed Kit beschleunigten Variante anstellt. Ein paar einfache Tests zeigten schnell, dass Speed Kit einen enormen Uplift über Landing Pages, Produktlisten und Produktdetailseiten hinweg bieten würde.

Vorgehensweise

Um schnelle, aber nachhaltige Ergebnisse in der Performance zu erzielen, entschied sich Dept für eine Integration von Speed Kit in Appelrath.com. Der Prozess zur Beschleunigung der Website ist dabei sehr einfach:

1. Speed Kit nutzt die neuartige Browser-Technologie Service Worker. Speed Kits sw.js-Datei wird einfach in das Backend hochgeladen (in diesem Fall: OXID).
2. Durch Speed Kits Whitelist & Blacklist wird gesteuert, welche Anfragen beschleunigt werden und welche nicht. Auf appelrath.com liefert Speed Kit sowohl First-Party-Inhalte (z.B. die HTML-Webseite selbst) als auch die Inhalte langsamer Drittanbieter aus (z.B. den Google Tag Manager).
3. Speed Kit hält die Webseite automatisch auf dem neuesten Stand, indem es sie regelmäßig auf Inhaltsänderungen überprüft. Im Speed Kit-Dashboard können die entsprechenden Regeln hinzugefügt und konfiguriert werden.
4. Um personalisierte Inhalte (z.B. Warenkorb und Empfehlungen) zu beschleunigen, wird den Elementen der Seite ein Datenattribut hinzugefügt, das sich je nach Nutzer ändern kann.
5. Um Speed Kit zu aktivieren, wird schließlich ein JavaScript-Snippet in die Webseite eingebaut, etwa durch Hinzufügen zum HTML-Template (ein Tag-Manager funktioniert auch).

Mit diesen 5 Schritten konnte Speed Kit in einer Pre-Production-Umgebung getestet werden. Der gesamte Prozess dauerte weniger als zwei Entwicklertage für AppelrathCüpper, Dept und das Speed Kit-Team zusammen.

“AppelrathCüpper zeigt, wie reibungslos Speed Kit-Integrationen typischerweise sind. Für Appelrath.com haben wir das Basis-Setup ohne Schnickschnack verwendet und ohne Feintuning schon unglaubliche Performancesteigerungen erzielt. Da die Teams von AppelrathCüpper und Dept mit ihrem Feedback sehr hilfreich und schnell waren, dauerte die Konfiguration von Speed Kit nur wenige Stunden. Alles in allem haben wir weniger als drei Wochen von den ersten Tests bis zum Livegang benötigt.”

Erik Witt, Head of Speed Kit Development

Testmethodik

Um den Performance-Uplift für reale Nutzer auf appelrath.com zu quantifizieren, wurde ein Split-Test durchgeführt. Speed Kit bietet hierzu native Unterstützung für A/B-Tests, indem es anonymisierte Performancedaten von Nutzern erfasst, während diese auf der Webseite surfen.

• Gruppe A (50% der Nutzer) verwendete Speed Kit
• Gruppe B (die verbleibenden 50%) nutzte die Seite ohne Speed Kit

Die rohen Performancedaten und die Gruppeninformationen wurden in Echtzeit an die skalierbaren Analysesysteme von Baqend gesendet, so dass sowohl Performance als auch Conversions nachvollzogen werden konnten. Dann war Warten angesagt: Normalerweise dauert es einige Tage, bis man statistisch signifikante Ergebnisse erhält, da eine ausreichende Menge an Traffic und Nutzern beobachtet werden muss. Aber das Warten sollte sich lohnen, denn die empirischen Ergebnisse sprachen schnell für sich…

Ergebnisse

“Ich helfe Unternehmen seit über 10 Jahren, den immensen ROI von Web Performance zu verstehen und zu messen. Die eigentliche Herausforderung bestand jedoch schon immer in der Umsetzung von Web Performance-Optimierung. Heute bin ich erstaunt, wie einfach diese immensen ROIs mit Speed Kit zu erreichen sind. Appelrath.com ist das perfekte Beispiel dafür, warum ich bei Baqend angefangen habe: Wir revolutionieren den Web Performance-Markt, indem wir solche unglaublichen Ergebnisse liefern und nicht nur darüber reden.”

Kristian Sköld, Chief Strategy Officer, Baqend

Wie immer für die erste Analyse haben wir uns zunächst die rohen technischen Performancekennzahlen für Seitenladezeit angesehen (Medianwerte):

• Serverantwortzeit (Zeit bis zum ersten Byte aus dem Backend):
  1200% schneller (3.25s vs. 0.25s)
• First Paint (Zeit, bis der Browser zum ersten Mal rendert):
  387% schneller (3.65s vs. 0.75s)
• Time-to-Interactive (Zeit, bis man Links klicken kann):
  305% schneller (3.85s vs. 0.95s)

Die wahrgenommene Ladezeit einer Webseite wird durch den First Paint gut erfasst, welcher für die Gruppe der Nutzer mit Speed Kit um Faktor 3,9 verbessert wurde.

Es ist lange kein Geheimnis mehr, dass eine Senkung der Ladezeit zu einem höheren Umsatz führt. In einem bekannten A/B-Test fand Amazon heraus, dass eine Ladezeitverbesserung von nur 100ms zu einer 1%-igen Verbesserung der Konversionsrate auf seiner Webseite führte. Die interessante Frage ist also: Was ist der eigentliche Conversion-Uplift auf appelrath.com für echte Nutzer?

Das ist genau das, was Speed Kit aufzeichnet: die Conversions und das Engagement der Nutzer, die mit Speed Kit auf der Webseite surfen.

• Conversion Rate (Anteil der Nutzersitzungen, in denen etwas gekauft wurde):
  55% höher
• Engagement/Sitzungsdauer (Anzahl der besuchten Seiten pro Nutzersitzung):
  16% höher

Um die Ergebnisse zu validieren, haben wir uns an eine der größten unabhängigen Parteien gewandt: Google.

Seit dem angekündigten “Mobile Speed Update” für seinen Ranking-Algorithmus im vergangenen Sommer hat Google langsamen Webseiten den Krieg erklärt — indem es sie in den Suchergebnissen nach unten stuft. Um dieses Abwärts-Ranking transparent zu machen, sammelt Google Performancedaten von allen Chrome-Browsern, welche wiederum die vom Nutzer erlebte Seitengeschwindigkeit abbilden. Diese Daten werden im Chrome User Experience Report (CRUX) öffentlich zugänglich gemacht. Obwohl Google diese Daten nur auf der Ebene ganzer Monate und Domains verfolgt, sind CRUX-Daten ein hervorragendes Werkzeug, um langfristige Performancetrends zu beobachten.

Obwohl sie also keinen geeigneten A/B-Test ersetzen können, haben wir die CRUX-Daten analysiert, um die Frage zu beantworten: Wie sieht ein Monat mit Speed Kit aus im Vergleich zu einem Monat, in dem Speed Kit noch nicht aktiv war?

Das folgende Histogram veranschaulicht den Anteil der Nutzer mit einer bestimmten Seitenladezeit in einem Monat mit Speed Kit (blau) gegenüber einem Monat ohne Speed Kit (orange): Da niedrigere Seitenladezeiten besser sind, ist eine hohe Kurve auf der linken Seite in Kombination mit einer flachen Linie auf der rechten Seite optimal. Wie im Plot zu sehen ist, sahen die meisten Nutzer mit Speed Kit (blau) Seitenladezeiten unter 1s im Vergleich zu 2-4 s bei Nutzern ohne Speed Kit (orange).

Ausblick

“Performance ist momentan eines der wichtigsten Themen für jede E-Commerce-Webseite. AppelrathCüpper zeigt, wie sich Performance in einem Markt mit einer immer anspruchsvolleren Nutzerschaft zu einem echten Differenzierungsmerkmal entwickeln kann. Wir freuen uns auf eine lange und fruchtbare Partnerschaft — die Ladezeiten liegen jetzt zwar schon unter einer Sekunde auf appelrath.com, aber wir sind erst dann fertig, wenn sie nicht mehr wahrnehmbar sind.”

— Felix Gessert, CEO, Baqend

Das Team hinter Speed Kit

Baqend entwickelt Speed Kit als Performance-Add-on, das innovative Caching-Algorithmen einsetzt, um die Ladezeiten von E-Commerce-Webseiten zu minimieren. Dies hilft Geschäften und Marken, eine hohe Seitengeschwindigkeit in ihren Wettbewerbsvorteil zu verwandeln. Die Technologie von Baqend wird bereits von mehr als 5000 Webseiten genutzt, beispielsweise von Baur.de in der Otto Group. Mit einem Team von 15 Mitarbeitern ist es das Ziel von Baqend, für instantane Ladezeiten auf den Webseiten der eigenen Kunden zu sorgen.