Jak stworzyć lepszy internet: szybszy YouTube

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.

Sriram Krishnan
Sriram Krishnan

Zespół Chrome często mówi o „tworzeniu lepszego internetu”, ale co to 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ą. Dogfooding jest częścią kultury Google, dlatego zespół Chrome nawiązał współpracę z YouTube, aby podzielić się tym, czego nauczył się w trakcie pracy nad projektem, w nowej serii „Budowanie lepszej sieci”. Pierwsza część serii pokaże, jak YouTube stworzył szybsze przeglądanie stron internetowych.

Narzędzie PageSpeed Insights wyświetlające dane z Raportu na temat użytkowania Chrome.
Stronę odtwarzania w YouTube na urządzenia mobilne, która spełnia progi podstawowych wskaźników 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 wrażenia bez barier, wprowadziliśmy m.in. ładowanie opóźnione i modernizację kodu, co pozwoliło nam poprawić dane dotyczące wydajności, takie jak podstawowe wskaźniki internetowe.

Poprawianie podstawowych wskaźników internetowych

Aby określić obszary wymagające 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 ich przypadku wartość największego wyrenderowania treści (LCP) wynosiła w niektórych przypadkach 4–6 sekund. Było to znacznie więcej niż zakładane 2,5 sekundy.

Wykresy FCP i LCP przedstawiające współczynniki przejścia na stronie odtwarzania filmu w YouTube oraz pochodzenie z YouTube.

Aby zidentyfikować obszary wymagające poprawy, zespół skorzystał z narzędzia Lighthouse do przeprowadzania audytu stron odtwarzania filmów w YouTube. Okazało się, że Lighthouse (lab) uzyskał niski wynik, a pierwsze wyrenderowanie treści (FCP) trwało 3,5 sekundy, a LCP – 8,5 sekundy.

Raport Lighthouse dotyczący YouTube na urządzeniach mobilnych.
Chrome określa jako złoty standard czas 1,8 s dla FCP i 2,5 s dla LCP. FCP i LCP były wyraźnie żółte i czerwone odpowiednio w 3,5 s i 8,5 s.

Aby zoptymalizować FCP i LCP, zespół YouTube przeprowadził kilka eksperymentów, w wyniku których udało się odkryć 2 ważne rozwiązania.

  1. Po pierwsze odkryli, że mogą 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.

  2. Drugim odkryciem było to, że LCP uwzględnia tylko <video> obrazy plakatów elementów, a nie klatki z samego 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 wyniku tych działań zarówno FCP, jak i LCP znacznie się poprawiły, a LCP w warunkach rzeczywistych skrócił się z 4,6 sekundy do 2,0 sekundy.

Eksperyment dotyczący LCP na stronie na urządzenia mobilne, w którym widać grupę kontrolną, eksperyment A (miniaturę obrazu) i eksperyment B (czarną miniaturę)
Po wprowadzeniu tej zmiany w laboratorium zaobserwowaliśmy poprawę wartości FCP i LCP z 4,4 s na 1,1 s. Eksperyment A: używanie miniatury filmu sprawdza się na stronach, na których film zaczyna się w trybie wstrzymanym, ale w przypadku stron z automatycznym odtwarzaniem filmu, takich jak strona odtwarzania, nie przynosi dobrych wyników w badaniach użytkowników. Spowodowało to też spadek liczby aktywnych użytkowników. Eksperyment B: w badaniach dotyczących użytkowników najlepszy wynik uzyskano przy użyciu czarnego plakatu. Użytkownicy uznali, że przejście z całkowicie czarnego obrazu na pierwszy kadr filmu jest mniej rażące w przypadku filmów automatycznie odtwarzanych.
W lipcu 2021 r. czarna miniatura została wdrożona w wersji produkcyjnej dla wszystkich użytkowników witryny mobilnej, co zaowocowało wyraźną poprawą wartości FCP i LCP, jak widać w powyżej przedstawionej analizie RUM.
Czarny miniatura została wdrożona w wersji produkcyjnej dla wszystkich użytkowników witryny mobilnej w lipcu 2021 r., co spowodowało wyraźną poprawę wartości FCP i LCP, jak widać w powyżej przedstawionej analizie RUM.

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 przeanalizowaniu wykonalności i wpływu kilku opcji zespoły doszły do propozycji, aby uznać czas renderowania 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.

Modularyzacja z leniwym ładowaniem

Strony YouTube zawierały wiele modułów, które były wczytywane z zapasu. 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 ładowane leniwie i ich zależności były ładowane 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 strony, skrócić czas analizowania kodu JavaScript i ostatecznie skrócić czas początkowego renderowania.

Zarządzanie stanem w poszczególnych 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.

wizualizacja odtwarzacza i elementów sterujących w YouTube;
Odtwarzacz filmów w YouTube umożliwia użytkownikom sterowanie szybkością odtwarzania, sprawdzanie postępu, pomijanie sekcji i inne funkcje. Gdy użytkownik kliknie dany element sterujący, zmiana stanu musi zostać przekazana innym elementom sterującym. Na przykład kliknięcie przez użytkownika paska postępu musi zostać przekazane elementom takim jak głowica odtwarzania, napisy itp.

Każde zdarzenie dotknięcia i przesunięcia paska postępu powodowało 2 dodatkowe obliczenia stylu i zajmowało 21,17 ms podczas testów wydajności w laboratorium. W miarę dodawania z czasem nowych elementów sterujących wzorce zdecentralizowanego sterowania często powodowały pętle zależności i wycieki pamięci, co negatywnie wpływało na wydajność strony z filmem.

Zdarzenie o długości 21,17 ms wyświetlane na osi czasu dotyczącej wydajności.
Narzędzia deweloperskie w Chrome z 4-krotnym spowolnieniem procesora.

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 w przypadku każdej zmiany stanu występuje tylko 1 cykl aktualizacji (renderowania) interfejsu użytkownika, co eliminuje ł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.

Skrócenie czasu trwania zdarzeń wyświetlanych na osi czasu wydajności.

Ta modernizacja kodu spowodowała też dodatkowe zwiększenie wydajności, na przykład skrócenie czasu wczytywania na starszych urządzeniach, zmniejszenie liczby porzucanych odtwarzań i zmniejszenie liczby błędów niekrytycznych.

Wyniki i optymalizacje

Dzięki inwestycjom YouTube w wydajność strony z filmami wczytują się znacznie szybciej. Obecnie 76% adresów URL witryn mobilnych YouTube spełnia progi podstawowych wskaźników internetowych. Na komputerach wskaźnik LCP na stronie filmu został skrócony z około 4,6 sekundy do 1,6 sekundy. Interakcja i wydajność renderowania witryny, zwłaszcza w odtwarzaczu filmów w YouTube, są o do 75% szybsze niż wcześniej.

W ciągu ostatniego roku wprowadziliśmy ulepszenia w zakresie wydajności wersji internetowej YouTube, które wpłynęły również na 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 zbadać jeszcze więcej sposobów optymalizacji.

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.