Publié le 19 mars 2025
T-Mobile est une entreprise de télécommunications de premier plan aux États-Unis, qui offre une couverture réseau étendue et une connectivité 5G rapide.
En analysant les métriques Web Vitals de vrais utilisateurs, T-Mobile a constaté que l'amélioration des Core Web Vitals pouvait avoir un impact significatif sur l'expérience utilisateur et les métriques métier.
Dans un effort continu d'améliorer sa présence numérique, T-Mobile a amélioré les Core Web Vitals de son site Web, en particulier la Largest Contentful Paint (LCP), afin d'améliorer l'expérience utilisateur et, par conséquent, les métriques commerciales clés.
Sensibiliser les utilisateurs aux performances Web grâce aux données
Consciente de l'importance croissante d'offrir une expérience utilisateur de qualité sur le Web, l'équipe SEO et l'équipe produit de T-Mobile ont lancé une initiative conjointe visant à améliorer les performances de leur site Web. La première étape a consisté à mettre les Core Web Vitals au premier plan des discussions avec les personnes concernées, en veillant à ce qu'ils soient reconnus comme une priorité absolue. Il s'agit d'une difficulté couramment rencontrée par les équipes de développement de nombreuses entreprises.
Pour résoudre ce problème, T-Mobile a adopté une stratégie basée sur les données. Conscients que les données de laboratoire de Lighthouse et les données des rapports d'expérience utilisateur Chrome (CrUX) ne pouvaient offrir qu'une vue partielle du récit des performances, ils ont intégré la bibliothèque JavaScript Web Vitals aux propriétés Web de T-Mobile pour capturer et analyser directement les données de performances (appelées données d'utilisation réelles) provenant d'utilisateurs réels.
En intégrant les données Core Web Vitals du terrain à sa suite d'analyse, T-Mobile a obtenu plusieurs points de données intéressants, dont les suivants:
- Impact sur l'expérience utilisateur: les visiteurs de T-Mobile.com sont plus enclins à quitter le site lorsque les pages mettent plus de temps à se charger.
- Impact sur l'activité: les taux de conversion de T-Mobile.com diminuent lorsque les pages mettent plus de temps à se charger.
Les données ont clairement montré la corrélation entre les performances du site Web de T-Mobile et ses métriques commerciales.
En estimant l'impact sur les revenus pour des segments de 100 millisecondes de la LCP, l'équipe a pu attirer l'attention de la direction, qui a mis en place une équipe de travail interfonctionnelle pour améliorer les performances du site Web. En présentant des données claires et en mesurant l'opportunité, les équipes SEO et produit de T-Mobile ont efficacement communiqué l'importance d'améliorer les métriques Core Web Vitals.
Évoluer les améliorations des performances Web pour un impact maximal
Pour répondre de manière globale aux défis de performances, l'équipe T-Mobile a entrepris une série d'améliorations techniques en gardant à l'esprit l'évolutivité. Ces efforts visaient à optimiser les composants critiques et à exploiter les technologies pour assurer des gains de performances durables sur leurs plates-formes numériques.
Impact sur l'expérience client
Les efforts déployés pour améliorer les performances du site ont permis de réduire de 42% le LCP (Largest Contentful Paint) global:
Cette amélioration a eu plusieurs impacts positifs sur l'expérience utilisateur, par exemple:
Impact sur l'entreprise
Les temps de chargement des pages plus rapides ont également contribué à un parcours d'achat plus efficace. Le taux de conversion des visites de prospects ayant un objectif d'achat a ainsi augmenté de 60% au cours de la même période.
Principales améliorations des performances qui ont propulsé T-Mobile
Vous trouverez ci-dessous la liste détaillée des principales initiatives et de leurs impacts respectifs:
Mise en cache et refactoring des API
Les API, y compris les API Products et Promotions, ont été mises en cache et refactorisées pour améliorer les temps de réponse et réduire la charge du serveur. Le transfert vers un réseau de diffusion de contenu (CDN) pour l'optimisation de la mise en cache a largement contribué à ces améliorations.
Mettre en cache des composants statiques
Les éléments statiques, y compris JavaScript, les feuilles de style et les bibliothèques clientes, étaient mis en cache pour réduire les temps de chargement. L'utilisation de la mise en cache CDN et des paramètres de cache optimisés a permis d'améliorer la vitesse de diffusion et de réduire la charge du serveur. Cette optimisation a joué un rôle crucial dans l'amélioration des performances globales du site.
Optimisation des composants Image
L'équipe a optimisé les composants d'image en réduisant leur taille, en utilisant des formats d'image modernes comme WebP et en implémentant des images responsives pour garantir la meilleure qualité avec la plus petite taille de fichier possible.
Précharger et pré-charger des composants
Les ressources critiques ont été préchargées et prétéléchargées pour s'assurer qu'elles étaient disponibles immédiatement en cas de besoin. Cela a réduit le temps d'attente des utilisateurs et amélioré les temps de chargement des pages.
Préconnexions aux domaines critiques et améliorations du script anti-clignotement
L'équipe a implémenté des préconnexions aux domaines critiques pour établir des connexions anticipées, réduisant ainsi la latence de récupération des ressources. De plus, nous avons amélioré le script anti-clignotement pour réduire le clignotement du contenu et assurer une expérience utilisateur plus fluide.
Migration de la plate-forme Adobe Experience Manager (AEM)
L'équipe a migré vers une version plus récente de sa plate-forme frontale, qui offre de meilleures performances et des améliorations de l'infrastructure.
Migration des composants Angular vers les composants d'usine AEM
Les composants Angular ont été migrés vers les composants d'usine Adobe Experience Manager (AEM) afin de simplifier l'architecture et d'améliorer les performances et la facilité de maintenance.
Principales optimisations des pages de destination
Nous avons notamment optimisé les carrousels d'images, utilisé Adobe webSDK, prolongé le délai de cache pour les contenus multimédias dynamiques, compressé les charges utiles et mis à jour les conceptions d'images pour améliorer les temps de chargement et l'expérience utilisateur.
Réduction des erreurs dans les API
L'équipe a réduit le nombre d'erreurs sur plusieurs pages clés d'e-commerce, ce qui a permis de garantir une diffusion de données plus fiable et d'améliorer les interactions des utilisateurs.
Cultiver une culture des performances Web en démocratisant les données
Pour s'assurer de rester engagé dans l'excellence des performances Web, T-Mobile a mis en place plusieurs mesures clés dans l'ensemble de l'entreprise. Ces initiatives visent à démocratiser l'accès aux données de performances, à sensibiliser et à engager notre équipe, à surveiller de manière proactive les Core Web Vitals et à appliquer des normes de performances à toutes les versions de code. Les stratégies suivantes décrivent comment elles cultivent une culture de performances Web en rendant les données accessibles, en favorisant l'apprentissage continu et en établissant des pratiques de gouvernance robustes.
Démocratisation des données Core Web Vitals
T-Mobile a utilisé des tableaux de bord Looker Studio robustes pour rendre les données de performances accessibles à tous les membres de l'entreprise. De plus, un wiki complet sur les performances Web aide les membres de l'équipe à interpréter et à utiliser efficacement les rapports Core Web Vitals.
Tableau de bord Looker Studio de T-Mobile présentant les métriques Core Web Vitals en temps réel. De gauche à droite, cela indique:
- Compteur de vitesse: 75e percentile de tous les événements LCP capturés au cours de la période sélectionnée.
- Graphique en courbes: tendance quotidienne des scores au 75e centile sur la période sélectionnée.
- Graphique à secteurs : répartition en pourcentage des notes "Bon", "Amélioration nécessaire" et "Médiocre" sur la période sélectionnée.
- Graphique en courbes empilées: tendance quotidienne de la répartition en pourcentage des notes "Bon", "Amélioration nécessaire" et "Médiocre" sur la période sélectionnée.
Formation et engagement continus
Le responsable produit et SEO organise régulièrement des roadshows sur les performances Web et des sessions de transfert de connaissances. Ces initiatives sensibilisent et engagent l'ensemble de l'équipe, favorisant un engagement continu en faveur de l'excellence des performances Web.
Système d'alerte pour les Core Web Vitals
Un système d'alerte a été mis en place pour surveiller les métriques Core Web Vitals de différents groupes de pages. Lorsque les métriques Core Web Vitals atteignent un certain seuil de référence, une alerte par e-mail est automatiquement envoyée aux personnes concernées.
Exigences de performances pour les versions de code
T-Mobile a également établi des exigences de performances pour les versions de code. Les pages doivent atteindre des niveaux de performances spécifiques dans Lighthouse avant de pouvoir être lancées. Cela permet de garantir des normes de performances Web élevées.
En mettant en œuvre ces mesures, T-Mobile peut s'assurer que les performances Web restent une priorité et continue de favoriser une culture d'amélioration continue.
Remerciements
Merci à tous ceux qui ont travaillé sur les performances du site Web de T-Mobile et sur cette étude de cas: Kevin Lau, Monique Misrahi, Bill Dinger, Laura Mathisen, Suresh Gundu, Duke Fong, Amir Mohammadi, Liang Yeh, Jennifer Panke, Julia Edgar, Ejaz Malik, Damon Jochum, Will Fraley, Gene McKenna, Vinayak Hegde et Warren McNeel.
Cette étude de cas a été développée en collaboration entre T-Mobile et ses partenaires de solutions client chez Google, Ilya Motamedi, Dakota Deady et Christine Zanedis, dont les insights et l'aide ont contribué au succès de cette initiative.