Melhorar a Interação com a próxima exibição (INP, na sigla em inglês) em smart TVs e dispositivos de set-top box apresenta desafios consideravelmente maiores do que para navegadores de computador, devido às limitações de suporte limitado à API e especificações modestas do sistema. Neste estudo de caso, você vai descobrir como a Disney+ Hotstar superou esses obstáculos e obteve benefícios comerciais significativos.
Com o aumento da adoção de dispositivos na sala de estar, a Disney+ Hotstar reconheceu que oferecer uma experiência de navegação perfeita no app para smart TVs e decodificadores é um requisito comercial fundamental. O que dificulta a correção da INP para esses dispositivos é que qualquer modelo de TV pode usar versões de navegador muito antigas. Por exemplo, uma TV LG de 2020 usa o Chrome 68, lançado em 2018. Alguns desses dispositivos também podem ser categorizados como dispositivos de baixo custo, o que significa que eles não podem responder às interações tão rapidamente quanto os tablets e laptops principais.
A figura a seguir compara o tempo necessário para carregar uma página entre um laptop com a CPU seis vezes mais lenta aplicada no Chrome DevTools e uma smart TV. Como se pode ver, o laptop ainda é muito mais rápido do que uma smart TV fabricada recentemente.
Embora esses testes gerem dados de laboratório, a Disney+ Hotstar começou a coletar dados de campo para Interação até a próxima pintura (INP) dos usuários reais do app usando a biblioteca de Core Web Vitals e observou que 75% dos usuários do app tiveram uma INP de 675 milissegundos no campo, o que é considerado uma experiência do usuário "ruim" de acordo com os limites de INP.
Este estudo de caso aborda como a Disney+ Hotstar melhorou a capacidade de resposta nos aplicativos de streaming, especialmente em dispositivos de baixo custo. Eles alcançaram uma melhoria de 61% reduzindo os valores de INP para 272 milissegundos, ainda acima do limite "bom" recomendado de 200 milissegundos, mas uma melhoria substancial em relação a isso.
As descobertas
A Disney+ Hotstar instrumentou o app usando o método onINP do build de atribuição da biblioteca web-vitals. Durante a fase inicial, vários desafios foram encontrados, principalmente na identificação do elemento de destino exato. O problema surgiu porque todas as referências apontavam para o corpo devido a uma biblioteca de navegação espacial de terceiros que foi usada com algumas personalizações no app Disney+ Hotstar. Essa biblioteca detecta apenas eventos no corpo do documento e, em seguida, determina o elemento focado real e prevê o próximo foco com base nas pressões de tecla remotas.
A Disney+ Hotstar começou resolvendo o problema de atribuição para que as interações responsáveis por valores altos de INP pudessem ser identificadas corretamente. Para isso, a Disney+ Hotstar registrou o atributo focusKey, que já está presente na biblioteca de navegação espacial para o elemento atualmente em foco, bem como o mapa de todos os elementos focados na página, que é análogo ao alvo de interação disponível na build de atribuição de Web Vitals.
focusKey, junto com o caminho para o elemento que a aciona.
Agora que a medição e a atribuição adequadas estão em vigor, as descobertas dos dados de campo indicaram as seguintes interações como as mais problemáticas para a INP:
- Navegação da bandeja do carrossel horizontal.
- Navegação da bandeja do carrossel vertical.
- Interações durante o carregamento inicial da página.
Ao analisar o perfil dessas interações com o painel de desempenho nas Ferramentas do desenvolvedor do Chrome, foi possível perceber que a biblioteca de navegação espacial lia a posição de todos os elementos com foco e criava uma nova árvore. Essa é uma operação cara que aciona o layout thrashing em cada interação, como a transição de um elemento para outro.
Para a página inicial, uma árvore foi gerada pela biblioteca de navegação espacial da seguinte maneira:
Isso significa que, se o app mostrasse 10 bandejas e cada uma tivesse 7 cards, haveria 70 elementos com foco para o contêiner da bandeja, incluindo itens de navegação. Esse é um número alto de elementos interativos. Uma biblioteca de carrossel de terceiros também foi usada. Ela leu as dimensões de cada card durante a navegação horizontal para traduzir o contêiner, adicionando ainda mais latência de interação.
Como corrigir os problemas
Houve vários problemas diferentes que precisavam ser resolvidos separadamente para resolver os problemas de resposta do app.
Melhorias na navegação horizontal da bandeja
A Disney+ Hotstar criou uma biblioteca de carrossel própria que não aciona o conflito de layout usando animações compostas e lendo as dimensões uma vez por bandeja, em vez de uma vez por cartão.
A navegação espacial se concentra apenas na raiz do carrossel. Para mais navegação horizontal, nosso carrossel personalizado entra em cena. Com essa abordagem, a Disney+ Hotstar removeu a dependência da navegação espacial e a antiga biblioteca de carrossel, que lia as dimensões em cada navegação.
Esta é a aparência da árvore de navegação espacial após essas otimizações.
As imagens a seguir são uma comparação de desempenho medida no painel de desempenho do Chrome DevTools antes e depois da implementação do carrossel.
Como resultado desse trabalho, a Disney+ Hotstar teve uma redução significativa no INP do app no campo. Eles também conseguiram economizar cerca de 35 KB (compactados) removendo a biblioteca de terceiros. Como bônus, essas melhorias também permitiram que a Disney+ Hotstar reduzisse a duração da métrica personalizada usada para medir o tempo total de renderização da página inicial, já que os layouts são acionados com menos frequência devido à redução dos nós de navegação espacial.
Melhorias na navegação vertical da bandeja
A Disney+ Hotstar também melhorou o desempenho da navegação vertical na bandeja, carregando as bandejas de forma lenta em vez de todas de uma vez. Assim, no carregamento da página, em vez de carregar 10 instâncias da bandeja, cada uma com um componente de carrossel e um monte de imagens, o app carrega apenas as duas bandejas que estão visíveis na viewport, além de uma bandeja adicional acima e abaixo. A renderização também foi dividida em várias tarefas usando a estratégia de rendimento setTimeout() para que a linha de execução principal tivesse mais oportunidades de processar as interações do usuário.
Interações durante o carregamento inicial da página
O INP será alto para aplicativos que processam um grande número de scripts durante a inicialização. Isso acontece porque o navegador precisa fazer o download, analisar e avaliar esses scripts. Enquanto isso, a linha de execução principal fica ocupada por um tempo potencialmente longo e não consegue responder rapidamente às interações do usuário.
A Disney+ Hotstar percebeu que estava processando mais scripts do que o necessário durante a inicialização do aplicativo (o tempo da tela de apresentação) para tornar os carregamentos de página mais rápidos. Isso gerou outras tarefas de avaliação de script, que também poderiam afetar negativamente a INP.
Para corrigir isso, a Disney+ Hotstar considerou carregar dinamicamente a maioria dos recursos para economizar tempo durante a inicialização do app. No entanto, isso aumentaria os tempos de carregamento para navegações em páginas futuras, já que o JavaScript não seria mais carregado com antecedência com essa mudança. Para resolver esse problema, a Disney+ Hotstar desenvolveu uma biblioteca interna de pré-carregadores de recursos que determina qual página pode vir a seguir na jornada do usuário e carrega os recursos para essa página. Exemplo:
- Quando um usuário está na página de login, a biblioteca de pré-carregamento de recursos carrega os recursos para a página de seleção de perfil.
- Na página de seleção de perfil, os recursos da página inicial são carregados.
- Na página inicial, os recursos da página de detalhes são carregados.
- Por fim, os recursos da página de exibição são carregados na página de detalhes.
A otimização do carregamento de recursos ajudou a Disney+ Hotstar de duas maneiras: reduzir o INP do app (já que a linha de execução principal agora estava relativamente livre para executar interações do usuário) e também reduzir o uso de memória em dispositivos de baixo nível.
Essas mudanças levaram a uma redução de 32% no número de INP informado do campo, como pode ser visto na captura de tela a seguir.
Outros aperfeiçoamentos
A Disney+ Hotstar também descobriu que havia tarefas longas em alguns eventos do usuário que podiam ser divididas por retornar à linha de execução principal com frequência e foi além, criando um utilitário de gerador de tarefas que permite que os usuários cancelem a tarefa no meio da execução.
Por exemplo, quando o usuário navega por vários cards na bandeja, o seguinte acontece:
- O próximo card é focado.
- O card é traduzido, se necessário.
- O Destaque foi atualizado.
- O trailer, se presente, é buscado e a reprodução é iniciada.
- Os eventos do Google Analytics são disparados para a ação.
Se, durante esse processo, o usuário focar no próximo card, o restante das etapas não precisará ser executado. Por exemplo, a busca de trailers e a inicialização do player para um título específico não serão mais necessárias se o usuário tiver passado para o próximo card. Portanto, essas tarefas podem ser abortadas para liberar a linha de execução principal.
O utilitário de gerador de tarefas do Disney+ Hotstar aceita uma função, que é uma tarefa, e quando outra tarefa aparece no meio, a anterior é abortada, o que nos poupa de uma execução desnecessária e permite agir rapidamente na tarefa necessária.
Resultados
No geral, o INP do aplicativo da Disney+ Hotstar caiu de 675 para 272 milissegundos, o que representa uma melhoria de quase 60%. Além disso, as latências de interação com a bandeja diminuíram de cerca de 400 para 100 milissegundos.
O impacto nos negócios:as visualizações de cards por semana aumentaram de 111 para 226 por usuário. Isso representa um aumento de 100%, mostrando que uma interface mais rápida e responsiva tem mais chances de engajar os usuários por períodos mais longos.
Esse é apenas o começo, e a Disney+ Hotstar apenas começou a melhorar a renderização e a performance de interação com a métrica INP como guia. A equipe está animada para tornar a Disney+ Hotstar uma experiência suave para os clientes em breve.
Agradecemos a Ayush, Ajay, Kiran, Milan e Richa, da Disney+ Hotstar, pelos esforços para reverter a situação.
Agradecemos especialmente a Ankeet Maini, chefe de engenharia da Disney+ Hotstar, e Rahul Krishnan P, chefe de experiência do cliente da Disney+ Hotstar, por apoiar esse trabalho de inovação, e a Jeremy Wagner, Gilberto, Barry Pollard e Brendan Kenny do Google por revisar e ajudar na publicação deste estudo de caso.