Przypadkowa analiza zmian wprowadzonych przez zespół webowy YouTube w celu poprawy wydajności, zwiększenia liczby przypadków, w których spełnione są podstawowe wskaźniki internetowe, i podniesienia wartości kluczowych danych biznesowych.
Zespół Chrome często mówi o „tworzeniu lepszego internetu”, ale co to właściwie oznacza? Wrażenia z korzystania z internetu powinny być szybkie, dostępne i wykorzystywać możliwości urządzenia w chwili, gdy użytkownicy najbardziej ich potrzebują. Testy wewnętrzne są częścią kultury Google, dlatego zespół Chrome nawiązał współpracę z YouTube, aby podzielić się doświadczeniami zdobytymi w ramach nowej serii zatytułowanej „Tworzenie lepszej sieci”. Pierwsza część serii pokaże, jak YouTube stworzył szybsze przeglądanie stron internetowych.
W YouTube wydajność odnosi się do szybkości wczytywania filmów i innych treści, takich jak rekomendacje i komentarze, na stronach internetowych. Skuteczność jest też mierzona na podstawie tego, jak szybko YouTube reaguje na interakcje użytkowników, takie jak wyszukiwanie, sterowanie odtwarzaczem, polubienia i udostępnienia.
Rosnące rynki wschodzące, takie jak Brazylia, Indie i Indonezja, są ważne dla YouTube w przeglądarce mobilnej. Ponieważ wielu użytkowników w tych regionach ma wolniejsze urządzenia i ograniczoną przepustowość sieci, kluczowym celem jest zapewnienie szybkiego i płynnego działania.
Aby zapewnić wszystkim użytkownikom integrację społeczną, YouTube zwiększył dane o skuteczności, takie jak podstawowe wskaźniki internetowe, przez leniwe ładowanie i modernizację kodu.
Poprawianie podstawowych wskaźników internetowych
Aby określić obszary, które wymagają poprawy, zespół YouTube korzystał z raportu na temat użytkowania Chrome (CrUX), aby sprawdzić, jak użytkownicy korzystają z funkcji oglądania filmów i wyników wyszukiwania na urządzeniach mobilnych w warunkach rzeczywistych. Zorientowali się, że ich podstawowe wskaźniki internetowe mają duży potencjał do poprawy, a w przypadku wyrenderowania największej części treści (LCP) w niektórych przypadkach wynosił on 4–6 sekund. Było to znacznie więcej niż zakładane 2,5 sekundy.
Aby zidentyfikować obszary wymagające poprawy, firma Lighthouse przeprowadziła audyt stron odtwarzania filmów w YouTube i stwierdziła, że wskaźnik Lighthouse (lab) wyniósł niski wynik z pierwszego wyrenderowania treści (FCP) wynoszący 3,5 sekundy i LCP na poziomie 8,5 sekundy.
Aby zoptymalizować FCP i LCP, zespół YouTube przeprowadził kilka eksperymentów, w wyniku których udało się uzyskać dwa ważne odkrycia.
Po pierwsze odkryliśmy, że można zwiększyć wydajność, przenosząc kod HTML odtwarzacza wideo nad skryptem, który powoduje interaktywność odtwarzacza. Testy laboratoryjne wykazały, że dzięki temu można skrócić czas FCP i LCP z 4,4 sekund do 1,1 sekund.
Po drugie, odkryliśmy, że LCP uwzględnia tylko obrazy plakatów z elementu
<video>, a nie klatki ze strumienia wideo. YouTube tradycyjnie optymalizował czas oczekiwania na rozpoczęcie odtwarzania filmu, więc aby poprawić LCP, zespół zaczął też optymalizować szybkość dostarczania obrazu plakatu. Poeksperymentowali z kilkoma wariantami plakatów i wybrali ten, który uzyskał najlepszy wynik w testach z udziałem użytkowników. W efekcie tych prac odnotowano znaczną poprawę zarówno FCP, jak i LCP, a wskaźnik LCP pola wzrósł z 4,6 sekundy do 2,0 sekundy.
Chociaż te optymalizacje poprawiły LCP, zespół uznał, że obecna definicja tego wskaźnika nie odzwierciedla w pełni, z perspektywy użytkownika, momentu załadowania „głównej zawartości” strony, co jest celem LCP.
Aby rozwiązać te problemy, członkowie zespołu YouTube współpracowali z zespołem Chrome nad sposobami ulepszenia wskaźnika LCP, aby spełniał ich potrzeby. Po rozważeniu wykonalności i wpływu kilku opcji, zespoły skorzystały z propozycji, aby określić czas wyrenderowania pierwszej klatki elementu wideo za kandydata do LCP.
Gdy ta zmiana zostanie wprowadzona w Chrome, zespół YouTube będzie mógł kontynuować optymalizację pod kątem LCP. Zaktualizowana wersja tego rodzaju danych sprawi, że optymalizacje będą miały większy wpływ na wrażenia użytkowników.
Modułowe tworzenie za pomocą leniwego ładowania
Strony YouTube zawierały wiele modułów, które szybko się wczytywały. Aby zoptymalizować sposób renderowania ponad 50 komponentów, zespół stworzył mapę komponentów do mapy modułów JS, która informuje klienta, które moduły należy wczytać. Oznaczenie komponentów jako „leniwe” powoduje, że moduły JS wczytują się później, co skraca początkowy czas wczytywania strony i ilość nieużywanego kodu JavaScript wysyłanego do klienta.
Jednak po wdrożeniu leniwego ładowania zespół zauważył efekt kaskadowy, w którym komponenty wczytywane leniwie i ich zależności wczytywały się w nieoptymalnym czasie.
Aby rozwiązać ten problem, zespół określił minimalny zestaw komponentów potrzebnych w widoku i zbiorczo przesłał je w jednym żądaniu sieciowym. W efekcie udało się zwiększyć szybkość wczytywania stron, skrócić czas analizowania kodu JavaScript i ostatecznie skrócić czas początkowego renderowania.
Zarządzanie stanem w różnych komponentach
W YouTube wystąpiły problemy z wydajnością związane z elementami sterującymi odtwarzaczem, zwłaszcza na starszych urządzeniach. Analiza kodu wykazała, że odtwarzacz, który umożliwia użytkownikom kontrolowanie takich funkcji jak prędkość odtwarzania i postęp, z czasem stał się zbyt złożony.
Każde zdarzenie przesunięcia dotykiem na pasku postępu uruchamiało 2 dodatkowe obliczenia stylu i zajęło 21,17 ms podczas testów wydajności w laboratorium. W miarę dodawania nowych elementów sterujących schemat zdecentralizowanej kontroli często powodowało powtarzające się zależności i wycieki pamięci, co negatywnie wpływało na wydajność strony odtwarzania filmu.
Aby rozwiązać problemy związane z decentralizacją kontroli, zespół zaktualizował interfejs użytkownika odtwarzacza, aby zsynchronizować wszystkie aktualizacje. W podstawie przekształcono odtwarzacz w jeden element najwyższego poziomu, który przekazuje dane elementom podrzędnym. Dzięki temu dla każdej zmiany stanu dostępny był tylko 1 cykl aktualizacji interfejsu (renderowanie), co wyeliminowało łańcuchowe aktualizacje. Nowe zdarzenie dotykania i przesuwania paska postępu odtwarzacza nie wymaga ponownego obliczania stylów podczas wykonywania kodu JavaScriptu i wymaga teraz tylko 25% czasu potrzebnego w przypadku starego odtwarzacza.
Ta modernizacja kodu przyniosła też dodatkowe ulepszenia w zakresie wydajności, np. skrócony czas wczytywania na starszych urządzeniach, mniejszą liczbę porzuconych odtworzeń i mniejszą liczbę błędów niekrytycznych.
Wyniki i optymalizacje
Dzięki inwestycjom YouTube w wydajność strony odtwarzania wczytują się znacznie szybciej, a 76% adresów URL witryn mobilnych YouTube spełnia obecnie progi podstawowych wskaźników internetowych. Na komputerach LCP na stronie filmu skrócono z około 4,6 sekundy do 1,6 sekundy. Interakcje i wydajność renderowania witryny, zwłaszcza w odtwarzaczu filmów w YouTube, są o dodatkowe 75% szybsze niż wcześniej.
W ciągu ostatniego roku udało nam się poprawić wydajność wersji internetowej YouTube, co przełożyło się na lepsze dane biznesowe, w tym czas oglądania i liczbę aktywnych użytkowników dziennie. W związku z sukcesem tych działań planujemy w przyszłości jeszcze bardziej udoskonalić optymalizację.
Specjalne podziękowania dla Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra oraz zespołów YouTube i Chrome za ich wkład w realizację tego projektu.