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.
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.
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.
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:
- Navigation dans la barre de carrousel horizontale.
- Navigation dans la barre de carrousel verticale
- Interactions lors du chargement initial de la page.
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:
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.
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.
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.
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.
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.
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.
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.
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.