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 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.
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.
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.
Aby zoptymalizować FCP i LCP, zespół YouTube przeprowadził kilka eksperymentów, w wyniku których udało się odkryć 2 ważne rozwiązania.
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.
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.
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.
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.
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.
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.