Découvrez comment le marchand de prêt-à-porter en ligne a mis en corrélation les métriques Core Web Vitals et les métriques de performances avec les métriques métier, a constaté une augmentation des KPI et créé un "calculateur de cas d'utilisation des performances" pour prendre des décisions concernant ses produits et développer une culture de la performance.
Dans de nombreuses entreprises, les performances de vitesse de site Web et les métriques Core Web Vitals sont encore principalement perçues comme relevant de la responsabilité des équipes d'ingénierie. La vitesse du site peut devenir invisible pour d'autres secteurs de l'entreprise si l'importance de l'activité et de l'expérience client n'est pas comprise. Cela peut entraîner une négligence des performances lors de la prise de décisions clés et de la définition des feuilles de route.
Pour améliorer la culture de la performance au sein des équipes et améliorer considérablement leur expérience sur le Web, Farfetch, un détaillant de prêt-à-porter d'e-commerce de luxe, a lancé un projet visant à définir et utiliser des métriques de performances réellement axées sur le client. L'objectif était de les corréler avec les métriques commerciales afin de mettre en évidence l'impact des performances sur les KPI de l'entreprise.
Pourtant, leurs ambitions ne s'arrêtaient pas là. En fin de compte, l'objectif du projet était un changement culturel à grande échelle, en éliminant les silos au sein de l'organisation et en introduisant un nouveau langage orienté entreprise pour donner à chacun un moyen commun de parler de ce qui était considéré comme des sujets techniques auparavant. Pour l'équipe de Farfetch, les performances de vitesse du site Web étaient une responsabilité partagée, il était possible de faciliter la prise de décisions éclairées et de définir ces performances comme l'un des piliers d'une bonne expérience sur le Web.
Pour commencer, Farfetch a réalisé qu'un seul service ne pouvait pas y parvenir comme auparavant et a mis en place une équipe de base d'experts issus de divers domaines de l'entreprise (ingénierie, infrastructure, architecture et produit). Elle a mis en place une stratégie étape par étape pour repenser la façon dont l'entreprise abordait ce sujet.
Étape 1: Définir, mesurer et surveiller les métriques
Pour commencer, l'équipe de Farfetch avait besoin de mettre en place les outils de surveillance appropriés pour comprendre l'état actuel et les écarts au niveau des points de contact et des applications du parcours.
Elle a utilisé à la fois des données expérimentales et la surveillance des utilisateurs réels (données réelles) pour suivre les métriques Core Web Vitals, ainsi que d'autres métriques de performances axées sur l'utilisateur pour analyser l'état actuel des performances de vitesse. L'équipe a utilisé JavaScript et la bibliothèque web-vitals.js pour capturer les données, ce qui a permis à l'équipe d'analyse de produits d'obtenir une visibilité sur les métriques de performances en même temps que les métriques commerciales au cours de la même session, et ainsi commencer à examiner l'impact de l'une sur l'autre.
Le groupe pluridisciplinaire a entrepris d'identifier les métriques les plus importantes pour l'entreprise. Pour ce faire, l'équipe a analysé le parcours critique des utilisateurs de Farfetch et a essayé de relier ce parcours à des repères de performances. En plus des métriques Core Web Vitals décrites par Google, chacune représentant une facette distincte de l'expérience utilisateur, l'équipe a également utilisé du code JavaScript personnalisé pour suivre le temps avant le premier octet (TTFB), le First Contentful Paint (FCP), le First Paint et le Délai avant interactivité (TTI).
Les métriques sont collectées à l'aide de plusieurs méthodes de l'API Performance, de l'API Long Tasks et des polyfills de Google. Pour en savoir plus, consultez cet article du blog Farfetch Tech du milieu de l'année 2020 par Manuel Garcia, ingénieur principal senior pour le Web.
Côté analyse de données, Farfetch dispose de sa propre solution de suivi multicanal, appelée Omnitracking, qui est utilisée par les applications frontaux. Elle effectue le suivi des événements générés par les pages vues, les actions des utilisateurs et les actions du système. Le modèle de données Omnitracking est la solution de Farfetch pour l'analyse, l'exploration des données et la création de rapports. Elle repose sur les événements générés par les outils de suivi. L’objectif du modèle de données est d’aider et d’aider toute personne qui a besoin de comprendre:
- Comportement des utilisateurs
- Expérience utilisateur sur les applications Farfetch
- Utilisation des applications
- Macroconversions et microconversions
- Analyse cross-canal et de l'entonnoir
L'idée était alors d'ajouter à cette couche de données les données de performances de chaque page vue sur farfetch.com, capturées par JavaScript. En suivant ce modèle, nous avons pu garantir une correspondance entre les données de performances et les principales métriques de l'entonnoir de conversion pour chaque session, ainsi que la base d'une exploration analytique sur le thème.
Enfin, l'équipe de Farfetch a établi des budgets de performances basés sur le temps pour chaque métrique sur les principales pages de parcours, ainsi qu'un processus de gouvernance pour gérer les violations de budget. Elle a également commencé à intégrer des métriques de performances dans les pipelines CI afin de comprendre les écarts budgétaires le plus rapidement possible dans le flux de développement.
Étape 2: Communiquer dans un langage professionnel
Les données de performances étant désormais disponibles dans les ensembles de données internes d'informatique décisionnelle de Farfetch, l'équipe d'analyse a commencé à explorer des modèles et des schémas mathématiques pouvant indiquer une corrélation entre les métriques de performances et les KPI commerciaux (par exemple, le taux de conversion et le pourcentage de visites d'une seule page). L'objectif était de mieux comprendre l'impact financier de la vitesse du site et de l'expérience utilisateur pour l'entreprise. Cette approche a permis de discuter des performances dans un langage commun avec les décisionnaires en entreprise. L'analyse incluait toutes les métriques Core Web Vitals et les autres métriques jugées utiles par Farfetch. Elle a révélé des insights vraiment intéressants.
Google recommande que la métrique Largest Contentful Paint (LCP) reste inférieure à 2, 5 secondes afin d'offrir une expérience utilisateur optimale.Elle a donc soigneusement étudié ce seuil et obtenu des résultats significatifs.
L'analyse de la corrélation statistique par Farfetch a montré qu'au-delà de ce point, le taux de conversion commence à diminuer et le taux de sortie augmente. Cela montre que les utilisateurs commencent vraiment à ressentir l'inconvénient d'une lenteur du chargement de la page, et le taux de conversion diminue en moyenne de -1,3% à chaque LCP supérieur de 100 ms.
L'équipe de Farfetch a également constaté une diminution du taux de sortie de -3,1% pour chaque 0,01 de moins sur le score Cumulative Layout Shift (CLS). Cela confirme l'impact de la stabilité de la page sur la rétention des utilisateurs sur un site Web.
En ce qui concerne l'interactivité et la fluidité des pages, bien que le FID (First Input Delay) soit suivi et analysé en continu, Farfetch mesure également le TTI, qui s'est avéré très utile pour l'entonnoir de conversion commercial de Farfetch.
Pour cela, l'équipe a injecté du polyfill du TTI de Google dans le site Web afin de stocker cette métrique. Utilisation de l'API Long Tasks pour signaler les tâches longues (tâches qui prennent plus de 50 millisecondes sur le thread principal du navigateur).
L'équipe d'analyse a alors constaté que le taux de conversion augmentait de 2,8% pour chaque seconde de réduction du TTI, ce qui constitue un argument solide en faveur d'une meilleure efficacité du code et débouchage du thread principal du navigateur.
Au final, cette analyse a également permis de montrer que certaines métriques n'avaient pas d'impact significatif sur les KPI de l'entreprise, ou que d'autres seraient plus pertinentes à différentes étapes du parcours utilisateur. Cela nous a permis de mieux comprendre les opportunités à saisir à chaque étape de l'entonnoir de conversion.
Étape 3: Intégrer un changement culturel
La mise en avant des informations ci-dessus, ainsi que des études qualitatives sur la vitesse du site, était primordiale pour établir l'alignement avec les objectifs de l'entreprise, renforcer la sensibilisation de la direction et l'adhésion à une prise de décision basée sur les performances, tout au long des feuilles de route produit. Il était désormais possible de prouver l'importance des performances pour Farfetch.
Pour simplifier la hiérarchisation, Farfetch a créé un outil en libre-service appelé "Site Speed Business Case Calculator" (Calculateur de cas d'utilisation de la vitesse du site) en s'inspirant du Simulateur d'impact de la vitesse de Google. Elle permet à n'importe quel chef de produit de créer une analyse de rentabilisation basée sur l'amélioration des performances en calculant l'impact commercial à la volée. Grâce à un modèle de données qui met en corrélation le taux de conversion et les métriques d'expérience utilisateur, il est flexible de s'adapter à différents champs d'application des produits, appareils et points de contact du parcours utilisateur.
Dans le même temps, un ensemble de tableaux de bord analytiques en libre-service a créé une visibilité à l'échelle de l'entreprise sur les indicateurs de performance en temps réel et leur impact. Les performances sont désormais entièrement intégrées au développement de produits, et les équipes produit peuvent facilement accéder aux métriques, aux outils d'audit et au contrôle du budget de performances. De plus, grâce à l'intégration de la couche de données, les métriques de performances sont également disponibles dans les outils de tests A/B de Farfetch. Les responsables produit bénéficient ainsi d'un autre vecteur d'insights puissant.
Ces derniers mois, l'équipe de base est également en bonne voie pour instaurer cette culture non seulement au sein des équipes de développement front-end, mais aussi dans le domaine de la plate-forme, en utilisant des méthodologies similaires pour surveiller et prouver l'impact des principaux microservices et transactions.
Un certain nombre de présentations basées sur Farfetch ont été publiées sur ce sujet, mais également des mentions externes. Par exemple, une mention sur l'impact commercial des Core Web Vitals dans une conférence Google I/O de 2021. Cela a également contribué à assurer une pertinence continue du thème et a consolidé la stratégie de l'équipe en matière de culture.
Étape 4: Améliorer les métriques
En fin de compte, tout ce travail a permis à Farfetch d'améliorer objectivement les métriques de vitesse de son site Web, et de s'assurer que ses équipes respecteraient les meilleures pratiques et saisiraient des opportunités d'amélioration.
L'une des principales opportunités détectées en 2021 était la nécessité d'améliorer le LCP sur les deux principaux types de pages de Farfetch : les pages produit et les pages de fiches produit.
Les équipes ont examiné la façon dont elles chargeaient le contenu principal de ces pages. En s'appuyant sur une étude de cas ayant montré l'impact de la recherche de cette opportunité, ils ont pu:
- Adaptez le composant de chargement d'images du produit d'une solution JavaScript à une implémentation native.
- Définissez la priorité des images, puis répartissez-les entre les éléments critiques et les éléments non critiques.
- Chargez les images critiques à l'avance, avec la source déjà intégrée dans le code HTML et en utilisant
<link rel="preload">pour les télécharger dès que possible. - Utilisez l'attribut
<img loading="lazy">pour les images non critiques, avec un polyfill à l'aide d'Intersection Observer sur les navigateurs non compatibles, tels que Safari.
Cette approche lui a permis d'aller plus loin et d'effectuer des tests A/B de l'hypothèse et de l'impact commercial. Sur les pages de produits, par exemple, cet effort a permis de gagner plus de 600 ms. De plus, le test A/B a montré une augmentation du taux de conversion de 1 à 5% avec le niveau de confiance défini par l'entreprise.
Vous trouverez ci-dessous les améliorations que l'équipe a pu apporter en termes de pourcentage de pages vues considérées comme"bonnes", "améliorations nécessaires " et"médiocre", selon la définition de Google concernant le score LCP.
Avantages d'un site plus rapide et de meilleures pratiques de travail
La création d'une culture autour des performances et d'outils comme le calculateur de cas d'utilisation a permis à chacun de commencer à parler dans un langage commun compréhensible par les responsables produit, les partenaires et les ingénieurs. Cela a suscité des discussions continues sur la façon de hiérarchiser les nouvelles initiatives et l'amélioration des performances.
"Nous voulions briser le cycle des performances en étant une préoccupation technique, qui n'appartiendra qu'à l'équipe d'ingénieurs, qui est chargée de traiter et de résoudre les problèmes", explique Rui Santos, Senior Principal Product Manager de Farfetch. "Le lien entre les métriques de performances et les métriques commerciales s'est avéré étonnamment efficace pour faire passer le message dans les plus brefs délais. L'entreprise est le moteur de l'entreprise, et le fait de relier son succès aux métriques de vitesse a encouragé un plus grand nombre de personnes concernées à comprendre les décisions de compromis et à les gérer."
Dans le segment du commerce électronique de luxe, la rapidité ou la lenteur de votre site déterminent la façon dont les consommateurs perçoivent votre marque et la qualité de votre service dans son ensemble. Pour les utilisateurs, la qualité équivaut au luxe, et cela s'applique à tous les aspects de leur expérience, y compris les performances de votre site Web. L'impact de la vitesse du site sur le taux de conversion a été prouvé. Chez Farfetch, les performances occupent donc désormais une position sûre dans la planification à venir.