Comment Disney+ Hotstar a augmenté le nombre de vues hebdomadaires de fiches de 100% sur les appareils de salon en réduisant l'INP de 61%

L'amélioration de l'Interaction to Next Paint (INP) sur les smart TV et les boîtiers décodeurs présente beaucoup plus de défis que pour les navigateurs pour ordinateur, en raison des contraintes liées à une compatibilité limitée des API et à des spécifications système sobres. Dans cette étude de cas, vous allez découvrir comment Disney+ Hotstar a surmonté ces obstacles et obtenu des avantages commerciaux considérables.

Bhuvaneswaran Mohan
Bhuvaneswaran Mohan
Saurabh Rajpal
Saurabh Rajpal

Face à l'adoption croissante des appareils de salon, Disney+ Hotstar a compris qu'il était essentiel pour les entreprises d'offrir une expérience de navigation fluide dans son application pour les smart TV et les boîtiers décodeurs. Toutefois, il est plus difficile de corriger l'INP pour ces appareils, car certains modèles de téléviseurs peuvent utiliser des versions de navigateur très anciennes, par exemple, un téléviseur LG 2020 utilise Chrome 68 sorti en 2018. Certains de ces appareils peuvent également être classés comme des appareils d'entrée de gamme, ce qui signifie qu'ils ne peuvent pas répondre aux interactions aussi rapidement que les tablettes et ordinateurs portables phares.

La figure suivante compare le temps nécessaire pour charger une page entre un ordinateur portable dont le processeur est ralenti par six, appliqué dans les outils pour les développeurs Chrome et une smart TV. Comme vous pouvez le constater, l'ordinateur portable est encore beaucoup plus rapide qu'une smart TV récemment fabriquée.

