La vitesse sur eBay.com

Optimiser les performances des sites et applications d'eBay pour une expérience utilisateur plus rapide.

En 2019, Speed est une initiative à l'échelle de l'entreprise pour eBay, de nombreuses équipes étant déterminées à rendre le site et les applications aussi rapides que possible pour les utilisateurs. En effet, pour chaque amélioration de 100 millisecondes du temps de chargement d'une page de recherche, eBay a enregistré une augmentation de 0,5% du nombre d'ajouts au panier.

En adoptant des budgets de performances (basés sur une étude concurrentielle réalisée avec le rapport sur l'expérience utilisateur Chrome) et en se concentrant sur les métriques de performances clés, eBay a pu améliorer considérablement la vitesse du site.

Le rapport d'expérience utilisateur Chrome met également en avant ces améliorations.

Il reste encore du chemin à parcourir, mais voici ce qu'eBay a appris jusqu'à présent.

Performances Web "couches"

Les améliorations apportées par eBay étaient possibles grâce à la réduction ou "coupures" (en taille et en temps) de plusieurs entités participant au parcours d'un utilisateur. Cet article aborde des sujets pertinents pour la communauté des développeurs Web dans son ensemble, et non des sujets spécifiques à eBay.

Réduire la charge utile de toutes les ressources textuelles

L'un des moyens d'accélérer les sites consiste simplement à charger moins de code. eBay a réduit ses charges utiles de texte en supprimant tous les octets inutilisés et inutiles de réponses JavaScript, CSS, HTML et JSON diffusées auprès des utilisateurs. Auparavant, à chaque nouvelle fonctionnalité, eBay continuait à augmenter la charge utile de ses réponses, sans nettoyer ce qui était inutilisé. Cela s'est additionné au fil du temps et est devenu un goulot d'étranglement des performances. Les équipes ont généralement procrastiné cette activité de nettoyage, mais vous seriez surpris par les économies réalisées par eBay.

Le "cut" est ici les octets perdus 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 à l'écran n'ont pas la même importance. Le contenu situé au-dessus de la ligne de flottaison est plus essentiel qu'en dessous de la ligne de flottaison. Les applications iOS, Android, de bureau et Web en sont conscients, mais qu'en est-il des services ? L'architecture de service d'eBay comprend une couche appelée Experience Services, avec laquelle les interfaces (applications et serveurs Web spécifiques à la plate-forme) communiquent. Cette couche est spécialement conçue pour être basée sur la vue ou l'appareil, plutôt que sur une entité comme l'article, l'utilisateur ou la commande. eBay a ensuite introduit le concept de chemin critique pour les services d'expérience. Lorsqu'une requête parvient à 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 vidées instantanément. Les données de la partie en dessous de la ligne de flottaison sont envoyées dans un fragment ultérieur ou en chargement différé. Résultat: les utilisateurs peuvent voir plus rapidement le contenu au-dessus de la ligne de flottaison.

Le "cut" correspond ici au temps passé par les services pour afficher du contenu pertinent.

Optimisations d'images

Les images sont l'un des principaux contributeurs à l'augmentation de la taille des pages. Même les optimisations, même mineures, peuvent faire la différence. eBay a effectué deux optimisations pour les images.

Tout d'abord, eBay a adopté 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 de résultats de recherche est la page eBay contenant le plus d'images. Elle utilisait déjà WebP, mais pas selon un schéma cohérent.

Deuxièmement, bien que les images des offres d'eBay soient fortement optimisées (en taille et en format), la même rigueur ne s'appliquait 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 dépendaient de l'utilisateur ayant mis en ligne la vidéo. Désormais, eBay applique les règles dans ses outils de sorte que toutes les images importées soient optimisées de manière appropriée.

Ici, le "cut" correspond aux octets gaspillés envoyés aux utilisateurs.

Préchargement prédictif des éléments statiques

Une session utilisateur sur eBay ne se résume pas à une seule page. C'est un flux. Par exemple, le flux peut être une navigation de la page d'accueil à une page de recherche en passant par une page d'article. Alors pourquoi les pages du flux ne s'entraident-elles pas ? C'est le principe du préchargement prédictif, où une page précharge les éléments statiques requis pour la page probable suivante.

Avec le préchargement prédictif, lorsqu'un utilisateur accède à la page prédite, les éléments sont déjà dans le cache du navigateur. C'est le cas pour les éléments CSS et JavaScript, où les URL peuvent être récupérées à l'avance. Une chose à noter ici est que cela n'est utile que lors de la première navigation. Lors des navigations suivantes, les éléments statiques seront déjà dans le cache.

Le "cut" correspond au temps mis par le réseau pour les éléments statiques CSS et JavaScript lors de la première navigation.

Préchargement des meilleurs résultats de recherche

Lorsqu'un utilisateur effectue une recherche sur eBay, les données d'analyse d'eBay suggèrent qu'il est fort probable qu'il accède à un article figurant dans les 10 premiers résultats de recherche. eBay précharge donc les articles à partir de la recherche et les tient prêts pour la navigation de l'utilisateur. Le préchargement se produit à deux niveaux.

Le premier niveau s'effectue côté serveur : le service item met en cache les 10 premiers articles dans les résultats de recherche. Lorsque l'utilisateur accède à l'un de ces articles, eBay économise désormais le temps de traitement du serveur. La mise en cache côté serveur est exploitée par les applications spécifiques à une plate-forme et déployée 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 leur nature dynamique. Il existe également de nombreuses nuances: impressions de pages, capacité, enchères, etc. Pour en savoir plus, consultez la présentation de LinkedIn Performance Engineering Meetup ou restez à l'écoute pour un article de blog détaillé à ce sujet par les ingénieurs d'eBay.

Ici, le "cut" peut être le temps de traitement du serveur ou l'heure du réseau, selon l'endroit où l'élément est mis en cache.

Tentative de téléchargement d'images à rechercher

Sur la page de résultats de recherche, lorsqu'une requête est émise à 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 à ajouter des informations contextuelles sur les articles rappelés, telles que les frais de port. eBay envoie désormais immédiatement les 10 premières images des articles au navigateur avec l'en-tête, de sorte que les téléchargements puissent commencer avant l'arrivée du reste du balisage. Les images s'affichent ainsi plus rapidement. Cette modification est déployée dans le monde entier pour la plate-forme Web.

Le "cut" correspond à 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

Des suggestions s'affichent lorsque les utilisateurs saisissent des lettres dans le champ de recherche. Ces suggestions ne changent pas pour les combinaisons de lettres pendant au moins un jour. Ce sont des candidats idéaux pour être mis en cache et diffusés à partir d'un CDN (pour une durée maximale de 24 heures), au lieu de transmettre des requêtes jusqu'à un centre de données. La mise en cache CDN est particulièrement intéressante pour les marchés internationaux.

Mais il y avait un piège : eBay comportait des éléments de personnalisation dans le pop-up de suggestions, qui ne peuvent pas être mis en cache efficacement. 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 pouvaient être séparées. Pour le Web, sur les marchés internationaux, la latence était plus importante que le petit avantage de la personnalisation. Une fois cela en place, eBay propose désormais des suggestions automatiques à partir d'un cache CDN dans le monde entier pour les applications spécifiques à la plate-forme et pour les marchés d'eBay.com en dehors des États-Unis.

Le "cut" correspond ici à 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 de la page d'accueil

Pour la plate-forme Web, le contenu de la page d'accueil pour les utilisateurs non reconnus est le même pour une région particulière. Il s'agit des utilisateurs qui utilisent eBay pour la première fois ou qui démarrent une nouvelle session, et donc aucune personnalisation. Bien que les créations de la page d'accueil changent fréquemment, il reste de la place pour la mise en cache.

eBay a décidé de mettre en cache le contenu utilisateur non reconnu (HTML) sur son réseau périphérique (PoPs) pendant une courte période. Les nouveaux utilisateurs peuvent désormais afficher le contenu de la page d'accueil depuis un serveur situé à proximité, et non depuis un centre de données éloigné. eBay est encore en phase de test sur les marchés internationaux, où cela aura un impact plus important.

Ici encore, le "cut" représente à la fois la latence du réseau et le temps de traitement du serveur pour les utilisateurs non reconnus.

Optimisations pour d'autres plates-formes

Améliorations apportées à l'analyse des applications iOS/Android

Les applications iOS/Android communiquent avec des services de 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 un élément à l'écran, eBay a introduit 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. En outre, pour l'application Android, eBay commence à initialiser les contrôleurs de vue de la 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 qu'une fois que les utilisateurs avaient appuyé sur le bouton de recherche. Les utilisateurs peuvent désormais accéder aux résultats de recherche plus rapidement. Le "cut" correspond au temps passé par les appareils à afficher le contenu pertinent.

Améliorations apportées au temps de démarrage des applications Android

Cela s'applique aux optimisations de démarrage à froid pour les applications Android. Au démarrage à froid d'une application, une grande partie de l'initialisation a lieu au niveau du système d'exploitation et de l'application. La réduction du temps d'initialisation au niveau de l'application permet aux utilisateurs de voir l'écran d'accueil plus rapidement. eBay a effectué quelques profilages et a remarqué que certaines initialisations ne sont pas nécessaires pour afficher le contenu et que certaines peuvent être effectuées de manière différée.

Plus important encore, eBay a constaté qu'un appel de données analytiques tiers bloquait l'affichage à l'écran. Supprimer l'appel bloquant et le rendre asynchrone a encore facilité les temps de démarrage à froid. Le "cut" est ici le temps de démarrage inutile pour les applications Android.

Conclusions

Toutes les performances d'eBay ont contribué à faire progresser le monde, et ce sur une période donnée. Ces lancements ont été introduits progressivement tout au long de l'année. Chacun d'entre eux a été réduit de quelques dizaines de millisecondes, jusqu'au point qu'eBay est aujourd'hui:

Les performances sont une fonctionnalité et un avantage concurrentiel. Les expériences optimisées génèrent davantage d'engagement utilisateur, de conversions et de ROI. Dans le cas d'eBay, ces optimisations variaient des tâches nécessitant peu d'efforts à quelques optimisations.

Découvrez la vidéo Speed by a Thousand cuts (La vitesse en mille coupes) pour en savoir plus. Restez à l'affût des articles plus détaillés des ingénieurs d'eBay sur leur travail d'amélioration des performances dans un avenir proche.