Optimización del rendimiento de los sitios y aplicaciones de eBay para una experiencia de usuario más rápida.
La velocidad fue un iniciativa de toda la empresa para eBay en 2019, con muchos equipos decididos a hacer que el sitio y las aplicaciones sean lo más rápido posible para los usuarios. De hecho, por cada 100 milisegundos de mejora en el tiempo de carga de la página de búsqueda, eBay registró un aumento del 0,5% en el recuento de «Agregar al carrito».
100em
Mejora del tiempo de carga
0,5%
Aumento del recuento de «Agregar al carrito»
Mediante la adopción de Presupuestos de Desempeño (derivados después de realizar un estudio competitivo con el Informe de experiencia del usuario de Chrome) y un enfoque en métricas clave de rendimiento centradas en el usuario, eBay pudo realizar mejoras significativas en la velocidad del sitio.
Mejoras de velocidad de eBay.
… Y sus datos del Informe de experiencia del usuario de Chrome también destacan estas mejoras.
Datos del Informe de experiencia del usuario de Chrome para First Contentful Paint y First Input Delay para el origen de eBay.com.
Todavía hay más trabajo por delante, pero aquí están los aprendizajes de eBay hasta ahora.
«Cortes» de rendimiento web
Las mejoras que hizo eBay fueron posibles gracias a la reducción o «recortes» (en tamaño y tiempo) de varias entidades que participan en el viaje de un usuario. Esta publicación cubre temas que son relevantes para la comunidad de desarrolladores web en general, en lugar de temas específicos de eBay.
Reducir 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 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.
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 de la pantalla son igualmente importantes. El contenido encima de la tapa es más crítico que algo por debajo del pliegue. Las aplicaciones nativas y web son conscientes de esto, pero ¿qué pasa con los servicios? La arquitectura de servicios de eBay tiene una capa llamada
Servicios de experiencia, con el que hablan los frontends (aplicaciones nativas y servidores web). Esta capa está diseñada específicamente para estar basada en vistas o dispositivos, en lugar de estar basada en entidades, como elementos, usuarios o pedidos. Luego, eBay introdujo el concepto de la ruta crítica para Experience Services. Cuando llega una solicitud a estos servicios, trabajan para obtener los datos del contenido de la mitad superior de la página inmediatamente, llamando a otros servicios ascendentes en paralelo. Una vez que los datos están listos, se eliminan instantáneamente. Los datos de la parte inferior de la página se envían en un fragmento posterior o con carga diferida. El resultado: los usuarios pueden ver el contenido de la mitad superior de la página más rápido.
El «corte» aquí es el tiempo que dedican los servicios a mostrar contenido relevante.
Optimizaciones de imagen
Las imágenes son uno de los mayores contribuyentes a la hinchazón de la página. Incluso las pequeñas optimizaciones son muy útiles. eBay hizo dos optimizaciones para las imágenes.
Primero, eBay estandarizó el formato de imagen WebP para los resultados de búsqueda en todas las plataformas, incluidas iOS, Android y navegadores compatibles. La página de resultados de búsqueda es la página con más imágenes en eBay, y ya estaban usando WebP, pero no en un patrón consistente.
Imágenes WebP que se muestran en navegadores compatibles en eBay.com.
En segundo lugar, aunque las imágenes de la lista de eBay están muy optimizadas (tanto en tamaño como en formato), no se aplicaba el mismo rigor a las imágenes seleccionadas (por ejemplo, el módulo superior en el
página principal). eBay tiene muchas imágenes seleccionadas a mano, que se cargan a través de varias herramientas. Anteriormente, las optimizaciones dependían del cargador, pero ahora eBay aplica las reglas dentro de las herramientas, por lo que todas las imágenes cargadas se optimizarán de manera adecuada.
El «corte» aquí son los bytes de imagen desperdiciados enviados a los usuarios.
Captación previa predictiva de activos estáticos
Una sesión de usuario en eBay no es solo una página. Es un fluir. Por ejemplo, el flujo puede ser una navegación desde la página de inicio a una página de búsqueda 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 captación previa predictiva, en la que una página capta previamente los activos estáticos necesarios para la siguiente página probable.
Con la captación previa predictiva, cuando un usuario navega a la página prevista, los activos ya están en la caché del navegador. 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é.
El «corte» aquí es el tiempo de red para los activos estáticos de CSS y JavaScript en la primera navegación.
Obtención previa de los mejores resultados de búsqueda
Cuando un usuario busca en eBay, los datos analíticos de eBay sugieren que es muy probable que el usuario navegue hasta un artículo entre los 10 primeros resultados de búsqueda. Por lo tanto, eBay ahora obtiene los elementos de la búsqueda y los mantiene listos para cuando el usuario navegue. La captación previa ocurre en dos niveles.
El primer nivel ocurre en el lado del servidor, 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: impresiones de página, capacidad, artículos de subasta, etc. Puedes aprender más sobre esto en Presentación de la reunión de ingeniería de rendimiento de LinkedIn, o permanezca atento a una publicación de blog detallada sobre el tema de los ingenieros de eBay.
El «corte» aquí puede ser el tiempo de procesamiento del servidor o el tiempo de la red, dependiendo de dónde se almacene el elemento.
Descarga ansiosa de imágenes de búsqueda
En la página de resultados de búsqueda, cuando se emite una consulta de alto nivel, suceden dos cosas. Uno es el paso de recuperación / clasificación, donde se devuelven los elementos más relevantes que coinciden con la consulta. 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, por lo que las descargas pueden comenzar antes de que llegue el resto del marcado. Como resultado, las imágenes ahora aparecerán más rápido. Este cambio se implementa a nivel mundial para la plataforma web.
El «corte» aquí es la hora de inicio de la descarga para las imágenes de resultados de 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 combinaciones de letras durante al menos un día. Son candidatos ideales para ser almacenados en caché y servidos desde un CDN (por 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 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 interfaz de usuario 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.
El «corte» 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 de la página de inicio no reconocidos
Para la plataforma web, el contenido de la página de inicio para usuarios no reconocidos es el mismo para una región en particular. Se trata de usuarios que utilizan eBay por primera vez o inician una sesión nueva, por lo que no hay personalización. Aunque las creatividades de la página de inicio cambian con frecuencia, todavía hay espacio para el almacenamiento en caché.
eBay decidió almacenar en caché el contenido de usuario no reconocido (HTML) en su red perimetral (PoPs) durante un período breve. Los usuarios nuevos ahora pueden obtener el contenido de la página de inicio desde un servidor cercano, en lugar de un centro de datos lejano. eBay todavía está experimentando con esto en los mercados internacionales, donde tendrá un mayor impacto.
El «corte» aquí es nuevamente tanto la latencia de la red como el tiempo de procesamiento del servidor para los usuarios no reconocidos.
Optimizaciones para otras plataformas
Mejoras en el análisis de aplicaciones nativas
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.
Los usuarios ahora 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 pulsaban el botón de búsqueda. Ahora los usuarios pueden acceder a sus resultados de búsqueda más rápido. El «corte» aquí es el tiempo que dedican los dispositivos a mostrar contenido relevante.
Mejoras en el tiempo de inicio de la aplicación nativa
Esto aplica a inicio fresco Optimizaciones de tiempo para aplicaciones nativas, en particular, Android. Cuando una aplicación se inicia en frío, se produce una gran cantidad de inicialización tanto a nivel de sistema operativo como de aplicación. Reducir el tiempo de inicialización en el nivel de la aplicación ayuda a los usuarios a ver la pantalla de inicio más rápido. eBay hizo algunos perfiles y notó que no todas las inicializaciones son necesarias para mostrar contenido y que algunas se pueden hacer con pereza.
Más importante aún, eBay observó que hubo una llamada de análisis de terceros bloqueando que retrasó la visualización en la pantalla. Eliminar la llamada de bloqueo y hacerla asincrónica ayudó aún más a los tiempos de inicio en frío. El «corte» aquí es el tiempo de inicio innecesario para las aplicaciones nativas.
Conclusiones
Todos los «recortes» de rendimiento que hizo eBay contribuyeron colectivamente a mover la aguja, y sucedieron durante un período de tiempo. Los lanzamientos se introdujeron gradualmente a lo largo del año, y cada lanzamiento redujo decenas de milisegundos, llegando finalmente al punto en el que eBay está ahora:
El impacto de los esfuerzos de velocidad de eBay en sus métricas de campo a lo largo del tiempo, como lo ilustra el Panel de informes de Chrome UX.
El rendimiento es una característica y una ventaja competitiva. 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.
Revisa Velocidad por mil cortes para obtener más información y estar atento a artículos más detallados de los ingenieros de eBay sobre su trabajo de rendimiento en un futuro próximo.
