Optimización del rendimiento de los sitios y las aplicaciones de eBay para lograr una experiencia del usuario más rápida.
La velocidad fue una iniciativa en toda la empresa de eBay en 2019, en la que muchos equipos decidieron hacer que el sitio y las apps fueran lo más rápidos posible para los usuarios. De hecho, por cada mejora de 100 milisegundos en el tiempo de carga de la página de búsqueda, eBay experimentó un aumento del 0.5% en el recuento de elementos "Agregar al carrito".
100ms
Mejora en el tiempo de carga
0,5%
de aumento en el recuento de “Agregar al carrito”
Gracias a la adopción de los presupuestos de rendimiento (obtenidos de un estudio competitivo con el Informe sobre la experiencia del usuario en Chrome) y un enfoque en las métricas de rendimiento centradas en el usuario clave, eBay pudo realizar mejoras significativas en la velocidad del sitio.
Los datos del Informe sobre la experiencia del usuario en Chrome también destacan estas mejoras.
Aún hay más trabajo por delante, pero esto es lo que aprendió eBay hasta ahora.
"Cortes" del rendimiento web
Las mejoras que realizó eBay fueron posibles gracias a la reducción o los "cortes" (en el tamaño y el tiempo) de varias entidades que participan en el recorrido del usuario. En esta publicación, se abordan temas que son relevantes para la comunidad de desarrolladores web en general, en lugar de temas específicos de eBay.
Reduce la carga útil en todos los recursos de texto
Una forma de lograr que los sitios sean rápidos es simplemente cargar menos código. eBay redujo sus cargas útiles de texto mediante el recorte de todos los bytes innecesarios y no utilizados de respuestas de JavaScript, CSS, HTML y JSON que se entregan a los usuarios. Antes, con cada función nueva, eBay seguía aumentando la carga útil de sus respuestas, sin limpiar lo que no se usaba. Con el paso del tiempo, esto se convirtió en un cuello de botella en el rendimiento. Por lo general, los equipos se aplazan en esta actividad de limpieza, pero te sorprendería saber cuánto ahorró eBay.
El “corte” aquí son los bytes desperdiciados en la carga útil de respuesta.
Optimización de la ruta crítica para el contenido de la mitad superior de la página
No todos los píxeles que aparecen en la pantalla son igual de importantes. El contenido de la mitad superior de la página es más importante que el de la mitad inferior. Las apps web y de iOS, Android y de escritorio son conscientes de esto, pero ¿qué sucede con los servicios? La arquitectura de servicios de eBay tiene una capa llamada Servicios de experiencia con la que se comunican los frontends (aplicaciones específicas de la plataforma y servidores web). Esta capa está específicamente diseñada para estar basada en vistas o dispositivos, en lugar de basada en entidades como elementos, usuarios u pedidos. Luego, eBay introdujo el concepto de la ruta crítica para los Servicios de experiencia. Cuando llega una solicitud a estos servicios, trabajan en obtener los datos para el contenido de la mitad superior de la página de inmediato mediante llamadas a otros servicios ascendentes en paralelo. Una vez que los datos están listos, se limpian al instante. Los datos de la mitad inferior de la página se envían en un fragmento posterior o se cargan de forma diferida. Como resultado, los usuarios ven el contenido de la mitad superior de la página más rápido.
El “corte” aquí es el tiempo que los servicios dedican a mostrar contenido relevante.
Optimizaciones de imágenes
Las imágenes son uno de los factores que más contribuyen al aumento de la cantidad de páginas. Incluso las pequeñas optimizaciones pueden ser de gran ayuda: eBay hizo dos optimizaciones para las imágenes.
En primer lugar, eBay estandarizó el formato de imagen WebP para los resultados de la búsqueda en todas las plataformas, incluidos iOS, Android y los navegadores compatibles. La página de resultados de búsqueda es la que más imágenes tiene en eBay y ya usaban WebP, pero no en un patrón coherente.
En segundo lugar, aunque las imágenes de listado de eBay están muy optimizadas (en tamaño y formato), no se aplicaba el mismo rigor para las imágenes seleccionadas (por ejemplo, el módulo superior de la página principal). eBay tiene muchas imágenes seleccionadas a mano que se suben a través de varias herramientas. Anteriormente, las optimizaciones dependían de quien sube el video, pero ahora eBay aplica las reglas dentro de las herramientas, por lo que todas las imágenes subidas se optimizarán de forma adecuada.
El “corte” aquí son los bytes de imagen desperdiciados que se envían a los usuarios.
Carga previa predictiva de elementos estáticos
Una sesión de usuario en eBay no es solo una página. Es un flujo. Por ejemplo, el flujo puede ser una navegación desde la página principal a una página de búsqueda y a la página de un elemento. Entonces, ¿por qué las páginas del flujo no se ayudan entre sí? Esa es la idea de la carga previa predictiva, en la que una página carga previamente los elementos estáticos necesarios para la siguiente página probable.
Con la carga previa predictiva, cuando un usuario navega a la página prevista, los recursos ya se encuentran en la caché del navegador. Esto se hace para los recursos de CSS y JavaScript, en los que las URLs se pueden recuperar con anticipación. Algo que se debe tener en cuenta aquí es que solo ayuda en las navegaciones por primera vez. En las navegaciones posteriores, los recursos estáticos ya estarán en la caché.
El “corte” aquí es el tiempo de red para los recursos estáticos de CSS y JavaScript en la primera navegación.
Precarga de los principales resultados de la búsqueda
Cuando un usuario busca en eBay, los datos de estadísticas de eBay sugieren que es muy probable que el usuario navegue hasta un elemento que está entre los 10 primeros resultados de la búsqueda. Por lo tanto, eBay ahora carga previamente los elementos de la búsqueda y los mantiene listos para cuando el usuario navega. La carga previa ocurre en dos niveles.
El primer nivel ocurre en el servidor, donde el servicio de artículos almacena en caché los 10 elementos principales de los resultados de la búsqueda. Cuando el usuario se dirige a uno de esos elementos, eBay ahora ahorra tiempo de procesamiento del servidor. Las apps específicas de la plataforma aprovechan el almacenamiento en caché del servidor y se lanza de forma global.
El otro nivel se realiza en la caché del navegador, que está disponible en Australia. La carga previa de artículos fue una optimización avanzada debido a su naturaleza dinámica. También tiene muchos matices: impresiones de página, capacidad, elementos de subasta, etcétera. Puedes obtener más información sobre este tema en la presentación de la reunión sobre ingeniería de rendimiento de LinkedIn o consultar la entrada de blog detallada que realizaron los ingenieros de eBay sobre este tema.
El "corte" aquí puede ser el tiempo de procesamiento del servidor o el de la red, dependiendo de dónde se almacene el elemento en caché.
Descarga inmediata de imágenes de la búsqueda
En la página de resultados de búsqueda, cuando una consulta se emite a nivel general, ocurren dos cosas. Uno es el paso de recuperación/clasificación, en el que se devuelven los elementos más relevantes que coinciden con la búsqueda. El segundo paso es aumentar los artículos retirados con información adicional relacionada con el contexto del usuario, como los costos de envío. eBay ahora envía inmediatamente las primeras 10 imágenes de artículos al navegador en un fragmento junto con el encabezado, para que las descargas puedan comenzar antes de que llegue el resto del lenguaje de marcado. Como resultado, las imágenes ahora aparecerán más rápido. Este cambio se implementa a nivel global en la plataforma web.
El "corte" que aparece aquí es la hora de inicio de la descarga de imágenes de los resultados de la búsqueda.
Almacenamiento en caché perimetral para los datos de sugerencias automáticas
Cuando los usuarios escriben letras en el cuadro de búsqueda, aparecen sugerencias emergentes. Estas sugerencias no cambian para las combinaciones de letras durante al menos un día. Son ideales para almacenarlos en caché y entregarlos desde una CDN (durante un máximo de 24 horas), en lugar de enviar solicitudes hasta un centro de datos. Los mercados internacionales se benefician especialmente del almacenamiento en caché de CDN.
Sin embargo, había un problema. eBay tenía algunos elementos de personalización en la ventana emergente de sugerencias, que no se pueden almacenar en caché de manera eficiente. Por suerte, no fue un problema en las apps específicas de la plataforma, ya que la interfaz de usuario para la personalización y las sugerencias se pudo separar. Para la Web, en los mercados internacionales, la latencia era más importante que el pequeño beneficio de la personalización. Sin embargo, ahora eBay tiene sugerencias automáticas que se entregan desde una caché de CDN a nivel global para aplicaciones específicas de la plataforma y mercados fuera de EE.UU. para eBay.com.
El “corte” aquí es la latencia de red y el tiempo de procesamiento del servidor para las sugerencias automáticas.
Almacenamiento en caché perimetral para usuarios no reconocidos de la página principal
En la plataforma web, el contenido de la página principal para los usuarios no reconocidos es el mismo para una región en particular. Se trata de usuarios que utilizan eBay por primera vez o que inician una sesión nueva, por lo que no se personaliza. Si bien las creatividades de la página principal cambian con frecuencia, todavía hay espacio para el almacenamiento en caché.
eBay decidió almacenar en caché el contenido de usuarios no reconocido (HTML) en su red perimetral (PoPs) durante un período breve. Los usuarios nuevos ahora pueden recibir contenido de la página principal desde un servidor cercano, en lugar de hacerlo desde un centro de datos lejano. eBay sigue experimentando con esto en los mercados internacionales, donde tendrá un mayor impacto.
Una vez más, el “corte” es la latencia de red y el tiempo de procesamiento del servidor para usuarios no reconocidos.
Optimizaciones para otras plataformas
Mejoras en el análisis de las apps para iOS/Android
Las apps para iOS y Android se comunican con los servicios de backend cuyo formato de respuesta generalmente es JSON. Estas cargas útiles de JSON pueden ser grandes. En lugar de analizar todo el JSON para representar un elemento en la pantalla, eBay introdujo un algoritmo de análisis eficiente que optimiza el contenido que debe mostrarse de inmediato.
Ahora, los usuarios pueden ver el contenido más rápido. Además, para la aplicación de Android, eBay comienza a inicializar los controladores de vista de búsqueda tan pronto como el usuario comienza a escribir en el cuadro de búsqueda (iOS ya tenía esta optimización). Anteriormente, esto sucedía solo después de que los usuarios presionaban el botón de búsqueda. Ahora, los usuarios pueden acceder a los resultados de la búsqueda más rápido. El “corte” es el tiempo que los dispositivos dedican a mostrar contenido relevante.
Mejoras en el tiempo de inicio de las apps para Android
Esto se aplica a las optimizaciones de tiempo de inicio en frío para apps para Android. Cuando una app se inicia en frío, muchas inicializaciones se producen a nivel del SO y de la aplicación. Reducir el tiempo de inicialización a nivel de la aplicación ayuda a que los usuarios vean la pantalla de inicio más rápido. eBay hizo algunos perfiles y observó que no todas las inicializaciones son necesarias para mostrar contenido y que algunas se pueden hacer de forma diferida.
Lo más importante es que eBay observó que hubo una llamada de bloqueo de análisis de terceros que retrasó la representación en la pantalla. Quitar la llamada de bloqueo y hacerla asíncrona ayudó aún más a los tiempos de inicio en frío. El "corte" aquí es el tiempo de inicio innecesario para las apps para Android.
Conclusiones
Todos los "cortes" de rendimiento que eBay realizó en conjunto contribuyeron a aumentar la tasa de cambio, y esto se llevó a cabo durante un período. Los lanzamientos se implementaron gradualmente a lo largo del año, y cada uno se redujo decenas de milisegundos hasta llegar al punto en el que eBay se encuentra:
El rendimiento es una función y una ventaja competitiva. Las experiencias optimizadas generan una mayor participación de los usuarios, conversiones y ROI. En el caso de eBay, estas optimizaciones variaron desde aspectos que requieren poco esfuerzo hasta algunas avanzadas.
Consulta Speed by a mil cortes para obtener más información y mantente al tanto de los artículos más detallados de los ingenieros de eBay sobre su trabajo en el futuro cercano.