Migliorare l'interazione con Next Paint (INP) sulle smart TV e sui dispositivi decoder presenta molte più sfide rispetto ai browser desktop, a causa dei limiti di un supporto API limitato e di specifiche di sistema modeste. In questo case study, scoprirai in che modo Disney+ Hotstar ha affrontato con successo questi ostacoli e ha ottenuto vantaggi aziendali significativi.
Con la crescente adozione di dispositivi da soggiorno, Disney+ Hotstar si è resa conto che fornire un'esperienza di navigazione senza interruzioni nell'app per smart TV e decoder è un requisito aziendale fondamentale. Tuttavia, ciò che rende più difficile risolvere il problema INP per questi dispositivi è che un determinato modello di TV potrebbe utilizzare versioni del browser molto vecchie, ad esempio una TV LG del 2020 utilizza Chrome 68 rilasciato nel 2018. Alcuni di questi dispositivi possono essere classificati anche come dispositivi di fascia bassa, vale a dire che non sono in grado di rispondere alle interazioni con la stessa velocità dei tablet e dei laptop di punta.
La figura che segue mette a confronto il tempo necessario per caricare una pagina tra un laptop con la CPU rallentata di sei volte in Chrome DevTools e una smart TV. Come si può vedere, il laptop è ancora molto più veloce di una smart TV di recente produzione.
Mentre questi test producono dati di laboratorio, Disney+ Hotstar ha iniziato a raccogliere dati sul campo per Interaction to Next Paint (INP) dagli utenti effettivi dell'app utilizzando la libreria di elementi vital web e ha osservato che il 75% degli utenti dell'app ha riscontrato un INP di 675 millisecondi sul campo, che è considerato un'esperienza utente "scarsa" secondo la INP.
Questo case study spiega in che modo Disney+ Hotstar ha migliorato la reattività nelle applicazioni di streaming, in particolare sui dispositivi di fascia bassa. Ha ottenuto un miglioramento del 61% portando i valori INP a 272 millisecondi, ancora al di sopra della soglia consigliata di 200 millisecondi, ma un miglioramento sostanziale rispetto a questa soglia.
I risultati
Disney+ Hotstar ha strumentato l'app utilizzando il metodo onINP della raccolta di eventi web vital della build di attribuzione. Durante la fase iniziale, sono state riscontrate diverse sfide, soprattutto nell'identificazione dell'esatto elemento bersaglio. Il problema si è verificato perché tutti i riferimenti puntavano al corpo a causa di una libreria di navigazione spaziale di terze parti che è stata utilizzata con alcune personalizzazioni nell'app Disney+ Hotstar. Questa raccolta ascolta esclusivamente gli eventi presenti nel corpo del documento e successivamente determina l'elemento attivo effettivo e prevede il focus successivo in base alla pressione dei tasti da remoto.
Disney+ Hotstar ha iniziato risolvendo innanzitutto il problema dell'attribuzione, in modo da identificare correttamente le interazioni responsabili di valori INP elevati. Per questo motivo, Disney+ Hotstar ha registrato l'attributo focusKey, già presente nella libreria di navigazione spaziale per l'elemento attualmente attivo, nonché la mappa di tutti gli elementi attivabili nella pagina, il che è analogo al target di interazione disponibile nella build dell'attribuzione degli eventi web vital.
focusKey e del percorso dell'elemento che lo attiva.
Ora, con l'implementazione di misurazioni e attribuzioni adeguate, i risultati dei dati sul campo hanno segnalato le seguenti interazioni come le più problematiche per INP:
- Navigazione orizzontale nella barra delle app del carosello.
- Navigazione nella barra del carosello verticale.
- Interazioni durante il caricamento iniziale della pagina.
Dopo aver profilato queste interazioni con il riquadro delle prestazioni in Chrome Dev Tools, ci siamo resi conto che la libreria di navigazione spaziale leggeva la posizione di tutti gli elementi attivabili e ha creato un nuovo albero. Si tratta di un'operazione costosa che attiva il thrash del layout per ogni interazione, ad esempio lo spostamento da un elemento all'altro.
Per la home page, la libreria di navigazione spaziale ha generato un albero nel seguente modo:
Ciò significa che, se l'app mostrava 10 vassoi e ogni vassoio aveva 7 schede, ci sarebbero stati 70 elementi attivabili per il contenitore dei vassoi, inclusi gli elementi di navigazione. Si tratta di un numero elevato di elementi interattivi. È stata anche utilizzata una libreria carosello di terze parti, che ha letto le dimensioni di ogni scheda durante la navigazione orizzontale per tradurre il contenitore, aggiungendo ulteriore latenza di interazione.
Risoluzione dei problemi
C'erano diversi problemi che dovevano essere tutti risolti separatamente per risolvere i problemi di reattività dell'app in generale.
Miglioramenti alla navigazione nella barra orizzontale
Disney+ Hotstar ha creato la propria raccolta di carosello interna che non attiva il thrash del layout utilizzando animazioni composite e leggendo le dimensioni una volta per vassoio anziché una volta per scheda.
La navigazione spaziale si concentra solo sulla radice del carosello e, per un'ulteriore navigazione orizzontale, entra in scena il nostro carosello personalizzato. Con questo approccio, Disney+ Hotstar ha rimosso la dipendenza dalla navigazione spaziale e dalla vecchia libreria a carosello che legge le dimensioni di ogni navigazione.
Ecco come si è comportata l'albero di navigazione spaziale per queste ottimizzazioni.
Le immagini che seguono sono un confronto delle prestazioni misurato nel riquadro delle prestazioni di Chrome DevTools prima e dopo l'implementazione del carosello.
Il risultato è che Disney+ Hotstar ha registrato una riduzione significativa dell'INP della sua app nel campo. Sono anche riusciti a risparmiare circa 35 kB (compressi) rimuovendo la libreria di terze parti. Come bonus, questi miglioramenti hanno anche consentito a Disney+ Hotstar di ridurre la durata della metrica personalizzata utilizzata per misurare il tempo di rendering totale della home page, poiché i layout vengono attivati meno spesso a causa della riduzione dei nodi di navigazione spaziale.
Miglioramenti alla navigazione nella barra verticale
Disney+ Hotstar ha migliorato anche le prestazioni della navigazione verticale mediante il caricamento lento dei vassoi anziché tutti in primo piano. Quindi, al caricamento della pagina, invece di caricare 10 istanze del vassoio, che internamente hanno un componente carosello e una serie di immagini, l'app carica solo i due vassoi visibili nell'area visibile, oltre a un cassetto aggiuntivo sopra e sotto. Inoltre, il rendering è stato suddiviso in più attività utilizzando la strategia di rendimento setTimeout(), in modo che il thread principale abbia maggiori opportunità di gestire le interazioni degli utenti.
Interazioni durante il caricamento iniziale della pagina
Il valore INP sarà elevato per le applicazioni che elaborano un numero elevato di script durante l'avvio dell'app. Questo accade perché il browser deve scaricare, analizzare e valutare questi script. Mentre tutto questo accade, il thread principale rimarrà occupato per molto tempo e non sarà in grado di rispondere rapidamente alle interazioni degli utenti.
Disney+ Hotstar si è resa conto che stava elaborando più script del necessario all'avvio dell'applicazione (il tempo della schermata iniziale) per rendere più veloce il caricamento delle pagine future. Ciò ha comportato ulteriori attività di valutazione degli script, che hanno il potenziale anche di influire negativamente su INP.
Per risolvere il problema, Disney+ Hotstar ha preso in considerazione il caricamento dinamico della maggior parte delle risorse, in modo da risparmiare tempo durante l'avvio dell'app. Tuttavia, questo avrebbe aumentato i tempi di caricamento per le navigazioni alle pagine future, poiché JavaScript non verrà più caricato prima di questa modifica. Per far fronte a questo problema, Disney+ Hotstar ha sviluppato una raccolta interna di preloader di risorse che determina quale pagina verrà visualizzata dopo nel percorso dell'utente e precarica le risorse per quella pagina. Ad esempio:
- Quando un utente si trova nella pagina di accesso, la raccolta del precaricatore degli asset precarica gli asset per la pagina di selezione del profilo.
- Nella pagina di selezione del profilo, vengono caricati gli asset della home page.
- Nella home page vengono caricati gli asset della pagina dei dettagli.
- Infine, le risorse della pagina di visualizzazione vengono caricate nella pagina dei dettagli.
L'ottimizzazione del caricamento degli asset ha aiutato Disney+ Hotstar con due cose: ridurre l'INP dell'app (dato che il thread principale ora era relativamente libero di eseguire interazioni degli utenti) e anche ridurre l'utilizzo della memoria sui dispositivi di basso livello.
Queste modifiche hanno portato a una diminuzione del 32% del numero INP segnalato dal campo, come puoi vedere nello screenshot seguente.
Altri miglioramenti
Disney+ Hotstar ha anche capito che c'erano attività lunghe su alcuni eventi utente che potevano essere suddivise restituendo spesso al thread principale, quindi ha fatto un passo in più e ha creato un'utilità di generazione di attività che consentirà agli utenti di annullare l'attività durante l'esecuzione.
Ad esempio, quando l'utente naviga tra più schede sulla barra, si verifica quanto segue:
- La scheda successiva è evidenziata.
- La carta viene tradotta, se necessario.
- In evidenza è aggiornato.
- Il trailer, se presente, viene recuperato e viene avviata la riproduzione.
- Gli eventi di Analytics vengono attivati per l'azione.
Se, durante questo processo, l'utente si concentra sulla scheda successiva, non sarà necessario eseguire gli altri passaggi. Ad esempio, il recupero del trailer e l'inizializzazione del player per un determinato titolo non sono più necessari se l'utente è passato alla scheda successiva. Di conseguenza, queste attività possono essere interrotte per liberare il thread principale.
L'utilità di generazione di attività di Disney+ Hotstar accetta una funzione che è un'attività e quando un'altra attività viene nel mezzo, quella precedente viene interrotta consentendoci di eseguire l'attività non necessaria e di agire rapidamente sull'attività necessaria.
Risultati
Nel complesso, l'INP dell'applicazione Disney+ Hotstar è sceso da 675 a 272 millisecondi, rappresentando un miglioramento di quasi il 60%. Inoltre, le latenze di interazione della barra sono diminuite da circa 400 millisecondi a circa 100 millisecondi.
L'impatto sull'attività: le visualizzazioni settimanali delle schede sono aumentate da 111 a 226 per utente. Si tratta di un aumento del 100%, a dimostrazione che un'interfaccia più veloce e più reattiva ha maggiori probabilità di coinvolgere gli utenti per periodi di tempo più lunghi.
Questo è solo l'inizio e Disney+ Hotstar ha appena iniziato a migliorare le prestazioni di rendering e interazione con la metrica INP come guida. Il team è entusiasta di rendere Disney+ Hotstar un'esperienza fluida per i clienti nel prossimo futuro.
Grazie ad Ayush, Ajay, Kiran, Milan e Richa di Disney+ Hotstar per il loro impegno nel cambiare le sorti.
Un ringraziamento speciale a Ankeet Maini, Engineering Head Disney+ Hotstar, e Rahul Krishnan P, Head of Customer Experience Disney+ Hotstar per il supporto di questo lavoro di innovazione, e a Jeremy Wagner, Gilberto, Barry Pollard e Brendan Kenny di Google per la revisione e il contributo alla pubblicazione di questo case study.