Cómo Disney+ Hotstar aumentó las vistas de tarjetas semanales en un 100% en dispositivos de sala de estar al reducir el INP en un 61%

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.

Bhuvaneswaran Mohan
Bhuvaneswaran Mohan
Saurabh Rajpal
Saurabh Rajpal

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.

Captura de pantalla del generador de perfiles de rendimiento en las Herramientas para desarrolladores de Chrome que genera perfiles del rendimiento de carga de la app de Disney+ HotStar en una laptop. Una métrica personalizada llamada PAGE_RENDER_TIME llega a los 1.39 segundos.
Genera un perfil (tiempo de procesamiento de página de 1.3 s) desde una laptop con una demora de CPU 6x hasta una configuración simulada del navegador de TV. PAGE_RENDER_TIME es una métrica personalizada que se utiliza para capturar el tiempo que transcurre entre la visualización del primer componente de la página y la finalización del análisis de HTML.
Captura de pantalla del generador de perfiles de rendimiento en las Herramientas para desarrolladores de Chrome que genera perfiles del rendimiento de carga de la app Disney+ HotStar en una smart TV real. Una métrica personalizada llamada PAGE_RENDER_TIME llega a los 6.47 segundos.
Perfil (renderización de página de 6.47 segundos) de una TV real con depuración remota con app para TV ejecutándose en Chrome.

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.

Captura de pantalla de una lista de elementos, según su atributo FocusKey, junto con la latencia de interacción de cada uno.
Captura de 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:

  1. Navegación en la bandeja horizontal del carrusel.
  2. Navegación vertical en la bandeja del carrusel
  3. Interacciones durante la carga inicial de la página.
Captura de pantalla del elemento responsable de la navegación en el carrusel de la bandeja por su tecla de enfoque
Entrada del panel que muestra la contribución a INP por navegación en carrusel de bandeja.

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:

Un árbol de ejemplo generado por una biblioteca de navegación espacial. Debajo de la raíz, se encuentran los nodos Navbar y Tray Container. En particular, el nodo del contenedor de bandeja contiene tres nodos de tarjetas, cada uno de los cuales tiene varios subnodos que contribuyen a un tamaño grande del DOM.
Árbol de navegación espacial anterior de la página principal

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.

Ejemplo de árbol optimizado generado por la biblioteca de navegación espacial, que se optimizó significativamente con respecto a la versión anterior y contiene muchos menos nodos.
Árbol de navegación espacial después de la optimización.

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.

Captura de pantalla del panel de rendimiento de las Herramientas para desarrolladores de Chrome que muestra las tareas que se inician en el carrusel de terceros. Existen numerosas tareas largas que retrasan la interactividad.
Carrusel de terceros
Captura de pantalla del panel de rendimiento de las Herramientas para desarrolladores de Chrome de las tareas que se inician en el carrusel interno. En comparación con el carrusel de terceros, hay muchas menos tareas largas, lo que permite que las interacciones ocurran más rápido.
Carrusel interno.

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.

Una serie temporal de la métrica personalizada del tiempo de renderización de la página para tizentv y webos, que disminuyó un 31% y un 25.2% respectivamente a partir del período del 13 al 19 de marzo.
Tendencia descendente en los tiempos de renderización de páginas por SO de TV (Samsung-Tizen y WebOS-LG).

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.

Una visualización estilizada de tareas para ejecutar controladores de eventos y actualizaciones de renderización. Las actualizaciones de renderización se posponen después de una sola tarea larga.
Una sola tarea de larga duración seguida de una renderización antes de la mejora de la bandeja vertical.
Otra visualización de la misma actividad que la figura anterior, pero las tareas se dividen debido al rendimiento, lo que permite que la renderización ocurra antes.
Varias tareas de división después de la mejora de la bandeja vertical, con oportunidades de renderización entre las tareas de división.

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.

Una serie temporal de valores del INP que comienza el 13 de agosto y el 11 de septiembre. Durante este período, se muestra una reducción del 32% en el INP.
Se redujo el INP para las mejoras en la bandeja.

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.

Los valores del INP de una serie temporal comienzan del 23 de agosto al 21 de septiembre. En este período, se logró una reducción del 61% en el INP.

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.

Captura de pantalla de una serie temporal que muestra un aumento del 100% en las vistas de tarjetas semanales en la app Disney+ HotStar tanto para tizentv como para Webos. El aumento se produce de forma muy pronunciada después del 4 de abril de 2004.

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.