Publié le 28 janvier 2025
Cette étude de cas explique comment Ray-Ban a amélioré ses métriques LCP en utilisant l'API Speculation Rules pour accélérer les futures navigations des utilisateurs à l'aide du préchargement, et comment cela a amélioré les performances commerciales de sa plate-forme d'e-commerce. Le succès de cette approche a ensuite encouragé Ray-Ban à examiner d'autres options pour améliorer les performances de la même manière, par exemple en rendant les pages éligibles à bfcache.
Ray-Ban est une marque de lunettes emblématique réputée pour ses styles intemporels, comme les Aviator et Wayfarer, qui allient des designs classiques à des tendances modernes. En tant que leader reconnu dans le domaine des lunettes, le canal d'e-commerce de Ray-Ban joue un rôle essentiel pour assurer la compétitivité de l'entreprise, en attirant plus de 80 millions de visiteurs uniques par an.
En tant que canal commercial clé, Ray-Ban continue d'améliorer l'expérience utilisateur de sa plate-forme d'e-commerce. L'entreprise comprend l'importance des Core Web Vitals et leur impact direct sur l'expérience utilisateur de la plate-forme.
L'approche continue de Ray-Ban pour améliorer son critical user journey
En raison de la nature de l'architecture MPA (Multi-Page Application) utilisée sur la plate-forme d'e-commerce de Ray-Ban, chaque fois qu'un utilisateur interagit avec un lien ou un bouton nécessitant une nouvelle page, le navigateur envoie une requête de navigation au serveur, qui répond avec une nouvelle page HTML. Ray-Ban doit donc s'assurer que les utilisateurs bénéficient d'une expérience de navigation fluide, en particulier sur sa page d'informations produit (PDP), qui a été identifiée comme l'un des points d'entrée les plus utilisés et qui constitue un élément essentiel de l'entonnoir de conversion.
Grâce à une refonte récemment effectuée, Ray-Ban a amélioré ses métriques Core Web Vitals. Toutefois, il reste encore des améliorations à apporter, en particulier lorsque l'utilisation intensive de bibliothèques externes est nécessaire pour offrir une expérience utilisateur interactive, ce qui augmente la métrique Largest Contentful Page (LCP) par rapport aux autres pages.
C'est pourquoi Ray-Ban a choisi d'implémenter le chargement spéculatif pour améliorer le parcours utilisateur critique sur son site. L'utilisation de règles de spéculation peut être l'une des solutions les plus efficaces pour réduire la vitesse de chargement perçue des pages pour les futures navigations, car elle précharge et prérend le contenu des pages que l'utilisateur visitera ensuite.
Stratégie de préchargement spécifique à l'appareil de Ray-Ban
Ray-Ban a adopté deux stratégies de préchargement distinctes pour tenir compte des différences de comportement et de ressources entre les ordinateurs et les appareils mobiles. Ces stratégies visaient à maximiser les performances sans compromettre les fonctionnalités existantes du site Web ni l'expérience utilisateur.
Sur ordinateur, le prérendu est exécuté en pointant sur les cartes de produits sur la page de fiche produit, à l'aide du paramètre d'impatience "moderate" et en transmettant en tant que sélecteur une classe d'identification des mêmes cartes.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container"
}
]
},
"eagerness": "moderate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Étant donné que l'événement hover n'est pas disponible sur les appareils mobiles, le prérendu est exécuté à l'aide d'un paramètre d'impatience immediate sur les quatre premières cartes, qui ont été identifiées comme étant les plus cliquées.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
}
]
},
"eagerness": "immediate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Résultats du prérendu
Les deux stratégies de préchargement ont eu un impact significatif sur les métriques Core Web Vitals des pages produit de Ray-Ban et sur les tendances des KPI d'entreprise.
| Appareil | LCP | Variation du taux de conversion | Modification du taux de sortie | Taux de préchargement | ||
|---|---|---|---|---|---|---|
| Avant | Après | Modifier | ||||
| Mobile | 4,69 s | 2,66 s | 43,28% | +101,47% | -13,25% | 29 % |
| Ordinateur | 3,03 s | 1,74 s | 42,57% | +156,16% | -13,18% | 50 % |
Les métriques commerciales des utilisateurs qui consultaient la page produit du serveur ont été comparées à celles de ceux qui consultaient la page produit prérendu. Après avoir collecté des données dans l'espace de travail de suivi Adobe pour les utilisateurs disposant de navigateurs compatibles avec l'API (comme Chrome), Ray-Ban a constaté des améliorations significatives qui démontrent que les utilisateurs peuvent naviguer plus facilement sur le site. Pour les autres navigateurs, où le prérendu n'est pas pris en charge, Ray-Ban a décidé de précharger les ressources au moment de l'événement hover sur ordinateur et pour les quatre premières cartes de la PLP sur les appareils mobiles.
L'implémentation de l'API Speculation Rules pour le prérendu a été un changement radical pour la plate-forme d'e-commerce de Ray-Ban. Grâce à ces stratégies innovantes, Ray-Ban a amélioré son LCP de 43% sur ordinateur et sur mobile, ce qui a considérablement amélioré l'expérience utilisateur.
Cette optimisation a non seulement permis de charger les pages presque instantanément, mais aussi de bénéficier de nombreux avantages de l'architecture SPA tout en conservant l'architecture MPA actuelle, en particulier sur les pages critiques telles que la page produit détaillée.
Du point de vue commercial, les améliorations ont été transformatives, comme le confirment les tests A/B:
- Augmenter les taux de conversion:
- Les taux de conversion sur mobile sur les pages produit ont augmenté de manière significative de 101,47%.
- Les taux de conversion sur ordinateur ont connu une hausse encore plus impressionnante de 156,16%.
- Amélioration de l'engagement utilisateur:
- Le nombre moyen de pages vues par session a augmenté de 51,95% sur mobile et de 65,30% sur ordinateur, ce qui indique une navigation plus fluide et un intérêt plus soutenu des utilisateurs. Remarque: Nous n'avons pas considéré les pages prérendues qui n'ont pas été activées comme "vues".
- Taux de sortie réduits:
- Les taux de sortie (% d'utilisateurs qui quittent une page par rapport au nombre de pages vues pour cette page) ont diminué de 13,25% sur mobile et de 13,18% sur ordinateur, ce qui montre une meilleure fidélisation lors des moments d'achat critiques.
Étendre la fonctionnalité pour offrir une navigation plus instantanée aux utilisateurs
Compte tenu des excellents résultats obtenus avec le prérendu des pages produit détaillées, Ray-Ban a décidé de maximiser davantage le potentiel de l'API Speculation Rules en prérendant également les liens vers les pages produit détaillées dans le menu. Cette approche permet d'améliorer considérablement la vitesse de chargement (et donc le LCP) des types de pages de catalogue et de produits.
Bien que le préchargement facilite les futures navigations, Ray-Ban observe également une part importante de navigations aller-retour entre la page produit principale et la page produit détaillée. Étant donné que les résultats du test de préchargement montrent clairement qu'une navigation optimisée des utilisateurs est directement corrélée à de bonnes métriques commerciales, Ray-Ban a également examiné le cache avant/arrière (bfcache).
Le bfcache est une optimisation de navigateur qui permet de naviguer instantanément vers les pages précédentes et suivantes en conservant en mémoire un instantané des pages éligibles dans l'historique du navigateur et en les restaurant sans passer par le réseau. Pour nous assurer que les fiches produit et les fiches produit détaillées de Ray-Ban sont éligibles à bfcache, nous avons effectué plusieurs mises à jour rapides:
- Désactive l'événement
unloadet restreint l'accès aux API Bluetooth et accéléromètre de l'appareil à l'aide d'une valeur d'en-têtePermissions-Policydeunload=(), bluetooth=(), andaccelerometer=(). - Fermez les connexions RTC et IndexedDB lors de l'événement
pagehide. - Évitez d'utiliser inutilement l'en-tête de réponse
Cache-Control: no-store.
En activant la prise en charge du bfcache sur les pages produit où la navigation avant/arrière représentait jusqu'à 40% du trafic, alors que le taux de réussite du bfcache était nul, nous avons constaté une amélioration de près de 30% du LCP et de 83% du CLS.
| Métriques | 2024-10-13 > 2024-11-9 | 2024-11-24 > 2024-12-21 | Delta |
|---|---|---|---|
| LCP | 3 725 ms | 2 674 ms | -28,21% |
| INP | 521 ms | 395 ms | -24,18% |
| CLS | 0,46 | 0,08 | -82,61% |
| Taux de succès du cache amélioré | 0.02% | 72,90% | +72,87 pp |
Conclusion
Ces résultats illustrent le potentiel du prérendu pour améliorer considérablement les performances d'un site d'e-commerce. En préchargeant les pages en fonction du comportement des utilisateurs pour les futures navigations, Ray-Ban a non seulement amélioré les Core Web Vitals, mais aussi amélioré l'engagement utilisateur et augmenté les ventes. Cet avantage a renforcé l'engagement de Ray-Ban à offrir une navigation fluide, non seulement pour les futures navigations, mais aussi pour les navigations avant/arrière fournies par bfcache.
Cette étude de cas montre comment l'utilisation de techniques modernes de performances Web peut combler l'écart entre les métriques techniques et les KPI métier, en établissant un nouveau benchmark pour l'expérience utilisateur et le succès de l'e-commerce.
Un merci tout particulier à Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard et Jeremy Wagner pour leur contribution à ce travail.