En mesurant les métriques Web Vitals des utilisateurs réels, Rakuten 24 a également constaté qu'un LCP (Largest Contentful Paint) efficace pouvait entraîner une augmentation du taux de conversion de 61,13%.
Rakuten 24 est une boutique en ligne qui collabore avec des grands fabricants multinationaux et des biens de consommation domestiques pour offrir ses produits essentiels au quotidien : santé, boissons, articles pour animaux de compagnie, produits pour bébés, etc. Ce magasin est proposé par Rakuten Group, Inc., l'un des leaders mondiaux des services Internet, et figure parmi les entreprises les plus performantes sur sa plate-forme de place de marché numérique au Japon.
Comprenant l'impact des performances Web sur l'expérience utilisateur, l'équipe Rakuten 24 mesure, optimise et surveille en continu les métriques Core Web Vitals et d'autres métriques.
Par conséquent, plus de 75% de leurs utilisateurs enregistrent des conditions correctes : Largest Contentful Paint (LCP), First Input Delay (FID) et First Contentful Paint (FCP). Toutefois, ils travaillent toujours sur les améliorations du CLS (Cumulative Layout Shift).
Après avoir analysé les données de sa page d'accueil, Rakuten 24 a découvert qu'un bon score LCP peut conduire à:
- Une augmentation du taux de conversion pouvant atteindre 61,13 %
- 26,09% de revenus par visiteur.
- 11,26% de la valeur moyenne de la commande.
- Un score FID satisfaisant peut entraîner une augmentation du taux de conversion pouvant atteindre 55,88 %.
Pour établir une corrélation plus étroite entre les métriques Core Web Vitals et les métriques commerciales, Rakuten 24 a également effectué un test A/B visant à optimiser les Core Web Vitals et les métriques associées, et a constaté une amélioration des:
- 53,37% de revenus par visiteur.
- un taux de conversion de 33,13 %.
- 15,20% en moyenne.
- 9,99% du temps passé en moyenne.
- Une réduction de 35,12% du taux de sortie.
Mettez en avant l'opportunité
Bien que l'optimisation des performances Web soit un investissement judicieux pour améliorer l'expérience utilisateur et la croissance de l'entreprise, l'équipe Rakuten 24 sait à quel point il peut être difficile de convaincre les personnes concernées d'adopter les Core Web Vitals et de se concentrer sur les performances Web. Elle est convaincue que le meilleur moyen de les convaincre est de montrer exactement aux partenaires le type d'optimisation des performances en termes de retour sur investissement (ROI).
Rakuten 24, un service relativement nouveau et indépendant, a tiré parti de sa flexibilité pour relever le défi. Ils pensent que le résultat de leur étude de cas les aiderait à prendre des décisions plus basées sur les données à l'avenir, ainsi qu'à aider d'autres développeurs à mesurer l'impact de leur travail et à convaincre les personnes concernées que l'amélioration des performances en vaut la peine. Découvrez dans cet article comment elle a procédé.
Optimiser JavaScript et les ressources
- Éliminez les ressources qui bloquent l'affichage.
- Divisez le code et utilisez un
import()dynamique. - Divisez tout le contenu en plusieurs parties et chargez des fichiers HTML situés dans la partie en dessous de la ligne de flottaison.
- Exécutez et chargez du code JavaScript à la demande.
- Identifiez les ressources JavaScript lentes et optimisez le processus de chargement en utilisant l'attribut asynchrone dans les balises
<script>et en établissant les premières connexions aux origines importantes (indices de ressources tels quedns-prefetch,preconnectetpreload). - Supprimez le code inutilisé, et réduisez et compressez le code.
- Utilisez un CDN.
- Contrôlez la mise en cache à l'aide de Service Worker avec Workbox.
Optimiser les images
- Chargement différé des images dans la partie en dessous de la ligne de flottaison
- Optimisez les images avec un CDN, diffusez des images correctement dimensionnées, compressez les images et adoptez les formats d'image adaptés à la tâche (WebP, SVG, polices Web).
Optimiser le CLS
- Utilisez le code CSS
aspect-ratioafin de réserver l'espace requis pour les images pendant leur chargement. - Utilisez le
min-heightCSS pour réduire les décalages de mise en page lorsque les éléments sont chargés de manière différée.
Mesure des performances
En plus d'utiliser PageSpeed Insights pour auditer son site Web, l'équipe voulait trouver un meilleur moyen de savoir ce que les utilisateurs expérimentent réellement sur le terrain. Par conséquent, Rakuten 24 a décidé d'utiliser la bibliothèque JavaScript web-vitals pour mesurer les métriques Core Web Vitals et d'autres métriques sur le terrain, et d'envoyer les données à son outil d'analyse interne.
Analyse des performances
L'équipe a analysé les données collectées sur le terrain pour déterminer s'il existe une corrélation entre les métriques Core Web Vitals et les principales métriques commerciales. Elle a découvert que les utilisateurs ayant réalisé une conversion avaient tendance à enregistrer un meilleur LCP que les autres.
Les données collectées ont également révélé que:
- Un bon LCP peut entraîner une augmentation de 61,13% du taux de conversion, de 26,09% des revenus par visiteur et de 11,26% du panier moyen.
- Un bon FID peut entraîner une augmentation du taux de conversion pouvant atteindre 55,88% par rapport à la moyenne globale des données.
Surveillance des performances
L'équipe a créé un tableau de bord de surveillance des performances à l'aide des données collectées sur le terrain et de l'outil de veille économique. Ce point est important pour surveiller la progression et prévenir les régressions.
Tests A/B
Convaincue que les tests A/B permettent de mesurer efficacement l'impact commercial de l'optimisation des performances, l'équipe a optimisé une de ses pages de destination pour les métriques Core Web Vitals, puis a comparé la version optimisée avec la page d'origine via un test A/B pendant un mois. Pour que le test fournisse des résultats significatifs, l'entreprise a choisi une page de destination enregistrant un trafic important et un nombre important de conversions. Pendant la durée du test, 50% du trafic a été redirigé vers la page de destination optimisée (version A) et 50% vers la page d'origine (version B). La seule différence entre la version A et la version B est que la version A était optimisée pour les Core Web Vitals et qu'il n'y avait aucune autre différence fonctionnelle ou visuelle.
Le chargement de la version optimisée A s'est terminé 0,4 seconde plus tôt lors du test de chargement sur mobile et ne montre aucun décalage de mise en page important. En fait, le CLS de la version A a augmenté de 92,72% par rapport à la version B. Les autres scores Web Vitals se sont également améliorés: le FID a augmenté de 7,95%, le FCP a augmenté de 8,45% et le TTFB a augmenté de 18,03%.
En comparant la version optimisée A à la version non optimisée B, Rakuten 24 a constaté que la version A permettait d'obtenir les résultats suivants:
- Augmentation de 53,37% des revenus par visiteur
- 33,13% d'augmentation du taux de conversion
- 15,20% d'augmentation de la valeur moyenne des commandes.
- Augmentation de 9,99% du temps moyen passé
- Réduction de 35,12% du taux de sortie
Conclusion
L'optimisation des performances sur le Web représente un défi, mais gratifiant. En adoptant une approche basée sur les données, Rakuten 24 a réussi à améliorer l'expérience utilisateur et à mesurer l'impact positif sur son activité. Comprenant qu'il ne s'agit que d'une partie du parcours, et non de la destination, l'entreprise va continuer à améliorer son site Web pour offrir aux acheteurs en ligne des expériences plus agréables.
L'optimisation nécessite un effort commun, et les développeurs n'ont pas à être seuls dans ce processus. En partageant leurs difficultés et leurs réussites, Rakuten 24 espère que davantage de développeurs pourront utiliser les données des métriques Core Web Vitals pour développer une compréhension mutuelle avec les personnes concernées, puis travailler ensemble pour améliorer l'expérience utilisateur et développer l'activité.