Optimiza el rendimiento de los sitios y las aplicaciones de eBay para ofrecer una experiencia del usuario más rápida.
La velocidad fue una iniciativa de toda la empresa para eBay en 2019, y muchos equipos se propusieron hacer que el sitio y las apps fueran lo más rápidas 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 obtuvo un aumento de un 0.5% en el recuento de la acción “Agregar al carrito de compras”.
100ms
Mejora en el tiempo de carga
0.5%
Aumento en la cantidad de "Agregar al carrito"
A través de la adopción de presupuestos de rendimiento (derivados después de realizar 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.
…y los datos del Informe sobre la experiencia del usuario en Chrome también destacan estas mejoras.
Aún queda mucho trabajo por delante, pero estos son los aprendizajes que eBay obtuvo hasta el momento.
"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 de un usuario. En esta publicación, se abordan temas 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 hacer que los sitios sean rápidos es simplemente cargar menos código. eBay redujo sus cargas útiles de texto recortando todos los bytes no utilizados y innecesarios de las respuestas de JavaScript, CSS, HTML y JSON que se entregaban a los usuarios. Anteriormente, con cada función nueva, 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 suelen aplazar esta actividad de limpieza, pero te sorprendería lo mucho que ahorró eBay.
La “reducción” aquí son los bytes desperdiciados en la carga útil de la respuesta.
Optimización de la ruta crítica para el contenido de la mitad superior de la página
No todos los píxeles de la pantalla son igualmente importantes. El contenido de la mitad superior de la página es más crítíco que el de la mitad inferior. Las apps web y para iOS, Android y computadoras de escritorio son conscientes de esto, pero ¿qué sucede con los servicios? La arquitectura de servicios de eBay tiene una capa llamada Servicios de la experiencia, con la que se comunican los frontends (apps y servidores web específicos de la plataforma). Esta capa está diseñada específicamente para basarse en vistas o dispositivos, en lugar de entidades, como artículos, usuarios o pedidos. Luego, eBay presentó el concepto de ruta crítica para los servicios de experiencia. Cuando llega una solicitud a estos servicios, trabajan para obtener los datos del contenido de la mitad superior de la página de inmediato llamando a otros servicios upstream en paralelo. Una vez que los datos están listos, se borran de inmediato. Los datos de la mitad inferior de la página se envían en un fragmento posterior o se cargan de forma diferida. El resultado: los usuarios pueden ver el contenido de la mitad superior de la página más rápido.
La "reducción" 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 tamaño de las páginas. Incluso las optimizaciones pequeñas son muy útiles. eBay realizó 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 la búsqueda es la página con más imágenes de eBay y ya usaban WebP, pero no de forma coherente.
En segundo lugar, aunque las imágenes de las fichas de eBay están muy optimizadas (en tamaño y formato), no se aplicó el mismo rigor a 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, el encargado de subir las imágenes era quien debía realizar las optimizaciones, pero ahora eBay aplica las reglas dentro de las herramientas, por lo que todas las imágenes que se suban se optimizarán de forma adecuada.
La "reducción" aquí son los bytes de imagen desperdiciados que se envían a los usuarios.
Precarga predictiva de recursos 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 de la página principal a una página de búsqueda y, luego, a una página de elementos. Entonces, ¿por qué las páginas del flujo no se ayudan entre sí? Esa es la idea de la precarga predictiva, en la que una página precarga los recursos 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 están en la caché del navegador. Esto se hace para los recursos CSS y JavaScript, en los que las URLs se pueden recuperar con anticipación. Ten en cuenta que solo ayuda en las primeras navegaciones. 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 resultados de la búsqueda principales
Cuando un usuario busca en eBay, los datos de estadísticas de eBay sugieren que es muy probable que el usuario navegue a un artículo de los 10 primeros resultados de la búsqueda. Por lo tanto, eBay ahora carga previamente los artículos de la búsqueda y los mantiene listos para cuando el usuario navegue. La carga previa se realiza en dos niveles.
El primer nivel se realiza del lado del servidor, donde el servicio de artículos almacena en caché los 10 elementos principales de los resultados de la búsqueda. Cuando el usuario accede a uno de esos elementos, eBay ahora ahorra tiempo de procesamiento del servidor. Las apps específicas de la plataforma aprovechan la caché del servidor y se lanzan a nivel global.
El otro nivel se produce en la caché del navegador, que está disponible en Australia. La carga previa de elementos era una optimización avanzada debido a la naturaleza dinámica de los elementos. También hay muchos matices: impresiones de páginas, capacidad, elementos de subasta, etcétera. Puedes obtener más información en la presentación de Meetup de Ingeniería de rendimiento de LinkedIn o esperar una publicación detallada en el blog sobre el tema de los ingenieros de eBay.
La "corte" aquí puede ser el tiempo de procesamiento del servidor o el tiempo de red, según dónde se almacenen en caché los elementos.
Descarga inmediata de imágenes de búsqueda
En la página de resultados de la búsqueda, cuando se emite una consulta a un nivel alto, ocurren dos cosas. Uno es el paso de recuperación o clasificación, en el que se muestran los elementos más relevantes que coinciden con la búsqueda. El segundo paso es aumentar los elementos recuperados con información adicional relacionada con el contexto del usuario, como los costos de envío. Ahora, eBay envía inmediatamente las primeras 10 imágenes de los artículos al navegador en un fragmento junto con el encabezado, de modo que las descargas puedan comenzar antes de que llegue el resto del marcado. Como resultado, las imágenes ahora aparecerán más rápido. Este cambio se lanzó a nivel mundial para la plataforma web.
El "corte" aquí es la hora de inicio de la descarga de las imágenes de los resultados de la búsqueda.
Almacenamiento en caché perimetral para datos de autosugestión
Cuando los usuarios escriben letras en el cuadro de búsqueda, aparecen sugerencias. Estas sugerencias no cambian para las combinaciones de letras durante al menos un día. Son candidatos ideales para almacenarse en caché y entregarse desde una CDN (durante un máximo de 24 horas), en lugar de que las solicitudes lleguen hasta un centro de datos. Los mercados internacionales se benefician especialmente del almacenamiento en caché de CDN.
Sin embargo, había un inconveniente. 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 fortuna, 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 podía separar. En el caso de la Web, en los mercados internacionales, la latencia era más importante que el pequeño beneficio de la personalización. Ahora que se resolvió el problema, eBay tiene sugerencias automáticas que se publican desde una caché de CDN a nivel global para apps específicas de la plataforma y mercados fuera de EE.UU. para eBay.com.
La "pausa" aquí es la latencia de la 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 usan eBay por primera vez o que inician una sesión nueva, por lo que no se realiza ninguna personalización. Aunque las creatividades de la página principal cambian con frecuencia, aún hay espacio para almacenar en caché.
eBay decidió almacenar en caché el contenido del usuario no reconocido (HTML) en su red de perímetro (PoPs) durante un período breve. Los usuarios que visitan eBay por primera vez ahora pueden obtener el contenido de la página principal desde un servidor cercano, en lugar de un centro de datos lejano. eBay aún está experimentando con esto en mercados internacionales, donde tendrá un mayor impacto.
La “reducción” aquí es, nuevamente, la latencia de la red y el tiempo de procesamiento del servidor para los usuarios no reconocidos.
Optimizaciones para otras plataformas
Mejoras en el análisis de apps para iOS y Android
Las apps para iOS y Android se comunican con servicios de backend cuyo formato de respuesta suele ser JSON. Estas cargas útiles de JSON pueden ser grandes. En lugar de analizar todo el JSON para renderizar algo en la pantalla, eBay presentó un algoritmo de análisis eficiente que optimiza el contenido que se debe mostrar de inmediato.
Ahora, los usuarios pueden ver el contenido más rápido. Además, en el caso de la app para Android, eBay comienza a inicializar los controladores de vista de búsqueda en cuanto el usuario empieza 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. La "reducción" aquí es el tiempo que los dispositivos dedican a mostrar contenido relevante.
Mejoras en el tiempo de inicio de la app para Android
Esto se aplica a las optimizaciones del tiempo de inicio en frío para apps para Android. Cuando se inicia una app en frío, se produce mucha inicialización a nivel del SO y de la aplicación. Reducir el tiempo de inicialización a nivel de la aplicación ayuda a los usuarios a ver la pantalla principal más rápido. eBay realizó algunas generaciones de perfiles y notó que no todas las inicializaciones son necesarias para mostrar contenido y que algunas se pueden realizar de forma diferida.
Más importante aún, eBay observó que había una llamada de estadísticas de terceros que bloqueaba y retrasaba la renderizació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. La "reducción" aquí es el tiempo de inicio innecesario de las apps para Android.
Conclusiones
Todos los "cortes" de rendimiento que realizó eBay en conjunto contribuyeron a generar un cambio, y esto sucedió durante un período. Las versiones se implementaron gradualmente a lo largo del año, y cada una redujo decenas de milisegundos, hasta llegar al punto en el que se encuentra eBay en la actualidad:
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 acciones que requerían poco esfuerzo hasta algunas que eran avanzadas.
Consulta Aumentar la velocidad con miles de cortes para obtener más información y estate atento a los artículos más detallados que los ingenieros de eBay publicarán sobre su trabajo de rendimiento en un futuro cercano.