Capture d'écran du profileur de performances dans les outils pour les développeurs Chrome, qui évalue les performances de chargement de l'application Disney+ HotStar sur un ordinateur portable La métrique personnalisée PAGE_RENDER_TIME arrive à 1,39 seconde.
Profilage (temps d'affichage de la page : 1,3 s) à partir d'un ordinateur portable avec un ralentissement du processeur six fois plus important pour simuler la configuration du navigateur d'un téléviseur. PAGE_RENDER_TIME est une métrique personnalisée utilisée pour indiquer le temps écoulé entre l'affichage du premier composant de la page et l'exécution de l'analyse HTML.
Capture d'écran du profileur de performances dans les outils pour les développeurs Chrome, qui évalue les performances de chargement de l'application Disney+ HotStar sur une smart TV. La métrique personnalisée PAGE_RENDER_TIME arrive à 6,47 secondes.
Profilage (rendu de page en 6,47 secondes) provenant d'un téléviseur à l'aide du débogage à distance avec l'application TV exécutée dans Chrome.

Bien que ces tests donnent des données de test, Disney+ Hotstar a commencé à collecter des données réelles pour l'Interaction to Next Paint (INP) auprès des utilisateurs réels de l'application à l'aide de la bibliothèque web-Vitals. 75% des utilisateurs de l'application ont constaté un INP de 675 millisecondes sur le terrain, ce qui est considéré comme une expérience utilisateur "médiocre" selon les seuils INP.

Cette étude de cas explique comment Disney+ Hotstar a amélioré la réactivité de ses applications de streaming, en particulier sur les appareils bas de gamme. L'équipe a enregistré une amélioration de 61% en abaissant les valeurs INP à 272 millisecondes, toujours au-dessus du seuil recommandé de 200 millisecondes, mais une nette amélioration par rapport à cela.

Résultats

Disney+ Hotstar a instrumenté l'application à l'aide de la méthode onINP de la version d'attribution de la bibliothèque Web-Vitals. Au cours de la phase initiale, différents défis ont été rencontrés, notamment pour identifier l'élément cible précis. Le problème est survenu, car toutes les références pointaient vers le corps en raison d'une bibliothèque de navigation spatiale tierce utilisée avec certaines personnalisations de l'application Disney+ Hotstar. Cette bibliothèque n'écoute que les événements sur le corps du document, puis détermine l'élément sélectionné réel et prédit le focus suivant en fonction des pressions sur les touches à distance.

Disney+ Hotstar a commencé par résoudre le problème d'attribution afin d'identifier correctement les interactions responsables de valeurs INP élevées. Pour ce faire, Disney+ Hotstar a enregistré l'attribut focusKey qui est déjà présent dans la bibliothèque de navigation spatiale pour l'élément sélectionné, ainsi qu'une carte de tous les éléments sélectionnables de la page, ce qui est semblable à la cible d'interaction disponible dans la version d'attribution Web-Vitals.

Capture d'écran d'une liste d'éléments, en fonction de leur attribut focusKey, avec la latence d'interaction pour chacun
Capture de focusKey, ainsi que le chemin d'accès à l'élément qui le déclenche.

Maintenant que les mesures et l'attribution appropriées ont été mises en place, les résultats des données réelles indiquent que les interactions suivantes sont les plus problématiques pour INP:

  1. Navigation dans la barre de carrousel horizontale.
  2. Navigation dans la barre de carrousel verticale
  3. Interactions lors du chargement initial de la page.
Capture d'écran de l'élément responsable de la navigation dans le carrousel de la barre d'état via sa touche de sélection.
Entrée du tableau de bord montrant la contribution à l'INP par la navigation dans le carrousel de la barre.

En profilant ces interactions avec le panneau des performances dans les outils pour les développeurs Chrome, nous avons constaté que la bibliothèque de navigation spatiale lisait la position de tous les éléments sélectionnables et a créé une nouvelle arborescence. Il s'agit d'une opération coûteuse qui déclenche un thrashing de la mise en page à chaque interaction, par exemple le passage d'un élément à un autre.

Pour la page d'accueil, une arborescence a été générée par la bibliothèque de navigation spatiale comme suit:

Exemple d'arborescence générée par la bibliothèque de navigation spatiale. Sous la racine se trouvent les nœuds Navbar et Tray Container. Plus spécifiquement, le nœud du conteneur de tiroir contient trois nœuds de cartes, chacun ayant de nombreux sous-nœuds qui contribuent à la taille importante du DOM.
Arborescence de navigation spatiale précédente pour la page d'accueil.

Ainsi, si l'application affichait 10 bacs et que chacun d'entre eux comportait 7 cartes, il y aurait 70 éléments sélectionnables pour le conteneur de la barre, y compris les éléments de navigation. Cela représente un nombre élevé d'éléments interactifs. Une bibliothèque de carrousel tierce a également été utilisée. Elle lit les dimensions de chaque fiche pendant la navigation horizontale pour traduire le conteneur, ce qui augmente encore la latence d'interaction.

Résoudre les problèmes

Plusieurs problèmes différents devaient être résolus séparément afin de résoudre les problèmes de réactivité de l'application dans son ensemble.

Améliorations de la navigation dans la barre horizontale

Disney+ Hotstar a créé sa propre bibliothèque carrousel interne, qui ne déclenche pas de thrashing de la mise en page en utilisant des animations composées et en lisant les dimensions une fois par barre, plutôt qu'une fois par fiche.

La navigation spatiale se concentre uniquement sur la racine du carrousel, et pour une navigation horizontale plus poussée, notre carrousel personnalisé entre en scène. Grâce à cette approche, Disney+ Hotstar a supprimé la dépendance de la navigation spatiale et de l'ancienne bibliothèque de carrousel, qui lisait les dimensions de chaque navigation.

Voici comment l'arborescence de navigation spatiale a tenu compte de ces optimisations.

Exemple d'arborescence optimisée générée par la bibliothèque de navigation spatiale, nettement optimisée par rapport à la version précédente, contenant beaucoup moins de nœuds.
Arborescence de navigation spatiale après optimisation.

Les images suivantes illustrent une comparaison des performances mesurées dans le panneau des performances des outils pour les développeurs Chrome avant et après l'implémentation de notre carrousel.

Capture d'écran du panneau "Performances" dans les outils pour les développeurs Chrome montrant les tâches lancées par le carrousel tiers. De nombreuses longues tâches retardent l'interactivité.
Carrousel tiers
Capture d'écran du panneau "Performances" dans les outils pour les développeurs Chrome montrant les tâches lancées par le carrousel interne. Par rapport au carrousel tiers, il y a beaucoup moins de tâches longues, ce qui permet des interactions plus rapides.
Carrousel interne

Grâce à ce travail, Disney+ Hotstar a constaté une réduction significative de l'INP de son application sur le terrain. Il a également réussi à économiser environ 35 Ko (compressé) en supprimant la bibliothèque tierce. En outre, ces améliorations ont permis à Disney+ Hotstar de réduire la durée de la métrique personnalisée qu'elle utilise pour mesurer le temps total d'affichage de la page d'accueil, car les mises en page se déclenchent moins souvent en raison de la réduction du nombre de nœuds de navigation spatiale.

Une série temporelle de la métrique personnalisée du délai d'affichage de la page pour tizentv et webos, qui a diminué respectivement de 31% et de 25,2% entre le 13 et le 19 mars.
Tendance à la baisse des délais d'affichage des pages par système d'exploitation TV (Samsung-Tizen et WebOS-LG).

Améliorations de la navigation dans la barre verticale

Disney+ Hotstar a également amélioré les performances de navigation dans la barre verticale en chargeant les bacs de façon différée au lieu de les charger tous à l'avance. Ainsi, lors du chargement de la page, au lieu de charger 10 instances de la barre d'état (qui comportent chacune un composant carrousel et de nombreuses images), l'application ne charge que les deux bacs visibles dans la fenêtre d'affichage, plus un bac supplémentaire au-dessus et en dessous. Le rendu a également été divisé en plusieurs tâches à l'aide de la stratégie de rendement setTimeout() afin que le thread principal ait plus de possibilités de gérer les interactions utilisateur.

Visualisation stylisée des tâches pour l'exécution des gestionnaires d'événements et le rendu des mises à jour. Les mises à jour du rendu sont reportées après une seule longue tâche.
Une seule tâche de longue durée suivie d'un rendu avant l'amélioration de la barre verticale.
Une autre visualisation de la même activité que la figure précédente, mais les tâches sont divisées en raison du rendement, ce qui permet un rendu plus rapide.
Plusieurs tâches fractionnées après amélioration de la barre verticale, avec possibilité d'affichage entre les tâches fractionnées.

Interactions lors du chargement initial de la page

L'INP est élevé pour les applications qui traitent un grand nombre de scripts lors du lancement de l'application. En effet, le navigateur doit télécharger, analyser et évaluer ces scripts. Dans l'intervalle, le thread principal sera occupé pendant une période potentiellement longue et ne pourra pas répondre rapidement aux interactions des utilisateurs.

Disney+ Hotstar s'est rendu compte qu'elle traitait plus de scripts que nécessaire au démarrage de l'application (temps d'écran de démarrage) pour accélérer le chargement des pages suivantes. Cette opération a entraîné des tâches supplémentaires d'évaluation du script, qui pouvaient également avoir un impact négatif sur l'INP.

