Die Verbesserung des Werts „Interaction to Next Paint“ (INP) auf Smart-TVs und Set-Top-Boxen ist aufgrund der eingeschränkten API-Unterstützung und der bescheidenen Systemspezifikationen wesentlich schwieriger als bei Desktop-Browsern. In dieser Fallstudie erfahren Sie, wie Disney+ Hotstar diese Herausforderungen erfolgreich gemeistert und dadurch erhebliche Geschäftsvorteile erzielt hat.
Angesichts der zunehmenden Nutzung von Geräten im Wohnzimmer erkannte Disney+ Hotstar, dass es eine wichtige Geschäftsanforderung ist, in der App für Smart-TVs und Set-Top-Boxen ein nahtloses Surfen zu ermöglichen. Die Behebung von INP-Problemen auf solchen Geräten ist jedoch schwieriger, da jedes Fernsehermodell möglicherweise sehr alte Browserversionen verwendet. So verwendet beispielsweise ein LG-Fernseher aus dem Jahr 2020 Chrome 68, das 2018 veröffentlicht wurde. Einige dieser Geräte können auch als Low-End-Geräte eingestuft werden, d. h., sie können nicht so schnell auf Interaktionen reagieren wie Flagship-Tablets und -Laptops.
In der folgenden Abbildung wird verglichen, wie lange es dauert, eine Seite auf einem Laptop zu laden, dessen CPU in den Chrome-Entwicklertools sechsmal verlangsamt wurde, und auf einem Smart-TV. Wie Sie sehen, ist der Laptop immer noch viel schneller als ein vor Kurzem hergestelltes Smart-TV.
Während diese Tests Labordaten liefern, begann Disney+ Hotstar, Felddaten für die Interaktion bis zur nächsten Darstellung (Interaction to Next Paint, INP) von den tatsächlichen Nutzern der App mithilfe der Web Vitals-Bibliothek zu erheben. Dabei wurde festgestellt, dass 75% der App-Nutzer im Feld eine INP von 675 Millisekunden hatten, was gemäß den INP-Grenzwerten als „schlecht“ gilt.
In dieser Fallstudie erfahren Sie, wie Disney+ Hotstar die Reaktionsfähigkeit seiner Streaminganwendungen verbessert hat, insbesondere auf Low-End-Geräten. Sie konnten eine Verbesserung von 61% erzielen, indem sie die INP-Werte auf 272 Millisekunden senken. Das ist zwar immer noch über dem empfohlenen Grenzwert von 200 Millisekunden, aber eine deutliche Verbesserung.
Die Ergebnisse
Disney+ Hotstar hat die App mit der onINP-Methode aus der Attributionsversion der Web Vitals-Bibliothek instrumentiert. In der Anfangsphase wurden verschiedene Herausforderungen festgestellt, insbesondere bei der Identifizierung des genauen Zielelements. Das Problem trat auf, weil alle Verweise aufgrund einer Bibliothek für die räumliche Navigation eines Drittanbieters, die mit einigen Anpassungen in der Disney+ Hotstar App verwendet wurde, auf den Textkörper verweisen. Diese Bibliothek überwacht nur Ereignisse im Textkörper und bestimmt dann das tatsächliche fokussierte Element und prognostiziert den nächsten Fokus basierend auf Tastendrücken auf der Fernbedienung.
Disney+ Hotstar begann damit, das Attributionsproblem zu beheben, damit Interaktionen, die für hohe INP-Werte verantwortlich sind, richtig identifiziert werden konnten. Dazu hat Disney+ Hotstar das focusKey-Attribut protokolliert, das bereits in der Bibliothek für die räumliche Navigation für das aktuell fokussierte Element vorhanden ist, sowie eine Karte aller fokussierbaren Elemente auf der Seite. Das entspricht dem Interaktionsziel, das in der Web Vitals-Attributionsversion verfügbar ist.
focusKey zusammen mit dem Pfad zum Element, das sie auslöst.
Nachdem die entsprechenden Mess- und Attributionsmethoden eingerichtet wurden, haben die Ergebnisse der Felddaten ergeben, dass die folgenden Interaktionen für die Anzeigenbereitstellung am problematischsten sind:
- Horizontale Navigation im Karussell-Bereich.
- Vertikale Karussellnavigation.
- Interaktionen während des ersten Seitenaufbaus
Beim Profiling dieser Interaktionen mit dem Leistungsbereich in den Chrome Dev-Tools wurde festgestellt, dass die Bibliothek für die räumliche Navigation die Position aller fokussierbaren Elemente liest und einen neuen Baum erstellt. Dies ist ein teurer Vorgang, der bei jeder Interaktion, z. B. beim Wechseln von einem Element zum anderen, Layout-Überlastungen auslöst.
Für die Startseite wurde von der Bibliothek für die räumliche Navigation ein Baum wie der folgende generiert:
Wenn die App also 10 Tabletts anzeigte und jedes Tablett 7 Karten hatte, gab es 70 elemente, die fokussiert werden konnten, einschließlich Navigationselementen. Das ist eine hohe Anzahl interaktiver Elemente. Außerdem wurde eine Karussellbibliothek eines Drittanbieters verwendet, die die Abmessungen der einzelnen Karten bei der horizontalen Navigation las, um den Container zu übersetzen. Dies führte zu einer noch größeren Interaktionslatenz.
Probleme beheben
Es gab mehrere verschiedene Probleme, die alle separat angegangen werden mussten, um die Probleme mit der Reaktionsfähigkeit der gesamten App zu beheben.
Verbesserungen bei der horizontalen Navigation im Info-Bereich
Disney+ Hotstar hat eine eigene Karussellbibliothek entwickelt, die kein Layout-Trashing auslöst, da zusammengesetzte Animationen verwendet und die Abmessungen einmal pro Fach und nicht einmal pro Karte gelesen werden.
Die räumliche Navigation konzentriert sich nur auf die Wurzel des Karussells. Für die weitere horizontale Navigation kommt unser benutzerdefiniertes Karussell zum Einsatz. Mit diesem Ansatz hat Disney+ Hotstar die Abhängigkeit von der räumlichen Navigation und der alten Karussellbibliothek aufgehoben, die die Abmessungen bei jeder Navigation las.
So sah der Navigationsbaum für die Raumnavigation nach diesen Optimierungen aus.
Die folgenden Bilder zeigen einen Leistungsvergleich, der im Leistungsbereich der Chrome DevTools vor und nach der Karussellimplementierung gemessen wurde.
Durch diese Arbeit konnte Disney+ Hotstar die INP der App in der Praxis deutlich senken. Außerdem konnte er durch Entfernen der Drittanbieterbibliothek etwa 35 KB (komprimiert) einsparen. Als Bonus konnte Disney+ Hotstar durch diese Verbesserungen auch die Dauer des benutzerdefinierten Messwerts reduzieren, mit dem die Gesamt-Renderingzeit für die Startseite gemessen wird, da Layouts aufgrund reduzierter räumlicher Navigationsknoten seltener ausgelöst werden.
Verbesserungen bei der Navigation im vertikalen Infobereich
Disney+ Hotstar hat außerdem die Leistung der vertikalen Navigation durch Lazy Loading der Bereiche verbessert, anstatt sie alle gleichzeitig zu laden. Beim Laden der Seite werden also nicht zehn Instanzen des Trays geladen, die intern jeweils eine Karussellkomponente und eine Reihe von Bildern haben, sondern nur die beiden Trays, die im Darstellungsbereich sichtbar sind, sowie ein zusätzliches Tray oben und unten. Das Rendering wurde außerdem mithilfe der setTimeout()Yielding-Strategie in mehrere Aufgaben unterteilt, damit der Hauptthread mehr Möglichkeiten hat, Nutzerinteraktionen zu verarbeiten.
Interaktionen während des ersten Seitenaufbaus
Bei Anwendungen, die beim Starten der App eine große Anzahl von Scripts verarbeiten, ist der INP hoch. Das liegt daran, dass der Browser diese Scripts herunterladen, analysieren und auswerten muss. Während dieser Vorgänge ist der Hauptthread möglicherweise lange beschäftigt und kann nicht schnell auf Nutzerinteraktionen reagieren.
Disney+ Hotstar stellte fest, dass beim Start der Anwendung (Zeit des Splashscreens) mehr Scripts verarbeitet wurden, als tatsächlich erforderlich waren, um zukünftige Seitenladezeiten zu verkürzen. Dies führte zu zusätzlichen Aufgaben zur Skriptbewertung, die sich auch negativ auf die INP auswirken konnten.
Um das Problem zu beheben, überlegte sich Disney+ Hotstar, die meisten Assets dynamisch zu laden, um beim Starten der App Zeit zu sparen. Dadurch hätten sich jedoch die Ladezeiten für die Navigation zu zukünftigen Seiten erhöht, da dieses JavaScript mit dieser Änderung nicht mehr im Voraus geladen würde. Um dieses Problem zu lösen, hat Disney+ Hotstar eine interne Asset-Preloader-Bibliothek entwickelt, die bestimmt, welche Seite in der User Journey als Nächstes kommen könnte, und die Assets für diese Seite vorab lädt. Beispiel:
- Wenn sich ein Nutzer auf der Anmeldeseite befindet, werden in der Asset-Preloader-Bibliothek Assets für die Seite zur Profilauswahl vorab geladen.
- Auf der Seite mit der Profilauswahl werden Startseiten-Assets geladen.
- Auf der Startseite werden die Assets der Detailseite geladen.
- Schließlich werden die Assets der Wiedergabeseite auf der Detailseite geladen.
Durch die Optimierung des Asset-Ladens konnte Disney+ Hotstar zwei Dinge erreichen: die INP der App reduzieren (da der Hauptthread jetzt relativ kostenlos war, um Nutzerinteraktionen auszuführen) und die Speichernutzung auf Geräten der unteren Preisklasse senken.
Diese Änderungen führten zu einer Verringerung der gemeldeten INP-Anzahl im Feld um 32 %, wie im folgenden Screenshot zu sehen ist.
Weitere Verbesserungen
Disney+ Hotstar stellte außerdem fest, dass es bei einigen Nutzerereignissen lange Aufgaben gab, die durch häufiges Übergeben an den Hauptthread aufgeteilt werden konnten. Das Team ging noch einen Schritt weiter und erstellte ein Dienstprogramm zum Erstellen von Aufgaben, mit dem Nutzer die Aufgabe während der Ausführung abbrechen können.
Wenn sich der Nutzer beispielsweise durch mehrere Karten im Fach bewegt, geschieht Folgendes:
- Die nächste Karte ist im Fokus.
- Die Karte wird bei Bedarf übersetzt.
- Spotlight wird aktualisiert.
- Der Trailer wird abgerufen (falls vorhanden) und die Wiedergabe gestartet.
- Für die Aktion werden Analytics-Ereignisse ausgelöst.
Wenn sich der Nutzer während dieses Vorgangs auf die nächste Karte konzentriert, müssen die restlichen Schritte nicht ausgeführt werden. So sind beispielsweise das Abrufen des Trailers und die Initialisierung des Players für einen bestimmten Titel nicht mehr erforderlich, wenn der Nutzer zur nächsten Karte gewechselt ist. Daher können diese Aufgaben abgebrochen werden, um den Haupt-Thread freizugeben.
Das Dienstprogramm „Task Generator“ von Disney+ Hotstar akzeptiert eine Funktion, die eine Aufgabe ist. Wenn eine andere Aufgabe dazwischen kommt, wird die vorherige Aufgabe abgebrochen, wodurch unnötige Aufgabenausführungen vermieden und die erforderliche Aufgabe schnell ausgeführt werden kann.
Ergebnisse
Insgesamt sank die INP der Disney+ Hotstar-Anwendung von 675 Millisekunden auf 272 Millisekunden, was einer Verbesserung von fast 60 % entspricht. Außerdem wurden die Latenzen bei der Interaktion mit dem Info-Bereich von etwa 400 Millisekunden auf etwa 100 Millisekunden reduziert.
Wirkung auf das Unternehmen:Die Kartenaufrufe pro Nutzer stiegen von 111 auf 226 pro Woche. Das entspricht einer Steigerung um 100 %. Eine schnellere und reaktionsfähigere Benutzeroberfläche sorgt also eher dafür, dass Nutzer länger aktiv bleiben.
Das ist erst der Anfang. Disney+ Hotstar hat mit dem INP-Messwert erst begonnen, die Rendering- und Interaktionsleistung zu verbessern. Das Team freut sich darauf, Disney+ Hotstar in naher Zukunft noch flüssiger zu machen.
Vielen Dank an Ayush, Ajay, Kiran, Milan und Richa von Disney+ Hotstar für ihre Bemühungen, die Situation zu verbessern.
Ein besonderer Dank geht an Ankeet Maini, Engineering Head von Disney+ Hotstar, und Rahul Krishnan P, Head of Customer Experience von Disney+ Hotstar, für die Unterstützung bei dieser Innovationsarbeit sowie an Jeremy Wagner, Gilberto, Barry Pollard und Brendan Kenny von Google, die diese Fallstudie geprüft und bei der Veröffentlichung unterstützt haben.