Optimisation des performances des sites et applications eBay pour une expérience utilisateur plus rapide
La rapidité était une initiative à l'échelle de l'entreprise pour eBay en 2019, et de nombreuses équipes étaient déterminées à rendre le site et les applications aussi rapides que possible pour les utilisateurs. D'ailleurs, pour chaque diminution de 100 millisecondes du temps de chargement de sa page de recherche, eBay a enregistré une augmentation de 0,5% du nombre d'actions "Ajouter au panier".
100 ms
Amélioration du temps de chargement
0,5 %
Augmentation du nombre d'ajouts au panier
En adoptant les budgets de performances (dérivés après avoir effectué une étude concurrentielle avec le rapport d'expérience utilisateur Chrome) et en se concentrant sur les principales métriques de performances axées sur l'utilisateur, eBay a pu améliorer considérablement la vitesse de son site.
Les données du rapport d'expérience utilisateur Chrome confirment également ces améliorations.
Il reste encore du travail à faire, mais voici ce que nous avons appris jusqu'à présent.
"coupures" de performances Web
Les améliorations apportées par eBay ont été rendues possibles grâce à la réduction ou aux "coupures" (en termes de taille et de temps) des différentes entités qui participent au parcours d'un utilisateur. Cet article aborde des sujets qui concernent la communauté des développeurs Web en général, et non des sujets spécifiques à eBay.
Réduire la charge utile pour toutes les ressources textuelles
Pour accélérer les sites, il suffit de charger moins de code. eBay a réduit ses charges utiles textuelles en éliminant tous les octets inutilisés et inutiles des réponses JavaScript, CSS, HTML et JSON envoyées aux utilisateurs. Auparavant, à chaque nouvelle fonctionnalité, eBay augmentait la charge utile de ses réponses, sans nettoyer ce qui n'était pas utilisé. Au fil du temps, cela a représenté un goulot d'étranglement des performances. Les équipes ont généralement procrastiné cette activité de nettoyage, mais vous seriez surpris de voir combien eBay a économisé.
La "coupure" ici correspond aux octets gaspillés dans la charge utile de la réponse.
Optimisation du chemin critique pour le contenu au-dessus de la ligne de flottaison
Tous les pixels de l'écran n'ont pas la même importance. Le contenu au-dessus de la ligne de flottaison est plus critique que celui en dessous. Les applications iOS/Android/de bureau et Web en sont conscientes, mais qu'en est-il des services ? L'architecture de service d'eBay comporte une couche appelée Experience Services, avec laquelle les frontends (applications et serveurs Web spécifiques à la plate-forme) communiquent. Cette couche est conçue spécifiquement pour être basée sur la vue ou l'appareil, plutôt que sur une entité telle qu'un article, un utilisateur ou une commande. eBay a ensuite introduit le concept de chemin critique pour les services d'expérience. Lorsqu'une requête est envoyée à ces services, ils s'efforcent d'obtenir immédiatement les données du contenu au-dessus de la ligne de flottaison en appelant d'autres services en amont en parallèle. Une fois les données prêtes, elles sont immédiatement effacées. Les données situées en dessous de la ligne de flottaison sont envoyées dans un bloc ultérieur ou chargées de manière différée. Résultat: les utilisateurs voient plus rapidement le contenu au-dessus de la ligne de flottaison.
Le "coupure" désigne le temps passé par les services à afficher du contenu pertinent.
Optimisations des images
Les images sont l'un des principaux facteurs de gonflement des pages. Même les petites optimisations sont utiles. eBay a effectué deux optimisations pour les images.
Tout d'abord, eBay a standardisé le format d'image WebP pour les résultats de recherche sur toutes les plates-formes, y compris iOS, Android et les navigateurs compatibles. La page des résultats de recherche est la page la plus chargée d'images sur eBay. eBay utilisait déjà WebP, mais pas de manière cohérente.
Deuxièmement, bien que les images des fiches eBay soient fortement optimisées (en termes de taille et de format), la même rigueur ne s'applique pas aux images sélectionnées (par exemple, le module supérieur de la page d'accueil). eBay propose de nombreuses images sélectionnées manuellement, qui sont importées via divers outils. Auparavant, les optimisations étaient à la charge de l'utilisateur qui importait les images. Désormais, eBay applique les règles dans les outils afin que toutes les images importées soient optimisées de manière appropriée.
La "coupure" correspond aux octets d'image gaspillés envoyés aux utilisateurs.
Préchargement prédictif des éléments statiques
Une session utilisateur sur eBay ne se limite pas à une seule page. Il s'agit d'un flux. Par exemple, le flux peut consister en une navigation de la page d'accueil vers une page de recherche, puis vers une page d'article. Pourquoi les pages du parcours ne s'entraident-elles pas ? C'est l'idée du préchargement prédictif, où une page précharge les composants statiques requis pour la page suivante probable.
Avec le préchargement prédictif, lorsque l'utilisateur accède à la page prévue, les composants sont déjà dans le cache du navigateur. Cela est fait pour les composants CSS et JavaScript, dont les URL peuvent être récupérées à l'avance. Notez que cette fonctionnalité n'est utile que lors des premières navigations. Lors des navigations suivantes, les composants statiques seront déjà dans le cache.
La "coupure" ici correspond au temps réseau pour les composants statiques CSS et JavaScript lors de la première navigation.
Préchargement des résultats de recherche les plus fréquents
Lorsqu'un utilisateur effectue une recherche sur eBay, les données analytiques d'eBay suggèrent qu'il est très probable qu'il accède à un article figurant dans le top 10 des résultats de recherche. eBay précharge donc les articles de la recherche et les garde prêts pour la navigation de l'utilisateur. Le préchargement se produit à deux niveaux.
Le premier niveau se produit côté serveur, où le service d'articles met en cache les 10 premiers articles des résultats de recherche. Lorsque l'utilisateur accède à l'un de ces éléments, eBay économise désormais du temps de traitement du serveur. Le cache côté serveur est exploité par les applications spécifiques à la plate-forme et est déployé dans le monde entier.
L'autre niveau se produit dans le cache du navigateur, qui est disponible en Australie. Le préchargement des éléments était une optimisation avancée en raison de la nature dynamique des éléments. Il existe également de nombreuses nuances: impressions de pages, capacité, éléments d'enchères, etc. Pour en savoir plus, consultez la présentation de la rencontre sur l'ingénierie des performances de LinkedIn ou attendez un article de blog détaillé sur le sujet de la part des ingénieurs d'eBay.
La "coupure" ici peut correspondre au temps de traitement du serveur ou au temps réseau, en fonction de l'emplacement de l'élément mis en cache.
Téléchargement anticipé des images de recherche
Sur la page des résultats de recherche, lorsqu'une requête est envoyée à un niveau élevé, deux choses se produisent. La première est l'étape de rappel/classement, au cours de laquelle les éléments les plus pertinents correspondant à la requête sont renvoyés. La deuxième étape consiste à enrichir les éléments rappelés d'informations supplémentaires liées au contexte utilisateur, telles que les frais de port. eBay envoie désormais immédiatement les 10 premières images des articles au navigateur dans un bloc avec l'en-tête, afin que les téléchargements puissent commencer avant que le reste du balisage n'arrive. Les images s'affichent donc plus rapidement. Cette modification est déployée dans le monde entier pour la plate-forme Web.
"cut" correspond ici à l'heure de début du téléchargement des images des résultats de recherche.
Mise en cache périphérique pour les données de suggestion automatique
Lorsque les utilisateurs saisissent des lettres dans le champ de recherche, des suggestions s'affichent. Ces suggestions ne changent pas pour les combinaisons de lettres pendant au moins une journée. Ils sont des candidats idéaux pour être mis en cache et diffusés à partir d'un CDN (pendant 24 heures maximum), au lieu que les requêtes soient acheminées jusqu'à un centre de données. Les marchés internationaux profitent particulièrement de la mise en cache CDN.
Il y avait cependant un problème. eBay proposait des éléments de personnalisation dans le pop-up de suggestions, qui ne peuvent pas être mis en cache de manière efficace. Heureusement, ce n'était pas un problème dans les applications spécifiques à la plate-forme, car l'interface utilisateur pour la personnalisation et les suggestions pouvait être séparée. Pour le Web, sur les marchés internationaux, la latence était plus importante que le petit avantage de la personnalisation. eBay diffuse désormais les suggestions automatiques à partir d'un cache CDN dans le monde entier pour les applications spécifiques à la plate-forme et les marchés en dehors des États-Unis pour eBay.com.
La "coupure" ici correspond à la latence du réseau et au temps de traitement du serveur pour les suggestions automatiques.
Mise en cache périphérique pour les utilisateurs non reconnus sur la page d'accueil
Pour la plate-forme Web, le contenu de la page d'accueil des utilisateurs non reconnus est le même pour une région donnée. Il s'agit d'utilisateurs qui utilisent eBay pour la première fois ou qui démarrent une nouvelle session. Aucune personnalisation n'est donc appliquée. Même si les créations de la page d'accueil changent fréquemment, la mise en cache reste possible.
eBay a décidé de mettre en cache le contenu utilisateur non reconnu (HTML) sur son réseau de périphérie (PoPs) pendant une courte période. Les nouveaux utilisateurs peuvent désormais accéder au contenu de la page d'accueil à partir d'un serveur situé à proximité, au lieu d'un centre de données éloigné. eBay teste toujours cette fonctionnalité sur les marchés internationaux, où elle aura un impact plus important.
La "coupure" ici concerne à nouveau la latence réseau et le temps de traitement du serveur pour les utilisateurs non reconnus.
Optimisations pour d'autres plates-formes
Améliorations de l'analyse des applications iOS/Android
Les applications iOS/Android communiquent avec des services backend dont le format de réponse est généralement JSON. Ces charges utiles JSON peuvent être volumineuses. Au lieu d'analyser l'intégralité du fichier JSON pour afficher quelque chose à l'écran, eBay a mis en place un algorithme d'analyse efficace qui optimise le contenu qui doit être affiché immédiatement.
Les utilisateurs peuvent désormais voir le contenu plus rapidement. De plus, pour l'application Android, eBay commence à initialiser les contrôleurs de vue de recherche dès que l'utilisateur commence à saisir du texte dans le champ de recherche (cette optimisation était déjà disponible sur iOS). Auparavant, cela ne se produisait que lorsque les utilisateurs appuyaient sur le bouton de recherche. Les utilisateurs peuvent désormais accéder plus rapidement à leurs résultats de recherche. "Cut" (coupure) désigne le temps que les appareils mettent à afficher du contenu pertinent.
Améliorations du temps de démarrage des applications Android
Cela s'applique aux optimisations du temps de démarrage à froid pour les applications Android. Lorsqu'une application est démarrée à froid, de nombreuses initialisations se produisent à la fois au niveau de l'OS et de l'application. Réduire le temps d'initialisation au niveau de l'application permet aux utilisateurs de voir l'écran d'accueil plus rapidement. eBay a effectué un profilage et a constaté que toutes les initialisations n'étaient pas nécessaires pour afficher du contenu et que certaines pouvaient être effectuées de manière paresseuse.
Plus important encore, eBay a constaté qu'un appel d'analyse tiers bloquant retardait le rendu à l'écran. La suppression de l'appel bloquant et sa conversion en appel asynchrone ont encore amélioré les temps de démarrage à froid. La "coupure" ici correspond au temps de démarrage inutile des applications Android.
Conclusions
Toutes les "coupures" de performances d'eBay ont contribué à faire bouger les choses, et ce sur une période donnée. Les versions ont été déployées progressivement tout au long de l'année, avec une réduction de dizaines de millisecondes à chaque version, jusqu'à atteindre le niveau actuel d'eBay:
Les performances sont une fonctionnalité et un avantage concurrentiel. Les expériences optimisées améliorent l'engagement des utilisateurs, le nombre de conversions et le retour sur investissement. Dans le cas d'eBay, ces optimisations variaient de simples actions à des actions plus avancées.
Pour en savoir plus, consultez Améliorer les performances en mille morceaux. Vous pourrez bientôt lire des articles plus détaillés des ingénieurs eBay sur leur travail en termes de performances.