Poprawa czasu od interakcji do kolejnego wyrenderowania (INP) na telewizorach smart TV i urządzeniach set-top box wiąże się z większymi wyzwaniami niż w przypadku przeglądarek na komputery, ze względu na ograniczenia związane z ograniczonym wsparciem interfejsu API i skromnymi specyfikacjami systemowymi. Z tego studium przypadku dowiesz się, jak Disney+ Hotstar skutecznie pokonał te przeszkody i w efekcie osiągnął znaczące korzyści biznesowe.
W związku z rosnącym zainteresowaniem urządzeniami do użytku domowego Disney+ Hotstar uznał, że bezproblemowe przeglądanie w aplikacji na telewizory i dekodery jest kluczowym wymogiem biznesowym. Utrudnia to naprawianie INP na takich urządzeniach, ponieważ każdy model telewizora może używać bardzo starych wersji przeglądarki. Na przykład telewizor LG z 2020 r. korzysta z Chrome 68 wydanej w 2018 r. Niektóre z nich mogą być też zaliczane do urządzeń niskiej klasy, co oznacza, że nie reagują na interakcje tak szybko jak flagowe tablety i laptopy.
Na poniższym rysunku porównano czas wczytywania strony na laptopie z procesorem spowolnionym 6-krotnie w Narzędziach deweloperskich w Chrome i na telewizorze smart TV. Jak widać, laptop jest nadal znacznie szybszy niż niedawno wyprodukowany telewizor smart TV.
Te testy dostarczają danych z laboratorium, ale Disney+ Hotstar zaczął też zbierać dane z pola dotyczące czasu od interakcji do wyświetlenia treści (INP) od rzeczywistych użytkowników aplikacji za pomocą biblioteki web-vitals. Okazało się, że 75% użytkowników aplikacji miało czas INP wynoszący 675 ms, co według progresji INP jest uważane za „słabe” wrażenia użytkownika.
To studium przypadku pokazuje, jak Disney+ Hotstar poprawił szybkość działania swoich aplikacji do strumieniowego przesyłania danych, zwłaszcza na mniej zaawansowanych urządzeniach. Uzyskali 61% poprawy, zmniejszając wartość INP do 272 milisekund. Nadal jest to wartość powyżej zalecanego progu 200 milisekund, ale jest to znaczna poprawa.
Wyniki
Disney+ Hotstar zinstrumentował aplikację za pomocą metody onINP z wersji atrybucji biblioteki web-vitals. W pierwszej fazie napotykaliśmy różne problemy, zwłaszcza związane z określaniem dokładnego elementu docelowego. Problem powstał, ponieważ wszystkie odwołania wskazywały na treść ze względu na bibliotekę nawigacji przestrzennej innej firmy, która została użyta z niektórymi dostosowaniami w aplikacji Disney+ Hotstar. Ta biblioteka nasłuchuje tylko zdarzeń w ciele dokumentu, a następnie określa rzeczywisty element skupienia i przewiduje następne skupienie na podstawie naciśnięć przycisków na pilocie.
Disney+ Hotstar zaczął od rozwiązania problemu atrybucji, aby prawidłowo identyfikować interakcje odpowiedzialne za wysokie wartości INP. W tym celu Disney+ Hotstar zarejestrował atrybut focusKey, który jest już obecny w bibliotece nawigacji przestrzennej dla aktualnie skupionego elementu, a także mapę wszystkich elementów, na których można skupić uwagę na stronie, która jest analogiczna do celu interakcji dostępnego w wersji atrybucji web-vitals.
focusKey wraz ze ścieżką do elementu, który ją wywołał.
Teraz, gdy mamy już odpowiednie pomiary i atrybucję, dane z polowych kampanii wskazują, że te interakcje są najbardziej problematyczne dla INP:
- Nawigacja w poziomie w karuzelce.
- Nawigacja w poziomym menu karuzeli.
- Interakcje podczas wstępnego wczytywania strony.
Po przeprowadzeniu profilowania tych interakcji za pomocą panelu wydajności w Narzędziach dla deweloperów Chrome okazało się, że biblioteka nawigacji przestrzennej odczytuje pozycję wszystkich elementów, na których można ustawić fokus, i utworzy nowe drzewo. Jest to kosztowna operacja, która powoduje zmianę układu przy każdej interakcji, np. podczas przechodzenia od jednego elementu do drugiego.
W przypadku strony głównej biblioteka nawigacji przestrzennej wygenerowała drzewo w ten sposób:
Oznacza to, że jeśli aplikacja wyświetla 10 pojemników, a każdy z nich zawiera 7 kart, to w pojemniku będzie 70 elementów, na których można się skupić, w tym elementy nawigacyjne. To duża liczba elementów interaktywnych. Użyliśmy też biblioteki karuzeli innej firmy, która odczytuje wymiary każdej karty podczas nawigacji poziomej, aby przetłumaczyć kontener, co jeszcze bardziej wydłuży czas oczekiwania na interakcję.
Rozwiązywanie problemów
Aby rozwiązać problemy z szybkością działania całej aplikacji, trzeba było rozwiązać kilka różnych problemów.
Ulepszenia nawigacji w poziomym zasobniku
Disney+ Hotstar stworzył własną bibliotekę karuzeli, która nie powoduje częstych zmian układu, ponieważ używa animacji złożonych i odczytuje wymiary raz na każdą tacę, a nie raz na każdą kartę.
Nawigacja przestrzenna skupia się tylko na korzeniach karuzeli, a do dalszej nawigacji poziomej służy nasza niestandardowa karuzela. Dzięki temu podejściu Disney+ Hotstar usunął zależność od nawigacji przestrzennej i starej biblioteki karuzeli, która odczytywała wymiary w każdej nawigacji.
Oto jak wyglądało drzewo nawigacji przestrzennej po tych optymalizacjach.
Na poniższych obrazach widać porównanie skuteczności mierzonej w panelu skuteczności w Narzędziach deweloperskich w Chrome przed i po implementacji karuzeli.
W rezultacie tych działań Disney+ Hotstar odnotował znaczne zmniejszenie INP aplikacji w tym obszarze. Dzięki usunięciu biblioteki zewnętrznej udało im się też zaoszczędzić około 35 KB (skompresowane). Dodatkowo te ulepszenia pozwoliły Disney+ Hotstar skrócić czas trwania danych niestandardowych, których firma używa do pomiaru łącznego czasu renderowania strony głównej, ponieważ układy są uruchamiane rzadziej ze względu na zmniejszenie liczby węzłów nawigacji przestrzennej.
Ulepszenia nawigacji w menu bocznym
Disney+ Hotstar poprawił też wydajność nawigacji w pionie, stosując ładowanie opóźnione zamiast ładowania wszystkich elementów z góry. Dlatego podczas wczytywania strony zamiast wczytywać 10 kopii tacy, z których każda ma wewnętrznie komponent karuzeli i kilka obrazów, aplikacja wczytuje tylko 2 tacę widoczne w widoku portu oraz dodatkową tacę u góry i u dołu. Renderowanie zostało podzielone na wiele zadań za pomocą strategii wydajności setTimeout(), aby wątek główny miał więcej możliwości obsługi interakcji z użytkownikiem.
Interakcje podczas początkowego wczytywania strony
W przypadku aplikacji, które podczas uruchamiania przetwarzają ogromną liczbę skryptów, INP będzie wysoki. Wynika to z tego, że przeglądarka musi pobrać, przeanalizować i przetworzyć te skrypty. Podczas tego wszystkiego wątek główny może być zajęty przez długi czas i nie może szybko reagować na interakcje użytkownika.
Disney+ Hotstar dostrzegł, że podczas uruchamiania aplikacji (czas ekranu powitalnego) przetwarza więcej skryptów niż było to konieczne, aby przyspieszyć wczytywanie kolejnych stron. Wymagało to wykonania dodatkowych zadań związanych z weryfikacją skryptu, które również mogły negatywnie wpłynąć na INP.
Aby rozwiązać ten problem, Disney+ Hotstar rozważał dynamiczne wczytywanie większości komponentów, aby zaoszczędzić czas podczas uruchamiania aplikacji. Jednak spowodowałoby to wydłużenie czasu wczytywania stron, do których użytkownicy będą przechodzić w przyszłości, ponieważ kod JavaScript nie będzie już wczytywany z wyprzedzeniem. Aby rozwiązać ten problem, firma Disney+ Hotstar opracowała własną bibliotekę wstępnego ładowania zasobów, która określa, która strona może pojawić się jako następna w trakcie podróży użytkownika, i wstępnie ładuje zasoby tej strony. Na przykład:
- Gdy użytkownik wejdzie na stronę logowania, biblioteka wstępnego ładowania zasobów przeładuje zasoby na potrzeby strony wyboru profilu.
- Na stronie wyboru profilu wczytywane są komponenty strony głównej.
- Na stronie głównej wczytują się zasoby strony z informacjami.
- Na koniec na stronie z informacjami wczytywane są zasoby strony odtwarzania.
Optymalizacja ładowania zasobów pomogła Disney+ Hotstar w 2 sposobach: zmniejszyła INP aplikacji (ponieważ główny wątek był teraz stosunkowo wolny do wykonywania interakcji z użytkownikiem) oraz zmniejszyła wykorzystanie pamięci na urządzeniach niskiego poziomu.
Te zmiany spowodowały spadek o 32% liczby zgłoszonych numerów INP w tym polu, co widać na poniższym zrzucie ekranu.
Inne usprawnienia
Disney+ Hotstar odkrył też, że w przypadku kilku zdarzeń użytkownika występują długie zadania, które można podzielić, często przekazując je do głównego wątku. Usługa poszła o jeden krok dalej i utworzyła narzędzie do generowania zadań, które pozwoli użytkownikom anulować zadanie w trakcie jego wykonywania.
Jeśli na przykład użytkownik przewija karty na liście, dzieją się następujące rzeczy:
- Następna karta jest aktywna.
- W razie potrzeby karta jest tłumaczona.
- Wyróżnienie zostało zaktualizowane.
- Pobierany jest zwiastun (jeśli występuje) i inicjowane jest odtwarzanie.
- W przypadku działania są wywoływane zdarzenia Analytics.
Jeśli w trakcie tego procesu użytkownik skupi się na następnej karcie, nie będzie musiał wykonywać pozostałych czynności. Na przykład pobieranie zwiastuna i inicjowanie odtwarzacza w przypadku danego tytułu nie będzie już potrzebne, jeśli użytkownik przejdzie do następnej karty. Dlatego te zadania można przerwać, aby zwolnić wątek główny.
Narzędzie do generowania zadań Disney+ Hotstar akceptuje funkcję, która jest zadaniem, a gdy w połowie pojawia się inne zadanie, poprzednie zadanie jest anulowane, co pozwala zaoszczędzić czas na niepotrzebne wykonywanie zadań i szybko wykonać zadanie niezbędne.
Wyniki
Ogólnie rzecz biorąc, INP aplikacji Disney+ Hotstar spadł z 675 milisekund do 272 milisekund, co oznacza o prawie 60% lepszą wydajność. Ponadto czas reakcji na interakcje z paskiem zmniejszył się z około 400 milisekund do około 100 milisekund.
Wpływ na działalność firmy: tygodniowa liczba wyświetleń karty wzrosła z 111 na 226 na użytkownika. To wzrost o 100%, co pokazuje, że szybszy i bardziej responsywny interfejs łatwiej przyciąga uwagę użytkowników na dłuższy czas.
To dopiero początek. Disney+ Hotstar dopiero zaczyna wykorzystywać dane INP do poprawy wydajności renderowania i interakcji. Zespół Disney+ Hotstar z niecierpliwością czeka na możliwość zaoferowania klientom Disney+ Hotstar w najbliższej przyszłości jeszcze płynniejszego korzystania z usługi.
Dziękujemy Ayush, Ajay, Kiran, Milan i Richa z Disney+ Hotstar za ich wysiłki, które doprowadziły do rozwiązania problemu.
Specjalne podziękowania dla Ankeeta Mainiego, szefa działu inżynieryjnego w Disney+ Hotstar, i Rahula Krishnana P, szefa działu obsługi klienta w Disney+ Hotstar, za wsparcie w tym zakresie innowacji oraz dla Jeremy’ego Wagnera, Gilberto, Barry’ego Pollarda i Brendana Kenny’ego z Google za sprawdzenie i pomoc w publikowaniu tego przypadku.