Optimización del rendimiento de los sitios y aplicaciones de eBay para una expérience utilisateur más rápida.
La vitesse était un initiative à l'échelle de l'entreprise pour eBay en 2019, de nombreuses équipes étant déterminées à rendre le site et les applications aussi rapides que possible pour les utilisateurs. En fait, Pour chaque 100 millisecondes d'amélioration du temps de chargement de la page de recherche, eBay a constaté une augmentation de 0,51 TTP1T du nombre «Ajouter au panier».
100em
Temps de chargement amélioré
0,5%
Augmentation du nombre de "Ajouter au panier"
En adoptant des budgets de performance (dérivés après avoir mené une étude concurrentielle avec le Rapport d'expérience utilisateur Chrome) y un enfoque en métricas clave de rendimiento centradas en el Nom d'utilisateur, eBay pudo realizar mejoras significativas en la velocidad del sitio.
Améliorations de la vitesse EBay.
… Et vos données du rapport sur l'expérience utilisateur de Chrome mettent également en évidence ces améliorations.
Données du rapport d'expérience utilisateur Chrome pour la première peinture Contentful et le premier délai d'entrée pour la source eBay.com.
Il y a encore du travail à faire, mais voici les leçons d'eBay à ce jour.
«Cortes» de rendimiento la toile
Les améliorations apportées par eBay ont été rendues possibles par la réduction des effectifs ou des «coupes» (en taille et en temps) de diverses entités impliquées dans le parcours d'un utilisateur. Cet article couvre des sujets pertinents pour la communauté des développeurs Web en général, plutôt que des sujets spécifiques à eBay.
Réduisez la charge utile sur toutes les ressources texte
Una forma de hacer que los sitios sean rápidos es simplemente cargar menos código. eBay redujo la carga útil de texto recortando todos los bytes innecesarios y no utilizados de las respuestas de JavaScript, CSS, HTML y JSON que se ofrecen a los usuarios. Anteriormente, con cada nueva función, eBay seguía aumentando la carga útil de sus respuestas, sin limpiar lo que no se usaba. Esto se acumuló con el tiempo y se convirtió en un cuello de botella de rendimiento. Los equipos generalmente postergaban esta actividad de limpieza, pero te sorprendería cuánto ahorró eBay.
La «coupure» ici correspond aux octets gaspillés dans la charge utile de réponse.
Optimización de la ruta crítica para el Contenu de la mitad superior de la página
Tous les pixels de l'écran ne sont pas aussi importants. Le contenu au-dessus du pli c'est plus critique que quelque chose en dessous du pli. Les applications natives et Web en sont conscientes, mais qu'en est-il des services? L'architecture de service d'EBay a une couche appelée
Expérience des services, avec lesquels les interfaces (applications natives et serveurs Web) parlent. Cette couche est spécifiquement conçue pour être basée sur la vue ou l'appareil, plutôt que sur l'entité, comme les articles, les utilisateurs ou les commandes. Ensuite, eBay a introduit le concept du chemin critique pour les services d'expérience. Lorsqu'une demande parvient à ces services, ils s'efforcent d'obtenir immédiatement les données de contenu de la moitié supérieure de la page, appelant d'autres services en amont en parallèle. Une fois que les données sont prêtes, elles sont instantanément supprimées. Les données au bas de la page sont envoyées dans un bloc ultérieur ou chargées paresseusement. Résultat: les utilisateurs peuvent voir plus rapidement le contenu de la moitié supérieure de la page.
Le «seuil» est ici le temps que les services passent à afficher un contenu pertinent.
Optimisations d'image
Les images sont l'un des plus gros contributeurs au gonflement des pages. Même de petites optimisations sont très utiles. eBay a effectué deux optimisations pour les images.
Premièrement, eBay a normalisé le format d'image WebP pour les résultats de recherche sur toutes les plates-formes, y compris iOS, Android et navigateurs pris en charge. La page de résultats de recherche est la page avec le plus d'images sur eBay, et ils utilisaient déjà WebP, mais pas de manière cohérente.
Imágenes WebP que se muestran en navigateurs compatibles en eBay.com.
Deuxièmement, bien que les images des annonces eBay soient hautement optimisées (à la fois en taille et en format), la même rigueur n'a pas été appliquée aux images sélectionnées (par exemple, le module supérieur de la
page principal). eBay propose de nombreuses images triées sur le volet, qui sont téléchargées via divers outils. Auparavant, les optimisations dépendaient de l'uploader, mais maintenant eBay applique les règles dans les outils, de sorte que toutes les images téléchargées seront optimisées de manière appropriée.
La "coupe" ici est des octets d'image gaspillés envoyés aux utilisateurs.
Pré-acquisition prédictive des actifs statiques
Une session utilisateur sur eBay n'est pas qu'une page. C'est un flux. Par exemple, le flux peut être une navigation de la page d'accueil vers une page de recherche vers une page d'élément. Alors pourquoi les pages du flux ne s'aident-elles pas? C'est l'idée de la prélecture prédictive, dans laquelle une page pré-récupère les actifs statiques nécessaires pour la prochaine page probable.
Con la captación previa predictiva, cuando un usuario navega a la página prevista, los activos ya están en la cache du le navigateur. Esto se hace para los activos de CSS y JavaScript, donde las URL se pueden recuperar con anticipación. Una cosa a tener en cuenta aquí es que solo ayuda en la primera navegación. En navegaciones posteriores, los activos estáticos ya estarán en la caché.
La «coupure» est ici l'heure du réseau pour les actifs CSS et JavaScript statiques lors de la première navigation.
Obtention antérieure des meilleurs résultats de recherche
Lorsqu'un utilisateur effectue une recherche sur eBay, les analyses d'eBay suggèrent que l'utilisateur est très susceptible de naviguer vers un article dans les 10 premiers résultats de recherche. Ainsi, eBay récupère désormais les éléments de la recherche et les garde prêts pour la navigation de l'utilisateur. La pré-absorption se produit à deux niveaux.
El primer nivel ocurre en el lado del serveur, donde el servicio de elementos almacena en caché los 10 elementos principales en los resultados de búsqueda. Cuando el usuario accede a uno de esos artículos, eBay ahora ahorra tiempo de procesamiento en el servidor. El almacenamiento en caché del lado del servidor es aprovechado por aplicaciones nativas y se implementa globalmente.
El otro nivel ocurre en la caché del navegador, que está disponible en Australia. La captación previa de elementos fue una optimización avanzada debido a la naturaleza dinámica de los elementos. También tiene muchos matices: impressions de página, capacidad, artículos de subasta, etc. Puedes aprender más sobre esto en Présentation de la réunion LinkedIn Performance Engineering, o permanezca atento a una publicación de Blog detallada sobre el tema de los ingenieros de eBay.
La "coupure" ici peut être le temps de traitement du serveur ou l'heure du réseau, selon l'endroit où l'élément est stocké.
Téléchargement impatient des images de recherche
Sur la page des résultats de recherche, lorsqu'une requête de haut niveau est émise, deux choses se produisent. L'une est l'étape de récupération / tri, où les éléments les plus pertinents correspondant à la requête sont renvoyés. La deuxième étape consiste à augmenter les articles rappelés avec des informations supplémentaires liées au contexte de l'utilisateur, telles que les frais d'expédition. eBay envoie désormais immédiatement les 10 premières images des éléments au navigateur dans un extrait de code avec l'en-tête, de sorte que les téléchargements peuvent commencer avant l'arrivée du reste du balisage. En conséquence, les images apparaîtront désormais plus rapidement. Ce changement est mis en œuvre globalement pour la plate-forme Web.
La «coupure» correspond à l'heure de début du téléchargement des images à partir des résultats de recherche.
Mise en cache Edge pour les données d'autosuggestion
Lorsque les utilisateurs saisissent des lettres dans la zone de recherche, des suggestions s'affichent. 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 servis à partir d'un CDN (pour un maximum de 24 heures), au lieu que les demandes parviennent à un centre de données. Les marchés internationaux bénéficient en particulier de la mise en cache CDN.
Sin embargo, había una trampa. eBay tenía algunos elementos de personalización en la ventana emergente de sugerencias, que no se pueden almacenar en caché de manera eficiente. Afortunadamente, no fue un problema en las aplicaciones nativas, ya que la interface utilisateur para la personalización y las sugerencias se podían separar. Para la web, en los mercados internacionales, la latencia era más importante que el pequeño beneficio de la personalización. Con eso fuera del camino, eBay ahora tiene autosugestiones servidas desde un caché de CDN a nivel mundial para aplicaciones nativas y mercados no estadounidenses para eBay.com.
La "coupure" ici est la latence du réseau et le temps de traitement du serveur pour les suggestions automatiques.
Mise en cache Edge 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. Ce sont des utilisateurs qui utilisent eBay pour la première fois ou qui démarrent une nouvelle session, il n'y a donc pas de personnalisation. Bien que les créations de la page d'accueil changent fréquemment, il reste encore 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 de périmètre (PoPs) pendant une courte période. Les nouveaux utilisateurs peuvent désormais obtenir le contenu de la page d'accueil à partir d'un serveur à proximité, plutôt que d'un centre de données distant. eBay est toujours en train d'expérimenter cela sur les marchés internationaux, où cela aura le plus grand impact.
La «coupure» ici est à nouveau à la fois la latence du réseau et le temps de débit du serveur pour les utilisateurs non reconnus.
Optimisations pour d'autres plates-formes
Améliorations de l'analyse des applications natives
Las aplicaciones nativas (iOS y Android) se comunican con los servicios de backend cuyo formato de respuesta suele ser JSON. Estas cargas útiles JSON pueden ser grandes. En lugar de analizar todo el JSON para representar algo en la pantalla, eBay introdujo un algoritmo de análisis eficiente que optimiza el contenido que debe mostrarse de inmediato.
Les utilisateurs peuvent désormais afficher 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 à taper dans le champ de recherche (iOS avait déjà cette optimisation). Auparavant, cela ne se produisait qu'après que les utilisateurs aient cliqué sur le bouton de recherche. Les utilisateurs peuvent désormais accéder plus rapidement à leurs résultats de recherche. Le «seuil» est ici le temps que les appareils passent à afficher un contenu pertinent.
Améliorations du temps de démarrage de l'application native
Ceci s'applique à nouveau départ Optimisations de temps pour les applications natives, en particulier Android. Lorsqu'une application est démarrée à froid, une grande quantité d'initialisation se produit 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 fait un profilage et a noté que toutes les initialisations ne sont pas nécessaires pour afficher le contenu et que certaines peuvent être effectuées paresseusement.
Plus important encore, eBay a noté qu'il y avait un blocage des appels d'analyse par un tiers qui retardait l'affichage à l'écran. La suppression de l'appel de blocage et le rendre asynchrone ont en outre contribué aux temps de démarrage à froid. La «coupure» ici est un temps de démarrage inutile pour les applications natives.
Conclusions
Toutes les «coupes» de performance d'eBay ont collectivement contribué à faire bouger l'aiguille, et elles se sont produites sur une période de temps. Les versions ont été introduites progressivement au cours de l'année, chaque version perdant des dizaines de millisecondes, atteignant finalement le point où eBay est maintenant:
L'impact des efforts de vitesse d'eBay sur ses paramètres de terrain au fil du temps, comme l'illustre le Tableau de bord des rapports Chrome UX.
El rendimiento es una característica y una avantage compétitif. Las experiencias optimizadas conducen a una mayor participación del usuario, conversiones y ROI. En el caso de eBay, estas optimizaciones variaron desde cosas que requirieron poco esfuerzo hasta algunas que fueron avanzadas.
Vérifier Vitesse pour mille coupes pour plus d'informations et pour garder un œil sur les articles plus détaillés des ingénieurs eBay sur leur travail de performance dans un proche avenir.