Pour résoudre ce problème, Disney+ Hostar a envisagé de charger dynamiquement la plupart des éléments afin de gagner du temps au démarrage de l'application. Toutefois, cela aurait pour effet d'augmenter le temps de chargement des navigations vers les futures pages, car ce code JavaScript ne serait plus chargé à l'avance avec ce changement. Pour résoudre ce problème, Disney+ Hotstar a développé une bibliothèque interne de pré-chargeur d'éléments qui détermine la prochaine page à suivre dans le parcours utilisateur et précharge les éléments de cette page. Exemple :

  • Lorsqu'un utilisateur se trouve sur la page de connexion, la bibliothèque du pré-chargeur d'éléments précharge les éléments pour la page de sélection du profil.
  • Sur la page de sélection du profil, les éléments de la page d'accueil sont chargés.
  • Sur la page d'accueil, les éléments de la page d'informations sont chargés.
  • Enfin, les éléments de la page de lecture sont chargés sur la page d'informations.

L'optimisation du chargement des éléments a permis à Disney+ Hotstar de réduire l'INP de l'application (car le thread principal était désormais relativement libre pour exécuter les interactions utilisateur) et de réduire l'utilisation de la mémoire sur les appareils de bas niveau.

Ces modifications ont entraîné une diminution de 32% de l'INP enregistré sur le terrain, comme le montre la capture d'écran suivante.

