L'équipe a analysé les données de 10 millions de visites sur ses pages de destination et a constaté une forte corrélation entre Largest Contentful Paint et taux de conversion.
Groupe Renault est un constructeur automobile français d'envergure internationale, présent dans plus de 130 pays. Pour un groupe automobile tel que Renault, les sites de marque performants qui génèrent davantage d'engagement utilisateur et de conversions signifient plus d'activité. L'ensemble des sites de sa marque vise à offrir la meilleure expérience utilisateur possible à grande échelle, tout en préservant la flexibilité du contenu et des fonctionnalités pour les sites localisés. Dans ce contexte, le contrôle des performances est un enjeu clé pour l'équipe chargée de l'expérience client, qui est chargée du développement et de la maintenance de la plate-forme mondiale.
Mesurer l'impact commercial des Core Web Vitals
Mesures dans Google Analytics
En collaboration avec 55, son partenaire mondial pour les données, Renault a configuré la bibliothèque Web-Vitals. Celle-ci permet d'envoyer à Google Analytics toutes les métriques Core Web Vitals d'utilisateurs réels de façon à correspondre précisément à la façon dont elles sont mesurées par Chrome et transmises aux autres outils Google.
L'analyse suivante présente un jeu de données capturé à l'aide de ces outils sur quatre mois entre décembre 2020 et mars 2021.
L'optimisation du LCP est étroitement liée à l'engagement utilisateur et aux métriques commerciales.
Les équipes ont identifié une corrélation particulièrement forte entre un Largest Contentful Paint (LCP) faible et des taux de rebond et de conversion favorables, comme le montre la visualisation ci-dessous.
L'ensemble de données capture plus de 10 millions de visites sur quatre mois dans 33 pays. Il montre le lien entre les mesures du LCP plus faibles et:
- des taux de rebond moins élevés
- Plus de conversions (formulaires pour prospects remplis)
Il est intéressant de noter que le site Web fonctionne comme une application monopage (SPA), et toutes ces mesures sont capturées uniquement sur les pages de destination. Les données montrent que l'optimisation du site Web en vaut la peine jusqu'à ce que le LCP soit inférieur à une seconde. Les sites de marque du groupe ne doivent jamais être trop optimisés !
Cet ensemble de données montre non seulement la corrélation négative entre le LCP et les métriques métier, mais il met également en évidence les écarts de performances parmi les pages de destination les plus performantes. Dans le contexte de ce site Web, un LCP inférieur à une seconde entraîne une forte augmentation des conversions et une réduction du rebond.
Eja Rakotoarimanana, consultante, cinquante-cinq
Une amélioration d'une seconde du LCP peut entraîner une diminution de 14 points de pourcentage du taux de rebond et une augmentation de 13% du nombre de conversions.
| Amélioration du LCP de 1 seconde | Résultat |
|---|---|
| LCP d'environ 1 s | Taux de conversion +13 % |
| LCP inférieur à 1,6 s | Taux de rebond : -14 pts |
| LCP supérieur à 1,6 s | Taux de rebond : -5 pts |
Approche de Renault pour optimiser les Core Web Vitals à grande échelle
Depuis début 2020, dans les cinq principaux marchés européens de la marque, le nombre de visiteurs bénéficiant d'un LCP rapide (moins de 2,5 s) a augmenté de 22 points de pourcentage pour les domaines Renault (de 51% à 73%).
Voici l'approche qu'ils ont adoptée.
Optimisation centrale de l'application monopage
Du point de vue de la plate-forme, les performances sont depuis des années une priorité, et l'intégration des métriques Core Web Vitals a été fluide. Les équipes centrales ont mis en place une solution de surveillance complète (avec Google Lighthouse et l'API Chrome UX Report) et ont instauré une culture de la performance dans l'ensemble de l'entreprise. Plusieurs stratégies ont été mises en place pour optimiser l'application monopage, parmi lesquelles:
- Le rendu côté serveur (SSR) pour garantir un First Contentful Paint (FCP) rapide.
- Répartition du code pour ne diffuser que les fragments JavaScript et CSS nécessaires à la page de destination (pour améliorer le LCP et le FID)
- CDN avec un niveau élevé de mise en cache des ressources (y compris Lambda@Edge pour trier et supprimer les paramètres de requête inutiles) Cela a permis d'éviter les inconvénients de la SSR (un TTFB plus lent en raison du calcul du serveur) et de diffuser le contenu au plus près de l'utilisateur final (pour un meilleur TTFB et LCP).
- Optimiser la compression avec brotli pour réduire la taille du code.
- HTTP2 pour activer le multiplexage des requêtes et des réponses.
- Utilisez des images responsives avec les attributs WebP et
srcsetetsizespour diffuser la taille et le format d'image les plus appropriés aux utilisateurs. - Images, vidéos et iFrames au chargement différé utilisant
IntersectionObserveret des FPO (petites vignettes de 1 Ko). - Suppression des scripts bloquants et ajustement de la transpilation sur les cibles du navigateur pour réduire la taille des fichiers JS (en évitant les polyfills inutiles).
- Réduire la taille du conteneur Google Tag Manager pour charger des scripts tiers uniquement en cas de besoin.
- Réduction du nombre de polices personnalisées, utilisation des formats woff/woff2 avec plage Unicode et
font-display:swappour réduire la taille des fichiers de police et afficher le texte dès que possible, même si les polices personnalisées ne sont pas encore disponibles. - Le préchargement des images héros, qui sont souvent des éléments LCP.
L'équipe travaille actuellement sur des améliorations futures, telles que:
- La fonctionnalité Server push permet d'améliorer le FCP en diffusant les fichiers CSS plus rapidement. (En veille en raison du manque de compatibilité avec AWS et de proposition d'abandon.
- L'hydratation progressive pour améliorer le FID.
- Compatibilité avec le module ES6 afin d'offrir une expérience plus rapide en utilisant les versions ES6 pour les navigateurs récents.
L'approche SPA peut améliorer les performances, car une actualisation de la page entière n'est pas nécessaire lorsque les utilisateurs parcourent d'autres pages. Cela dit, les méthodologies de mesure Core Web Vitals actuelles sur les applications monopages peuvent être perçues comme un inconvénient, car les transitions d'itinéraire ne sont pas mesurées. Par conséquent, les chargements de page relativement plus rapides au cours d'une session ne sont pas pris en compte, en raison de la mise en cache de l'interface utilisateur. De plus, il est difficile de comparer les Core Web Vitals à celles d'un site Web concurrent d'applications multipages, où un cache chaud réduirait les mesures sur chaque page consultée par un utilisateur au cours d'une session. Pour en savoir plus, consultez les questions fréquentes sur les métriques Web Vitals concernant l'application monopage.
Il s'agit de limitations connues qui font l'objet d'un examen par les équipes produit Chrome. Une mise à jour de la métrique CLS a déjà été envoyée pour améliorer la mesure des applications monopages.
Les performances nécessitent une surveillance constante, car plusieurs équipes techniques peuvent y avoir une incidence. Malgré les limites dans la façon dont elles sont mesurées dans les applications monopages, les métriques Core Web Vitals nous permettent de suivre l'impact des mesures prises par nos équipes. Nous espérons que les transitions d'itinéraire seront bientôt prises en compte.
Cedric Bazureau, responsable technique, Renault
Consignes locales promouvant l'optimisation des performances en tant que responsabilité partagée
Les performances sont annoncées comme une responsabilité à la fois mondiale (centrale) et locale. Les équipes ont élaboré une série de bonnes pratiques que les propriétaires de contenu locaux sont censés suivre. Voici quelques exemples tirés de ces consignes:
- Optimisez le conteneur Google Tag Manager local pour améliorer les performances du site (par exemple, déclenchez certaines balises de manière conditionnelle).
- Limitez la taille du contenu vidéo en le compressant à l'aide d'outils internes ou en l'hébergeant sur une plate-forme externe (comme YouTube).
- Évitez d'importer des images via Google Tag Manager.
Pour optimiser en permanence les sites de nos marques, il est essentiel de bien comprendre nos performances numériques. L'approche de notre équipe chargée de l'expérience client consiste à fournir une plate-forme mondiale qui a un impact positif sur les résultats commerciaux des équipes locales, tout en leur donnant les consignes et bonnes pratiques nécessaires pour maintenir ces performances à un niveau élevé.
Alexandre Perruche, responsable des performances, Renault
Pour conclure, les performances du site Web ont toujours été une priorité chez Renault, et sa plate-forme est constamment optimisée. En mesurant les Core Web Vitals parallèlement à des métriques métier, l'entreprise a pu promouvoir ce sujet en tant que responsabilité partagée à l'échelle mondiale. En outre, les consignes locales donnent aux équipes la possibilité de participer à cet effort bénéfique.