Der E-Commerce-Modehändler hat Core Web Vitals und Leistungsmesswerte mit Unternehmensmesswerten in Verbindung gebracht, einen Anstieg bei den KPIs festgestellt und einen „Performance Business Case Calculator“ entwickelt, um Produktentscheidungen zu optimieren und eine Leistungskultur zu schaffen.
In vielen Unternehmen werden die Leistung der Websitegeschwindigkeit und Core Web Vitals nach wie vor meist als Aufgabe der Entwicklerteams angesehen. Die Websitegeschwindigkeit kann für andere Bereiche des Unternehmens unsichtbar werden, wenn das Unternehmen und die Kundenerfahrung nicht nachvollziehbar sind. Dies kann dazu führen, dass die Leistung übersehen wird, wenn wichtige Entscheidungen getroffen und Roadmaps definiert werden.
Der E-Commerce-Modehändler von Farfetch wollte die teamübergreifende Leistungskultur verbessern und die Nutzererfahrung im Web erheblich verbessern. Er startete ein Projekt, bei dem echte kundenorientierte Leistungsmesswerte definiert und genutzt werden sollten. Ihr Ziel war es, diese mit Geschäftsmetriken in Beziehung zu setzen, um zu veranschaulichen, wie sich die Leistung auf die KPIs des Unternehmens auswirkt.
Ihre Ambitionen endeten damit aber nicht. Das Ziel des Projekts war es, die kulturelle Veränderung in großem Umfang zu fördern: Silos innerhalb des Unternehmens aufzubrechen und eine neue geschäftsorientierte Sprache einzuführen, um allen eine gemeinsame Möglichkeit zu bieten, darüber zu sprechen, was früher als technische Themen galt. Das Team von Farfetch wollte die Leistung der Websitegeschwindigkeit als gemeinsame Verantwortung betrachten, fundierte Entscheidungen ermöglichen und als Grundpfeiler einer guten Weberfahrung etablieren.
Zu Beginn stellte Farfetch fest, dass eine einzelne Abteilung dies nicht wie zuvor erreichen konnte, und stellte ein Kernteam aus Experten aus verschiedenen Bereichen des Unternehmens – Engineering, Infrastruktur, Architektur und Produkt – zusammen, die eine Schritt-für-Schritt-Strategie erarbeitete, um die Herangehensweise des Unternehmens an dieses Thema zu überarbeiten.
Schritt 1: Messwerte definieren, messen und überwachen
Zunächst brauchte Farfetch die richtigen Monitoring-Tools, um den aktuellen Zustand und Abweichungen zwischen Touchpoints und Anwendungen zu verstehen.
Das Unternehmen verwendete Labdaten und echte Nutzerüberwachung (Felddaten), um Core Web Vitals nachzuverfolgen, und zusätzliche nutzerorientierte Leistungsmesswerte, um den aktuellen Leistungszustand der Geschwindigkeit zu analysieren. Die Daten wurden mithilfe von JavaScript und der web-vitals.js-Bibliothek erfasst. So konnte das Produktanalyseteam in derselben Sitzung die Leistungsmesswerte neben den Unternehmensmesswerten sichtbar machen und untersuchen, wie sich die beiden aufeinander auswirken.
Die multidisziplinäre Gruppe wollte herausfinden, welche Kennzahlen für das Unternehmen am wichtigsten sind. Dazu untersuchte das Unternehmen den kritischen Pfad der Farfetch-Nutzer und versuchte, diesen Prozess mit Leistungsmarkierungen zu verknüpfen. Zusätzlich zu den von Google beschriebenen Core Web Vitals-Messwerten, die jeweils einen bestimmten Aspekt der Nutzererfahrung darstellen, wurden auch benutzerdefiniertes JavaScript verwendet, um Time to First Byte (TTFB), First Contentful Paint (FCP), First Paint und Time to Interactive (TTI) zu erfassen.
Die Messwerte werden mithilfe verschiedener Methoden der Performance API, der Long Tasks API und der Polyfills von Google erfasst. Weitere Informationen finden Sie in diesem Farfetch Tech-Blogpost von Mitte 2020 von Manuel Garcia, Senior Principal Engineer for the Web.
Im Bereich Data Analytics hat Farfetch eine eigene Multi-Channel-Tracking-Lösung namens Omnitracking, die von Frontend-Anwendungen genutzt wird. Er erfasst die durch Seitenaufrufe, Nutzeraktionen und Systemaktionen generierten Ereignisse. Das Omnitracking-Datenmodell ist die Lösung von Farfetch für Fälle von Analysen, Datenexploration und Berichterstellung. Es basiert auf den von Trackern generierten Ereignissen. Das Ziel des Datenmodells ist es, allen zu helfen und zu unterstützen, die Folgendes verstehen müssen:
- Nutzerverhalten
- Nutzererfahrung mit Farfetch-Apps
- Anwendungsnutzung
- Makro- und Mikro-Conversions
- Kanal- und trichterübergreifende Analyse
Anschließend sollten die mit JavaScript erfassten Leistungsdaten für jeden Seitenaufruf auf farfetch.com dieser Datenschicht hinzugefügt werden. Nach diesem Modell war für jede Sitzung eine Übereinstimmung zwischen den Leistungsdaten und den Messwerten des Haupt-Conversion-Trichters und der Grundlage für eine analytische explorative Datenanalyse zu diesem Thema sichergestellt.
Zu guter Letzt erstellte Farfetch zeitbasierte Leistungsbudgets für jeden Messwert auf den Hauptseiten zum Kaufprozess sowie einen Governance-Prozess zur Bewältigung von Budgetverstößen. Außerdem haben sie damit begonnen, Leistungsmesswerte in CI-Pipelines einzubinden, um Budgetabweichungen so schnell wie möglich im Entwicklungsablauf nachzuvollziehen.
Schritt 2: In Unternehmenssprache kommunizieren
Nachdem nun Leistungsdaten in den internen Business-Intelligence-Datasets von Farfetch verfügbar waren, begann das Analyseteam, mathematische Modelle und Muster in den Daten zu untersuchen, die auf eine Korrelation zwischen Leistungsmesswerten und geschäftlichen KPIs hinweisen (z. B. Conversion-Rate und Prozentsatz der Besuche einer einzigen Seite) und so einen neuen Überblick über die finanziellen Auswirkungen der Websitegeschwindigkeit und der Nutzerfreundlichkeit für das Unternehmen boten. Auf diese Weise konnte die Leistung in einer gemeinsamen Sprache mit den Entscheidungsträgern des Unternehmens besprochen werden. Die Analyse umfasste alle Core Web Vitals und die anderen Messwerte, die von Farfetch als wertvoll eingestuft wurden. Das Ergebnis sind wirklich relevante Erkenntnisse.
Da Google für eine optimale Nutzererfahrung den Largest Contentful Paint (LCP) empfiehlt, hat Farfetch diesen Grenzwert sorgfältig untersucht und aussagekräftige Ergebnisse erzielt.
Die statistische Korrelationsanalyse von Farfetch zeigte, dass nach diesem Punkt die Conversion-Rate sinkt und die Ausstiegsrate steigt. Die Nutzer spüren den langsamen Seitenaufbau wirklich und die Conversion-Rate sinkt mit jedem 100 ms mehr LCP im Durchschnitt um 1,3 %.
Darüber hinaus bestätigte Farfetch einen Rückgang der Ausstiegsrate um -3,1% pro Wert von 0,01 beim Cumulative Layout Shift (CLS)-Wert. Damit bestätigt sich, dass die Seitenstabilität dazu beitragen, dass Nutzer auf einer Website bleiben.
Im Hinblick auf die Seiteninteraktivität und -flüssigkeit misst Farfetch zwar kontinuierlich den First Input Delay (FID)-Wert, misst Farfetch aber auch die TTI, die sich im Hinblick auf den Geschäfts-Conversion-Trichter von Farfetch als sehr wirkungsvoll erwiesen haben.
Dazu wurde der TTI-Polyfill von Google in die Website eingefügt, um diesen Messwert zu speichern. Lange Aufgaben mit dem API für lange Aufgaben erstellen (Aufgaben, die im Hauptthread des Browsers länger als 50 Millisekunden dauern).
Das Analyseteam stellte dann fest, dass die Conversion-Rate bei jeder Sekunde Reduzierung der TTI um 2,8% stieg, was ein gutes Argument für eine bessere Codeeffizienz und das Entfernen des Hauptthreads des Browsers war.
Letztendlich zeigte die Analyse auch, dass einige Messwerte keinen wesentlichen Einfluss auf die geschäftlichen KPIs hatten oder dass andere in verschiedenen Phasen des Kaufprozesses relevanter wären. So erhielten wir einen umfassenden Überblick über die Möglichkeiten, die sich an jedem Punkt des Conversion-Trichters bieten.
Schritt 3: Kulturelle Veränderung einbetten
Die oben genannten Erkenntnisse zusammen mit qualitativen Nutzerstudien zur Wahrnehmung der Websitegeschwindigkeit durch die Nutzer waren entscheidend, um die Unternehmensziele zu erreichen, die Bekanntheit und die Akzeptanz für die leistungsbasierte Entscheidungsfindung über Produkt-Roadmaps hinweg zu sichern. Damit konnte bewiesen werden, wie viel Leistung für Farfetch wert war.
Farfetch hat ein Self-Service-Tool namens „Site Speed Business Case Calculator“ entwickelt, um die Priorisierung zu vereinfachen. Es ließ sich dabei vom Google-Tool „Speed Impact Calculator“ inspirieren. So kann jeder Produktmanager anhand von Leistungsverbesserungen einen Business Case erstellen, indem er die Auswirkungen auf das Geschäft direkt berechnet. Mit einem Datenmodell, das die Korrelation zwischen Conversion-Rate und Messwerten zur Nutzererfahrung verwendet, können Sie flexibel an unterschiedliche Produktbereiche, Geräte und Touchpoints im Kaufprozess angepasst werden.
Gleichzeitig hat eine Reihe von analytischen Self-Service-Dashboards einen unternehmensweiten Überblick über Leistungsindikatoren in Echtzeit und ihre Auswirkungen auf das Geschäft geschaffen. Die Leistung ist mittlerweile vollständig in die Produktentwicklung integriert und die Produktteams haben einfachen Zugriff auf Metriken, Prüftools und die Überwachung des Leistungsbudgets. Dank der Einbindung der Datenschicht sind Leistungsmesswerte auch in den Farfetch-Tools für A/B-Tests verfügbar, sodass Produktmanager eine weitere leistungsstarke Quelle für Einblicke sind.
In den letzten Monaten ist das Kernteam ebenfalls auf dem richtigen Weg, diese Kultur nicht nur in den Frontend-Entwicklungsteams, sondern auch innerhalb des Plattformbereichs zu etablieren, wobei ähnliche Methoden verwendet werden, um die Auswirkungen der wichtigsten Mikrodienste und -transaktionen zu überwachen und nachzuweisen.
Es gab eine Reihe von Farfetch-Präsentationen zu diesem Thema, aber auch externe Erwähnungen. Ein Beispiel wäre eine Erwähnung in einem Google I/O-Vortrag von 2021 über die geschäftlichen Auswirkungen von Core Web Vitals. Dies trug auch dazu bei, dass das Thema kontinuierlich relevant wurde und die Kulturstrategie des Teams festigte.
Schritt 4: Messwerte verbessern
Letztendlich musste der gesamte Aufwand dazu beitragen, dass Farfetch seine Messwerte zur Websitegeschwindigkeit objektiv verbessert und dafür gesorgt hat, dass die Teams Best Practices in ihrer Klasse umsetzen und Verbesserungsmöglichkeiten verfolgen.
Eine der wichtigsten Optimierungsmöglichkeiten im Jahr 2021 war die Verbesserung des LCP-Werts für die beiden Hauptseitentypen Farfetch: Produktseiten und Seiten mit Produkteinträgen.
Die Teams konzentrierten sich darauf, wie sie die Hauptinhalte dieser Seiten laden. Gerüstet mit einem Business Case, der aufgezeigt hat, welche Vorteile sich aus dieser Chance ergeben, konnte das Unternehmen:
- Die Komponente zum Laden des Produktbilds von einer JavaScript-basierten Lösung an eine native Implementierung anpassen
- Legen Sie die Priorität der Bilder fest und unterteilen Sie sie in kritische und nicht kritische Assets.
- Laden Sie wichtige Bilder frühzeitig, wobei die Quelle bereits inline im HTML-Code ist, und verwenden Sie
<link rel="preload">, damit sie so schnell wie möglich heruntergeladen werden. - Verwenden Sie das Attribut
<img loading="lazy">für nicht kritische Bilder mit einem Polyfill für Intersection Observer in nicht unterstützten Browsern wie Safari.
Damit waren sie in der Lage, die Hypothese und die geschäftlichen Auswirkungen durch A/B-Tests zu beweisen. Auf Produktseiten konnte dieser Aufwand beispielsweise um mehr als 600 ms reduziert werden. Der A/B-Test ergab einen Anstieg der Conversion-Rate im Bereich von 1 bis 5% unter Berücksichtigung des vom Unternehmen definierten Konfidenzniveaus.
Im Folgenden finden Sie die Verbesserungen, die das Team basierend auf dem Prozentsatz der Seitenaufrufe erzielen konnte, die gemäß der Google-Definition des LCP-Werts als „gut“, „verbesserungsbedürftig“ und „schlecht“ eingestuft wurden.
Die Vorteile einer schnelleren Website und besserer Arbeitsweisen
Durch den Aufbau einer Kultur in Bezug auf Leistung und Tools wie den Business Case-Rechner konnten alle eine gemeinsame Sprache sprechen, die von Produktmanagern, Stakeholdern und Engineers gleichermaßen verstanden werden kann. Dies hat zu laufenden Diskussionen darüber geführt, wie neue Initiativen und Leistungsverbesserungen priorisiert werden sollten.
„Wir wollten den Leistungszyklus als rein technisches Problem durchbrechen, der sich ausschließlich dem Engineering-Team kümmert und das Problem behebt“, erklärt Rui Santos, Web Channels Senior Principal Product Manager bei Farfetch. „Die Verbindung von Leistungsmesswerten mit Geschäftsmesswerten war überraschend effektiv und vermittelte die Botschaft sehr, sehr schnell. Das Geschäft treibt das Unternehmen voran und die Verbindung seines Erfolgs mit Geschwindigkeitsmetriken ermutigte eine breitere Gruppe von Stakeholdern, die Kompromisse zu verstehen und zu meistern.“
Ob Ihre Website im Luxus-E-Commerce-Segment schnell oder langsam ist, kann sich darauf auswirken, wie Ihre Marke und die Qualität Ihrer Dienstleistung insgesamt wahrgenommen werden. Für Nutzer bedeutet Qualität für Luxusartikel – und dies gilt für jeden Aspekt der Nutzererfahrung, auch für die Leistung Ihrer Website. Da die Websitegeschwindigkeit sich nachweislich auf die Conversion-Rate auswirkt, nimmt die Leistung bei der Planung von Farfetch nun einen sicheren Platz ein.