Udoskonalenie interakcji z aplikacją Next Paint (INP) na telewizorach smart TV i dekoderach stanowi znacznie trudniejsze zadanie niż w przypadku przeglądarek na komputerach ze względu na ograniczenia w zakresie obsługi interfejsów API i niewielkie wymagania systemowe. To studium przypadku pokazuje, jak firma Disney+ Hotstar zdołała pokonać te przeszkody i w rezultacie uzyskać znaczne korzyści biznesowe.
Wraz ze wzrostem popularności urządzeń domowych firma Disney+ Hotstar zdała sobie sprawę, że zapewnienie bezproblemowego przeglądania treści w aplikacji na telewizory smart TV i dekodery są kluczowym wymaganiem biznesowym. W przypadku takich urządzeń trudniej jest jednak naprawić wartość INP, ponieważ każdy model telewizora może korzystać z bardzo starszych wersji przeglądarki, np. telewizor LG z 2020 r. korzysta z Chrome 68 wydanego w 2018 roku. Niektóre z tych urządzeń można zaliczyć do słabszych urządzeń, co oznacza, że nie reagują na interakcje tak szybko jak flagowe tablety czy laptopy.
Na rysunku poniżej porównano czas potrzebny na wczytanie strony w sytuacji, gdy procesor w laptopie 6 razy jest 6-krotnie spowolniony w Narzędziach deweloperskich w Chrome i na telewizorze smart TV. Jak widać, laptop jest nadal znacznie szybszy niż niedawno wyprodukowany telewizor smart TV.
Chociaż testy te dostarczają danych laboratoryjnych, Disney+ Hotstar zaczął zbierać dane dotyczące interakcji z kolejnym wyrenderowaniem (INP) od rzeczywistych użytkowników aplikacji przy użyciu biblioteki Web-vitals. Zaobserwowaliśmy, że u 75% użytkowników aplikacji wystąpiła w tym polu wartość INP wynosząca 675 milisekund, co według progów INP jest „słabe”.
To studium przypadku pokazuje, jak Disney+ Hotstar poprawiło responsywność w aplikacjach do odtwarzania strumieniowego, zwłaszcza na słabszych urządzeniach. Firma osiągnęła wzrost o 61% dzięki obniżeniu wartości INP do 272 milisekund – nadal powyżej zalecanego progu „dobrego” wynoszącego 200 milisekund, ale to jednak znaczny wzrost.
Wnioski
Zespół Disney+ Hotstar wprowadził do aplikacji metodę onINP z biblioteki Web-vitals. Na początku wystąpiły różne problemy, zwłaszcza przy określaniu dokładnego elementu docelowego. Problem pojawił się, ponieważ wszystkie odniesienia prowadziły do treści z powodu zewnętrznej biblioteki nawigacji przestrzennej, która była używana z pewnymi dostosowaniami w aplikacji Disney+ Hotstar. Biblioteka ta nasłuchuje wyłącznie zdarzeń z treści dokumentu, a następnie określa aktywny element i przewiduje następny fokus na podstawie zdalnych naciśnięć klawiszy.
Firma Disney+ Hotstar najpierw rozwiązała problem z atrybucją, aby umożliwić prawidłowe identyfikowanie interakcji odpowiedzialnych za wysokie wartości INP. W tym celu Disney+ Hotstar zarejestrował atrybut focusKey, który jest już obecny w bibliotece nawigacji przestrzennej dla aktualnie aktywnego elementu, a także mapę wszystkich elementów, które można zaznaczyć na stronie, co odpowiada celowi interakcji dostępnemu w ramach atrybucji Web-witals.
focusKey wraz ze ścieżką do elementu, który go uruchamia.
Po wprowadzeniu odpowiednich pomiarów i atrybucji wyniki z danych terenowych zgłosiły te interakcje jako najbardziej problematyczne dla INP:
- Nawigacja w poziomie w zasobniku karuzeli.
- Nawigacja w pionowym panelu karuzeli.
- Interakcje podczas początkowego wczytywania strony.
Po profilowaniu tych interakcji z panelem wydajności w Narzędziach deweloperskich w Chrome zauważono, że biblioteka nawigacji przestrzennej odczytuje położenie wszystkich elementów, które można zaznaczyć, i tworzy nowe drzewo. Jest to kosztowna operacja, która powoduje buforowanie układu przy każdej interakcji, np. przy przechodzeniu z jednego elementu do drugiego.
W przypadku strony głównej drzewo zostało wygenerowane przez bibliotekę nawigacji przestrzennej w następujący sposób:
Oznaczało to, że jeśli w aplikacji wyświetlało się 10 półek, a każdy z nich miał 7 kart, w jego kontenerze pojawiło się 70 elementów, które można zaznaczyć, w tym elementy nawigacyjne. To duża liczba elementów interaktywnych. Wykorzystano też zewnętrzną bibliotekę karuzeli, która odczytuje wymiary każdej karty podczas nawigacji poziomej w celu przetłumaczenia kontenera, co jeszcze bardziej zwiększa opóźnienie interakcji.
Rozwiązywanie problemów
Pojawiło się kilka różnych problemów, które trzeba rozwiązać osobno, aby rozwiązać problemy z czasem reagowania całej aplikacji.
Ulepszenia nawigacji w poziomym obszarze powiadomień
Firma Disney+ Hotstar stworzyła własną bibliotekę karuzeli, która nie powoduje przebijania układu dzięki skomponowanym animacjam i odczytywaniu wymiarów raz na tackę, a nie raz na kartę.
Nawigacja przestrzenna skupia się tylko na głównym elemencie karuzeli, a na potrzeby nawigacji poziomej pojawia się nasza niestandardowa karuzela. Dzięki takiemu podejściu Disney+ Hotstar eliminował zależność nawigacji przestrzennej od starej biblioteki obrotowej, która odczytuła wymiary przy każdym nawigowaniu.
Tak wygląda drzewo nawigacji przestrzennej po tych optymalizacji.
Poniższe obrazy przedstawiają porównanie wydajności zmierzone w panelu wydajności Narzędzi deweloperskich w Chrome przed wdrożeniem karuzeli i po niej.
W rezultacie firma Disney+ Hotstar odnotowała znaczny spadek INP swojej aplikacji. Dzięki usunięciu biblioteki zewnętrznej udało się też zaoszczędzić około 35 KB (po skompresowaniu). Dodatkowo dzięki tym ulepszeniom zespół Disney+ Hotstar skrócił czas trwania danych niestandardowych używanych do pomiaru całkowitego czasu renderowania strony głównej, ponieważ układy są uruchamiane rzadziej z powodu mniejszej liczby węzłów nawigacji przestrzennej.
Ulepszenia nawigacji w obszarze pionowym
Firma Disney+ Hotstar usprawniła też nawigację w pionie dzięki leniwemu ładowaniu paneli zamiast wczytywania ich wszystkich z góry. Podczas wczytywania strony zamiast 10 wystąpień tego obszaru, który wewnętrznie zawiera komponent karuzeli i kilka obrazów, aplikacja wczytuje tylko 2 sceny widoczne w widocznym obszarze oraz dodatkowy obszar nad i poniżej. Renderowanie zostało również podzielone na wiele zadań z wykorzystaniem strategii uzyskiwania zysku setTimeout(), aby wątek główny miał więcej możliwości obsługi interakcji użytkowników.
Interakcje podczas początkowego wczytywania strony
INP będzie wysoki w przypadku aplikacji, które podczas uruchamiania przetwarzają ogromną liczbę skryptów. Dzieje się tak, ponieważ przeglądarka musi je pobierać, analizować i oceniać. Mimo że to wszystko się dzieje, wątek główny może być zajmowany przez długi czas i nie będzie mógł szybko odpowiadać na interakcje użytkowników.
Firma Disney+ Hotstar zdała sobie sprawę, że podczas uruchamiania aplikacji przetwarza więcej skryptów niż potrzeba (czas wyświetlania ekranu powitalnego), aby przyspieszyć wczytywanie kolejnych stron. Wiązało się to z dodatkowymi zadaniami oceny skryptów, które także mogły negatywnie wpłynąć na wartość INP.
Aby rozwiązać ten problem, Disney+ Hotstar zastosowało dynamiczne wczytywanie większości zasobów, aby zaoszczędzić czas podczas uruchamiania aplikacji. Spowodowałoby to jednak wydłużenie czasu wczytywania przyszłych stron, ponieważ kod JavaScript nie byłby już ładowany z wyprzedzeniem wraz z tą zmianą. Aby rozwiązać ten problem, firma Disney+ Hotstar opracowała własną bibliotekę modułu wstępnego ładowania zasobów, która określa, która strona może pojawić się na ścieżce użytkownika, i wstępnie wczytuje zasoby. Na przykład:
- Gdy użytkownik jest na stronie logowania, biblioteka modułu wstępnego ładowania zasobów wczytuje zasoby na stronie wyboru profilu.
- Na stronie wyboru profilu wczytywane są zasoby strony głównej.
- Zasoby strony z informacjami są wczytywane na stronie głównej.
- Na koniec zasoby strony odtwarzania filmu są wczytywane na stronie z informacjami.
Zoptymalizowanie wczytywania zasobów pomogło Disney+ Hotstar osiągnąć 2 rzeczy: zmniejszyć wartość INP aplikacji (ponieważ wątek główny był teraz stosunkowo swobodny do wykonywania interakcji z użytkownikami), a także zmniejszyć wykorzystanie pamięci na słabszych urządzeniach.
Te zmiany spowodowały o 32% spadek wartości INP podawanej w tym polu, co widać na zrzucie ekranu poniżej.
Inne usprawnienia
Firma Disney+ Hotstar zauważyła też, że w przypadku kilku zdarzeń użytkownika wykonuje się długie zadania, które można dzielić przez częstotliwość ich otwierania w wątku głównym. Posunęliśmy się więc dalej i utworzyliśmy narzędzie generatora zadań, które umożliwia anulowanie zadania w trakcie jego wykonywania.
Jeśli na przykład użytkownik przejdzie między wieloma kartami w tym obszarze, dzieją się następujące rzeczy:
- Zaznaczona jest następna karta.
- (jeśli trzeba, karta została przetłumaczona).
- Wyróżnione zostały zaktualizowane.
- Jeśli zwiastun jest dostępny, zostanie pobrany i rozpocznie się odtwarzanie.
- Dla tego działania wywoływane są zdarzenia Analytics.
Jeśli w trakcie tego procesu użytkownik będzie skupić się na następnej karcie, nie będzie trzeba wykonywać pozostałych kroków. Na przykład pobieranie zwiastuna czy inicjowanie gracza nie jest już potrzebne, jeśli użytkownik przejdzie do następnej karty. Z tego względu zadania te można przerwać, aby zwolnić wątek główny.
Generator zadań Disney+ Hotstar akceptuje funkcję, która jest zadaniem, a gdy w jego środku pojawia się inne zadanie, poprzednie zadanie jest przerywane, co pozwala nam szybko wykonać niezbędne zadanie.
Wyniki
Ogólnie wartość INP aplikacji Disney+ Hotstar spadła z 675 milisekund do 272 milisekund, co oznacza wzrost o prawie 60%. Dodatkowo czas oczekiwania na interakcję w obszarze powiadomień zmniejszył się z około 400 milisekund do około 100 milisekund.
Wpływ na firmę: tygodniowa liczba wyświetleń kart wzrosła ze 111 do 226 na użytkownika. Jest to wzrost o 100%, co świadczy o tym, że szybszy i bardziej responsywny interfejs skuteczniej angażuje użytkowników na dłuższy czas.
To dopiero początek. Firma Disney+ Hotstar poprawiła wydajność renderowania i interakcji tylko z uwzględnieniem wskaźników INP, a ich zespół z radością chce sprawić, by w najbliższej przyszłości Disney+ Hotstar było wygodne dla klientów.
Dziękujemy Ayushowi, Ajayowi, Kiranowi, Milanowi i Richi z kanału Disney+ Hotstar za ich starania, aby odwrócić sytuację.
Specjalne podziękowania dla Ankeet Maini, dyrektora ds. technicznych Disney+ Hotstar, i Rahula Krishnana P, dyrektora ds. obsługi klienta Disney+ Hotstar, oraz Jeremy'ego Wagnera, Gilberto, Barry'ego Pollarda i Brendana Kenny'ego z Google za zapoznanie się z tym studium przypadku i pomoc w jego opublikowaniu.