Mejorar Interaction to Next Paint (INP) en smart TVs y decodificadores presenta muchos más desafíos que en los navegadores de escritorio, debido a las limitaciones de la compatibilidad limitada de las APIs y las especificaciones del sistema modestas. En este caso práctico, descubrirás cómo Disney+ Hotstar abordó estos obstáculos con éxito y, como resultado, obtuvo importantes beneficios comerciales.
Con la mayor adopción de dispositivos para salas de estar, Disney+ Hotstar reconoció que brindar una experiencia de navegación fluida en su app para smart TVs y decodificadores es un requisito comercial fundamental. Sin embargo, lo que dificulta la corrección del INP en esos dispositivos es que cualquier modelo de TV puede usar versiones muy antiguas del navegador, por ejemplo, una TV LG de 2020 usa Chrome 68 que se lanzó en 2018. Algunos de estos dispositivos también se pueden categorizar como de gama baja, lo que significa que no pueden responder a las interacciones tan rápido como las tablets y las laptops insignia.
En la siguiente figura, se compara el tiempo que se tarda en cargar una página, entre una laptop con la CPU ralentizada seis veces en las Herramientas para desarrolladores de Chrome y una smart TV. Como se puede ver, la laptop sigue siendo mucho más rápida que una smart TV fabricada recientemente.
Si bien estas pruebas produjeron datos de laboratorio, Disney+ Hotstar comenzó a recopilar datos de campo de Interaction to Next Paint (INP) de los usuarios reales de su app con la biblioteca web-vitals, y observó que el 75% de los usuarios experimentó un INP de 675 milisegundos en el campo, lo que se considera una experiencia del usuario "deficiente" según los umbrales de INP.
Este caso de éxito muestra cómo Disney+ Hotstar mejoró la capacidad de respuesta en sus aplicaciones de transmisión, especialmente en dispositivos de gama baja. Lograron una mejora del 61% al reducir los valores de INP a 272 milisegundos (todavía por encima del umbral recomendado de "buena" de 200 milisegundos), pero una mejora significativa en ese sentido.
Los hallazgos
Disney+ Hotstar instrumentó la app con el método onINP de la compilación de atribución de la biblioteca web-vitals. Durante la fase inicial, se surgieron varios desafíos, especialmente en la identificación del elemento objetivo preciso. El problema surgió porque todas las referencias apuntaban al cuerpo debido a una biblioteca de navegación espacial de terceros que se usaba con algunas personalizaciones en la app de Disney+ Hotstar. Esta biblioteca solo escucha eventos en el cuerpo del documento y, luego, determina el elemento destacado real y predice el próximo enfoque según las teclas que se presionen de manera remota.
Disney+ Hotstar comenzó resolviendo el problema de atribución para que las interacciones responsables de los valores altos de INP pudieran identificarse correctamente. Para ello, Disney+ Hotstar registró el atributo focusKey, que ya está en la biblioteca de navegación espacial para el elemento enfocado actualmente, así como el mapa de todos los elementos enfocables de la página, que es similar al objetivo de interacción disponible en la compilación de atribución de Web-vitals.
focusKey, junto con la ruta de acceso al elemento que lo activa.
Ahora, con la medición y atribución implementadas, los hallazgos de los datos de campo informaron que las siguientes interacciones son las más problemáticas para el INP:
- Navegación en la bandeja horizontal del carrusel.
- Navegación vertical en la bandeja del carrusel
- Interacciones durante la carga inicial de la página.
Al perfilar estas interacciones con el panel de rendimiento de Chrome Dev Tools, se dio cuenta de que la biblioteca de navegación espacial lee la posición de todos los elementos enfocables y creó un nuevo árbol. Esta es una operación costosa que activa la paginación excesiva de diseños en cada interacción, como pasar de un elemento a otro.
Para la página principal, la biblioteca de navegación espacial generó un árbol de la siguiente manera:
Esto significaba que, si la app mostraba 10 bandejas y cada una tuviera 7 tarjetas, habría 70 elementos enfocables para el contenedor de la bandeja, incluidos los elementos de navegación. Esta es una gran cantidad de elementos interactivos. También se usó una biblioteca de carrusel de terceros, que lee las dimensiones de cada tarjeta durante la navegación horizontal para traducir el contenedor, lo que agrega aún más latencia de interacción.
Cómo solucionar los problemas
Hubo varios problemas diferentes que tuvieron que abordarse por separado para resolver los problemas de capacidad de respuesta de toda la app.
Mejoras en la navegación de la bandeja horizontal
Disney+ Hotstar creó su propia biblioteca de carrusel interna que no activa la hiperpaginación de diseños mediante el uso de animaciones compuestas y la lectura de las dimensiones una vez por bandeja, en lugar de una vez por tarjeta.
La navegación espacial se enfoca solo en la raíz del carrusel y, para una mayor navegación horizontal, aparece nuestro carrusel personalizado. Con este enfoque, Disney+ Hotstar eliminó la dependencia de la navegación espacial y de la antigua biblioteca de carrusel que leía las dimensiones en cada navegación.
Así se ve el árbol de navegación espacial después de estas optimizaciones.
Las siguientes imágenes son una comparación del rendimiento medido en el panel de rendimiento de las Herramientas para desarrolladores de Chrome antes y después de nuestra implementación de carrusel.
Como resultado de este trabajo, Disney+ Hotstar observó una reducción significativa en el INP de su app en el campo. Además, logró ahorrar alrededor de 35 KB (comprimida) mediante la eliminación de la biblioteca de terceros. Como beneficio adicional, estas mejoras también permitieron que Disney+ Hotstar reduzca la duración de su métrica personalizada, la cual utiliza para medir el tiempo total de renderización de la página principal, ya que los diseños se activan con menos frecuencia debido a la reducción de nodos de navegación espacial.
Mejoras en la navegación de la bandeja vertical
Disney+ Hotstar también mejoró el rendimiento de la navegación con bandejas verticales cargando de forma diferida las bandejas en lugar de cargarlas todas por adelantado. Por lo tanto, cuando se carga la página, en lugar de cargar 10 instancias de la bandeja, que internamente tienen un componente de carrusel y un conjunto de imágenes, la app carga solo las dos bandejas visibles en el viewport, además de una bandeja adicional arriba y abajo. La renderización también se dividió en varias tareas con la estrategia de rendimiento setTimeout(), de modo que el subproceso principal tenga más oportunidades de controlar las interacciones del usuario.
Interacciones durante la carga inicial de la página
El INP será alto para las aplicaciones que procesan una gran cantidad de scripts durante el lanzamiento de la aplicación. Esto se debe a que el navegador debe descargar, analizar y evaluar esas secuencias de comandos. Si bien todo esto sucede, el subproceso principal estará ocupado durante mucho tiempo y no podrá responder rápidamente a las interacciones del usuario.
Disney+ Hotstar se dio cuenta de que estaban procesando más secuencias de comandos de lo que realmente era necesario durante el inicio de la aplicación (el tiempo de la pantalla de presentación) para que las páginas futuras se cargaran más rápido. Esto incurrió en tareas adicionales de evaluación del guion, que también tuvo el potencial de afectar negativamente al INP.
Para solucionar este problema, Disney+ Hotstar consideró cargar de forma dinámica la mayoría de los recursos, de modo que ahorraran tiempo durante el inicio de la app. Sin embargo, esto habría aumentado los tiempos de carga de las navegaciones a páginas futuras, dado que JavaScript ya no se cargaría de antemano con este cambio. Para abordar esto, Disney+ Hotstar desarrolló una biblioteca de precarga de elementos interna que determina qué página podría venir a continuación en el recorrido del usuario, y precargará elementos para esa página. Por ejemplo:
- Cuando un usuario se encuentre en la página de acceso, la biblioteca del precargador de recursos precargará los recursos para la página de selección de perfil.
- En la página de selección de perfil, se cargan los recursos de la página principal.
- En la página principal, se cargan los elementos de la página de detalles.
- Por último, los elementos de la página de reproducción se cargan en la página de detalles.
La optimización de la carga de elementos ayudó a Disney+ Hotstar a realizar dos cosas: reducir el INP de la app (ya que el subproceso principal ahora era relativamente libre para ejecutar interacciones del usuario) y también reducir el uso de memoria en dispositivos de bajo nivel.
Estos cambios provocaron una disminución del 32% en el número de INP informado desde el campo, como se puede ver en la siguiente captura de pantalla.
Otras mejoras
Disney+ Hotstar también descubrió que había tareas largas en algunos eventos de usuario que podían dividirse yéndose al subproceso principal con frecuencia. Además, fue un paso más allá y creó una utilidad de generación de tareas que les permitirá a los usuarios cancelar la tarea en medio de su ejecución.
Por ejemplo, cuando el usuario navega por varias tarjetas en la bandeja, ocurre lo siguiente:
- La siguiente tarjeta está enfocada.
- La tarjeta se traduce si es necesario.
- Se actualizó el elemento destacado.
- Se recupera el avance (si está presente) y se inicia la reproducción.
- Los eventos de Analytics se activan para la acción.
Si, durante este proceso, el usuario se centra en la siguiente tarjeta, no sería necesario ejecutar el resto de los pasos. Por ejemplo, ya no se necesitará la recuperación de avances ni la inicialización del reproductor para un título en particular si el usuario pasó a la siguiente tarjeta. Por lo tanto, esas tareas se pueden anular para liberar el subproceso principal.
La utilidad del generador de tareas de Disney+ Hotstar acepta una función que es una tarea y, cuando otra tarea está a la mitad, la tarea anterior se anula, lo que nos ahorra la ejecución innecesaria de la tarea y actuar rápidamente sobre la tarea necesaria.
Resultados
En general, el INP de la aplicación de Disney+ Hotstar disminuyó de 675 milisegundos a 272 milisegundos, lo que representa una mejora de casi el 60%. Además, las latencias de interacción de la bandeja, en particular, disminuyeron de 400 a 100 milisegundos.
Impacto en la empresa: Las vistas de tarjetas semanales aumentaron de 111 a 226 por usuario. Esto representa un aumento del 100%, lo que demuestra que una interfaz más rápida y responsiva tiene más probabilidades de atraer a los usuarios durante períodos más prolongados.
Esto es solo el comienzo, y Disney+ Hotstar solo tiene los primeros pasos para mejorar el rendimiento de la renderización y la interacción con la métrica de INP como guía. Además, a su equipo le entusiasma que Disney+ Hotstar sea una experiencia fluida para sus clientes en el futuro cercano.
Gracias a Ayush, Ajay, Kiran, Milan y Richa de Disney+ Hotstar por sus esfuerzos por cambiar el ritmo.
Agradecimientos especiales a Ankeet Maini, director de Ingeniería de Disney+ Hotstar y a Rahul Krishnan P, director de Experiencia del cliente de Disney+ Hotstar por apoyar este trabajo de innovación, y a Jeremy Wagner, Gilberto, Barry Pollard y Brendan Kenny de Google por revisar y ayudar a publicar este caso de éxito.