Die Verbesserung von Interaction to Next Paint (INP) auf Smart-TVs und Set-Top-Box-Geräten stellt wegen der begrenzten API-Unterstützung und moderaten Systemspezifikationen erhebliche Herausforderungen als bei Desktop-Browsern dar. In dieser Fallstudie erfahren Sie, wie Disney+ Hotstar diese Hindernisse erfolgreich bewältigt und dadurch erhebliche geschäftliche Vorteile erzielte.
Mit der zunehmenden Verbreitung von Wohnzimmergeräten erkannte Disney+ Hotstar, dass ein nahtloses Surfen in der App für Smart-TVs und Set-Top-Boxen eine wichtige Geschäftsanforderung ist. Die Behebung von INP-Problemen für solche Geräte ist jedoch schwieriger, weil ein bestimmtes Fernsehmodell sehr alte Browserversionen verwendet. Ein LG-Fernseher von 2020 verwendet zum Beispiel Chrome 68, das 2018 veröffentlicht wurde. Einige dieser Geräte können ebenfalls als Low-End-Geräte kategorisiert werden, was bedeutet, dass sie nicht so schnell auf Interaktionen reagieren wie Flagship-Tablets und Laptops.
In der folgenden Abbildung wird verglichen, wie lange das Laden einer Seite zwischen einem Laptop, dessen CPU in den Chrome-Entwicklertools um das Sechsfache verlangsamt wurde, und einem Smart-TV dauert. Wie man sieht, ist ein Laptop immer noch viel schneller als ein kürzlich hergestelltes Smart-TV.
Aus diesen Tests wurden Labdaten erwirtschaftet. Jetzt hat Disney+ Hotstar damit begonnen, Felddaten für Interaction to Next Paint (INP) von tatsächlichen Nutzern der App zu erheben, die die Web-Vitals-Bibliothek verwenden. Dabei wurde bei 75% der App-Nutzer ein INP von 675 Millisekunden beobachtet, was gemäß den INP-Grenzwerten als „schlecht“ eingestuft wird.
In dieser Fallstudie wird beschrieben, wie Disney+ Hotstar die Reaktionszeit in seinen Streaming-Apps verbessert hat, insbesondere auf Low-End-Geräten. Das Unternehmen konnte eine Verbesserung um 61% erzielen, indem die INP-Werte auf 272 Millisekunden gesenkt wurden. Das war immer noch über dem empfohlenen Grenzwert für „gut“ von 200 Millisekunden, aber eine erhebliche Verbesserung.
Die Ergebnisse
Disney+ Hotstar instrumentierte die App mit der onINP-Methode aus dem Zuordnungs-Build der Web-Vitals-Bibliothek. In der Anfangsphase gab es verschiedene Herausforderungen, insbesondere bei der Identifizierung des genauen Zielelements. Das Problem trat auf, weil alle Verweise auf den Textkörper aufgrund einer Drittanbieter-Bibliothek für die räumliche Navigation verwiesen wurden, die mit einigen Anpassungen in der Disney+ Hotstar App verwendet wurde. Diese Bibliothek überwacht ausschließlich Ereignisse im Textkörper des Dokuments und bestimmt dann das eigentliche Element im Fokus und sagt den nächsten Fokus basierend auf dem per Fernzugriff gedrückten Tastendruck voraus.
Disney+ Hotstar hat zuerst das Attributionsproblem gelöst, 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, was dem Interaktionsziel entspricht, das im Attributions-Build „Web-Vitals“ verfügbar ist.
focusKey wird zusammen mit dem Pfad zu dem Element erfasst, das es auslöst.
Bei entsprechender Messung und Attribution wurden mithilfe der Ergebnisse aus Felddaten die folgenden Interaktionen für INP am problematischsten:
- Horizontale Karussellnavigation.
- Vertikale Karussellnavigation.
- Interaktionen beim ersten Seitenaufbau.
Beim Erstellen eines Profils dieser Interaktionen mit dem Leistungssteuerfeld in den Chrome-Entwicklertools wurde festgestellt, dass die Bibliothek für die räumliche Navigation die Position aller fokussierbaren Elemente las und einen neuen Baum erstellt hat. Dies ist ein teurer Vorgang, bei dem bei jeder Interaktion, z. B. beim Wechsel von einem Element, zum anderen eine Überlastung des Layouts ausgelöst wird.
Für die Startseite wurde wie folgt von der Bibliothek für räumliche Navigation ein Baum generiert:
Wenn in der App also 10 Fächer mit 7 Karten angezeigt würden, gäbe es 70 fokussierbare Elemente, einschließlich der Navigationselemente. Dies ist eine hohe Anzahl interaktiver Elemente. Außerdem wurde eine Karussell-Bibliothek eines Drittanbieters verwendet, die die Abmessungen jeder Karte bei der horizontalen Navigation liest, um den Container zu übersetzen, was zu einer noch höheren Interaktionslatenz führt.
Beheben der Probleme
Es gab mehrere verschiedene Probleme, die alle separat angegangen werden mussten, um die Reaktionszeit der gesamten App zu lösen.
Verbesserungen bei der Navigation in der horizontalen Ablage
Disney+ Hotstar hat eine eigene Karussell-Bibliothek erstellt, die keine Layout-Überflutung durch zusammengesetzte Animationen hervorruft und die Abmessungen einmal pro Ablage statt einmal pro Karte liest.
Die räumliche Navigation konzentriert sich nur auf den Stamm des Karussells. Für die weitere horizontale Navigation kommt unser benutzerdefiniertes Karussell ins Bild. Mit diesem Ansatz entfernte Disney+ Hotstar die Abhängigkeit von der räumlichen Navigation und der alten Karussellbibliothek, die die Dimensionen bei jeder Navigation las.
So sah der Baum für die räumliche Navigation nach diesen Optimierungen aus.
Die folgenden Bilder zeigen einen Leistungsvergleich, der im Bereich „Leistung“ der Chrome-Entwicklertools vor und nach der Karussell-Implementierung gemessen wird.
Das Ergebnis: Disney+ Hotstar verzeichnete einen erheblichen Rückgang des INP-Werts für seine App. Außerdem konnten sie durch das Entfernen der Drittanbieterbibliothek etwa 35 KB einsparen (komprimiert). Darüber hinaus konnte Disney+ Hotstar durch diese Verbesserungen die Dauer seines benutzerdefinierten Messwerts reduzieren, der zum Messen der Gesamtrenderingzeit für die Startseite verwendet wird, da Layouts aufgrund der reduzierten räumlichen Navigationsknoten seltener ausgelöst werden.
Verbesserungen bei der Navigation in der vertikalen Ablage
Disney+ Hotstar verbesserte auch die Navigation in der vertikalen Ablage, indem die Fächer per Lazy Loading statt im Vordergrund geladen wurden. Beim Seitenaufbau lädt die App also nicht mehr 10 Instanzen der Ablage, die intern jeweils eine Karussell-Komponente und eine Reihe von Bildern hat, sondern nur die beiden Bereiche, die im Darstellungsbereich sichtbar sind, sowie eine zusätzliche Leiste darüber und darunter. Das Rendering wurde außerdem mithilfe der Ertragsgruppenstrategie setTimeout() in mehrere Aufgaben aufgeteilt, sodass der Hauptthread mehr Möglichkeiten für Nutzerinteraktionen hat.
Interaktionen beim ersten Seitenaufbau
Die INP wird für Apps hoch sein, die beim Start einer App eine große Anzahl von Skripts verarbeiten. Das liegt daran, dass der Browser diese Skripts herunterladen, parsen und auswerten muss. Der Hauptthread ist aber möglicherweise für einen längeren Zeitraum belegt und kann nicht schnell auf Nutzerinteraktionen reagieren.
Disney+ Hotstar stellte fest, dass mehr Skripts verarbeitet wurden, als beim Start der Anwendung (d. h. dem Ladebildschirm) tatsächlich nötig waren, damit Seiten zukünftig schneller geladen werden. Dadurch entstanden zusätzliche Aufgaben zur Skriptbewertung, die sich ebenfalls negativ auf die INP auswirken könnten.
Um dieses Problem zu beheben, hat Disney+ Hotstar in Betracht gezogen, die meisten Assets dynamisch zu laden, um beim App-Start Zeit zu sparen. Dies hätte jedoch die Ladezeiten für die Navigationen auf zukünftigen Seiten erhöht, da dieses JavaScript im Zuge dieser Änderung nicht mehr im Voraus geladen werden würde. Um dieses Problem zu lösen, hat Disney+ Hotstar eine interne Asset-Preloader-Bibliothek entwickelt, die festlegt, welche Seite im User Journey als Nächstes kommen könnte, und Assets für diese Seite vorab laden. Beispiel:
- Auf der Anmeldeseite werden über die Asset-Preloader-Bibliothek Assets für die Profilauswahlseite vorab geladen.
- Auf der Seite für die Profilauswahl werden die Startseiten-Assets geladen.
- Auf der Startseite werden die Assets der Detailseite geladen.
- Zum Schluss werden die Assets der Wiedergabeseite auf die Detailseite geladen.
Die Optimierung des Ladens von Assets half Disney+ Hotstar mit zwei Dingen: Der INP der App zu reduzieren, da der Hauptthread jetzt relativ kostenlos ist, um Nutzerinteraktionen auszuführen, und auch die Speichernutzung auf Low-Tier-Geräten reduzieren.
Diese Änderungen führten zu einer Senkung der gemeldeten INP-Zahl um 32 %, wie im folgenden Screenshot zu sehen ist.
Weitere Verbesserungen
Disney+ Hotstar fand auch heraus, dass es bei einigen Nutzerereignissen lange Aufgaben gab, die durch häufiges Weiterleiten an den Hauptthread aufgeteilt werden konnten. Er ging noch einen Schritt weiter und erstellte ein Dienstprogramm zur Aufgabenerstellung, mit dem Nutzer die Aufgabe während der Ausführung abbrechen können.
Wenn der Nutzer beispielsweise durch mehrere Karten im Kartenfach navigiert, geschieht Folgendes:
- Die nächste Karte ist hervorgehoben.
- Die Karte wird bei Bedarf übersetzt.
- Spotlight wurde aktualisiert.
- Der Trailer, sofern vorhanden, wird abgerufen und die Wiedergabe wird gestartet.
- Analytics-Ereignisse werden für die Aktion ausgelöst.
Wenn sich die Nutzenden während dieses Prozesses auf die nächste Karte konzentrieren, müssten die restlichen Schritte nicht ausgeführt werden. So sind beispielsweise das Abrufen eines Trailers und die Spielerinitialisierung für einen bestimmten Titel nicht mehr erforderlich, wenn der Nutzer zur nächsten Karte wechselt. Diese Aufgaben können daher abgebrochen werden, um den Hauptthread freizugeben.
Das Task-Generator-Dienstprogramm von Disney+ Hotstar akzeptiert eine Funktion, die eine Aufgabe ist. Wenn eine andere Aufgabe in der Mitte erscheint, wird die vorherige Aufgabe abgebrochen, wodurch wir die unnötige Aufgabenausführung sparen und die erforderliche Aufgabe schnell bearbeiten können.
Ergebnisse
Insgesamt ist die INP-Anwendung von Disney+ Hotstar von 675 Millisekunden auf 272 Millisekunden gesunken, was einer Verbesserung um fast 60 % entspricht. Außerdem sank die Latenzen für die Ablage-Interaktionslatenz von etwa 400 Millisekunden auf etwa 100 Millisekunden.
Auswirkungen auf das Unternehmen: Die wöchentlichen Infokartenaufrufe stiegen von 111 auf 226 pro Nutzer. Das ist eine Steigerung von 100 %, was zeigt, dass eine schnellere und reaktionsschnellere Benutzeroberfläche die Nutzer eher über einen längeren Zeitraum ansprechen lässt.
Das ist erst der Anfang. Anhand des INP-Messwerts hat Disney+ Hotstar nur noch an der Oberfläche zur Verbesserung der Rendering- und Interaktionsleistung gearbeitet. Das Team von Disney+ Hotstar freut sich schon darauf, den Kunden in naher Zukunft ein rundum angenehmes Erlebnis zu bieten.
Wir danken Ayush, Ajay, Kiran, Milan und Richa von Disney+ Hotstar für ihre Bemühungen, das Blatt zu wenden.
Wir danken Ankeet Maini, Engineering Head bei Disney+ Hotstar, und Rahul Krishnan P, Head of Customer Experience bei Disney+ Hotstar, für die Unterstützung dieser Innovationsarbeit sowie an Jeremy Wagner, Gilberto, Barry Pollard und Brendan Kenny von Google für die Überprüfung und Unterstützung bei der Veröffentlichung dieser Fallstudie.