Une série temporelle de valeurs INP commençant le 13 août et le 11 septembre. Sur cette période, nous avons constaté une réduction de 32% de l'INP.
Réduction de l'INP pour l'amélioration de la barre d'état.

Autres améliorations

Disney+ Hotstar a également constaté que des tâches longues sur certains événements utilisateur pouvaient être divisées en succédant fréquemment au thread principal. L'application est donc allée encore plus loin et a créé un utilitaire de génération de tâches qui permet aux utilisateurs d'annuler la tâche en cours d'exécution.

Par exemple, lorsque l'utilisateur navigue d'une carte à l'autre dans la barre, voici ce qui se produit:

  • La carte suivante est sélectionnée.
  • La fiche est traduite si nécessaire.
  • La fonctionnalité Spotlight a été mise à jour.
  • La bande-annonce (le cas échéant) est récupérée et la lecture est lancée.
  • Les événements Analytics sont déclenchés pour l'action.

Si, au cours de ce processus, l'utilisateur se concentre sur la carte suivante, les autres étapes n'ont pas besoin d'être exécutées. Par exemple, la récupération de la bande-annonce et l'initialisation du lecteur pour un titre particulier ne sont plus nécessaires si l'utilisateur passe à la fiche suivante. Par conséquent, ces tâches peuvent être annulées pour libérer le thread principal.

L'utilitaire de génération de tâches de Disney+ Hotstar accepte une fonction qui est une tâche. Lorsqu'une autre tâche entre en jeu, la tâche précédente est annulée, ce qui nous évite d'exécuter inutilement des tâches et d'agir rapidement sur la tâche nécessaire.

Résultats

Au total, l'INP de l'application Disney+ Hotstar est passé de 675 millisecondes à 272 millisecondes, ce qui représente une amélioration de près de 60 %. En outre, la latence d'interaction de la barre est passée d'environ 400 millisecondes à environ 100 millisecondes.

Valeurs INP d'une série temporelle entre le 23 août et le 21 septembre. Nous avons constaté une réduction de 61% de l'INP au cours de cette période.

L'impact sur l'entreprise:le nombre de vues hebdomadaires des fiches par utilisateur est passé de 111 à 226. C'est une augmentation de 100 %, ce qui montre qu'une interface plus rapide et plus réactive est plus susceptible de susciter l'intérêt des utilisateurs pendant de plus longues périodes.

Capture d'écran d'une série temporelle montrant une augmentation de 100% des vues hebdomadaires de fiches sur l'application Disney+ HotStar pour tizentv et webos. Cette hausse se produit très nettement après le 4 avril 2004.

Ce n'est que le début, et Disney+ Hotstar n'a fait qu'effleurer la surface d'amélioration des performances de rendu et d'interaction en se basant sur la métrique INP. L'équipe a hâte de faire de Disney+ Hotstar une expérience fluide à ses clients dans un avenir proche.

Merci à Ayush, Ajay, Kiran, Milan et Richa de Disney+ Hotstar pour leurs efforts pour renverser la situation.

Nous remercions Ankeet Maini, responsable de l'ingénierie chez Disney+ Hotstar, et Rahul Krishnan P, responsable de l'expérience client Disney+ Hotstar pour soutenir ce travail d'innovation, ainsi que Jeremy Wagner, Gilberto, Barry Pollard et Brendan Kenny de Google pour avoir examiné et publié cette étude de cas.