Studium przypadku dotyczące zmian wprowadzonych przez zespół YouTube w celu poprawy skuteczności, zwiększenia współczynnika zaliczonych podstawowych wskaźników internetowych oraz poprawy kluczowych wskaźników biznesowych.
Zespół Chrome często mówi o „tworzeniu lepszejinternetu”, ale co to znaczy? Usługi internetowe powinny być szybkie i dostępne oraz wykorzystywać możliwości urządzeń wtedy, gdy najbardziej ich potrzebują. Testy wewnętrzne są częścią kultury Google, dlatego zespół Chrome nawiązał współpracę z YouTube, aby podzielić się zdobytą wiedzą w nowej serii pod tytułem „Tworzenie lepszej sieci”. W pierwszej części serii omówimy, jak YouTube zbudował szybsze działanie stron internetowych.
Szybszy internet
W YouTube wydajność odnosi się do tego, jak szybko filmy i inne treści – takie jak rekomendacje i komentarze – wczytują się na stronach internetowych. Skuteczność mierzona jest również na podstawie tego, jak szybko YouTube reaguje na interakcje użytkowników, takie jak wyszukiwanie, sterowanie odtwarzaczem, polubienie i udostępnienia.
Rozwijające się rynki rozwijające się, takie jak Brazylia, Indie i Indonezja, są ważne dla korzystania z internetu mobilnego w YouTube. Wielu użytkowników w tych regionach ma wolniejsze urządzenia i ograniczoną przepustowość sieci, więc zapewnienie szybkiego i bezproblemowego działania jest kluczowym celem.
Aby zapewnić wszystkim użytkownikom integrację społeczną, zespół YouTube postanowił poprawić dane dotyczące wydajności, takie jak podstawowe wskaźniki internetowe, poprzez leniwe ładowanie i modernizację kodu.
Poprawa podstawowych wskaźników internetowych
Aby zidentyfikować obszary wymagające poprawy, zespół YouTube skorzystał z Raportu na temat użytkowania Chrome (CrUX), aby sprawdzić w polu, jak prawdziwi użytkownicy oglądają filmy i strony wyników wyszukiwania na urządzeniach mobilnych. Zdali sobie sprawę, że w przypadku podstawowych wskaźników internetowych można znacznie poprawić wyniki. W niektórych przypadkach dane dotyczące największego wyrenderowania treści (LCP) utrzymują się w ciągu 4–6 sekund. Było to znacznie powyżej założonego celu (2,5 sekundy).
Aby zidentyfikować obszary wymagające poprawy, zespół Lighthouse sprawdził strony odtwarzania filmów w YouTube i odkrył niski wynik z Lighthouse (lab) przy pierwszym wyrenderowaniu treści (First Contentful Paint, FCP) wynoszący 3,5 sekundy i LCP wynoszący 8,5 sekundy.
Aby zoptymalizować FCP i LCP, zespół YouTube przeprowadził kilka eksperymentów, czego efektem było 2 ważne odkrycia.
Początkowo firma odkryła, że może poprawić skuteczność, przenosząc kod HTML odtwarzacza wideo nad skrypt, dzięki czemu odtwarzacz wideo jest interaktywny. Testy laboratoryjne wykazały, że może to poprawić zarówno FCP, jak i LCP z 4,4 sekundy do 1,1 sekundy.
Po drugie, LCP uwzględnia tylko
<video>obrazy plakatu z elementami, a nie klatki ze strumienia wideo. Tradycyjnie optymalizowaliśmy YouTube pod kątem najszybszego czasu do momentu rozpoczęcia odtwarzania filmu. Aby poprawić LCP, zespół zaczął optymalizować szybkość dostarczania obrazu plakatu. Zespół eksperymentował z kilkoma odmianami plakatów i wybrał ten, który uzyskał najlepsze wyniki w testach przeprowadzanych przez użytkowników. W wyniku tych prac FCP i LCP wykazały znaczącą poprawę, a LCP pola poprawiło się z 4,6 sekundy do 2,0 sekundy.
Chociaż te optymalizacje poprawiły wskaźnik LCP, członkowie zespołu mieli wrażenie, że obecna definicja wskaźnika LCP nie oddaje pełnego obrazu, z perspektywy użytkownika, kiedy wczytywała się „główna treść” strony – co jest celem LCP.
Aby rozwiać te obawy, członkowie zespołu YouTube podjęli współpracę z członkami zespołu Chrome, aby ustalić, jak można poprawić wskaźnik LCP. Po przeanalizowaniu możliwości i wpływu kilku opcji zespoły zdecydowały się na propozycję, aby wziąć pod uwagę czas wyrenderowania pierwszej klatki elementu wideo jako kandydata dot. LCP.
Gdy ta zmiana pojawi się w Chrome, zespół YouTube będzie mógł kontynuować pracę z optymalizacją pod kątem LCP. Zaktualizowana wersja danych oznacza, że optymalizacje będą miały bardziej bezpośredni wpływ na wrażenia rzeczywistych użytkowników.
Modularyzacja z leniwym ładowaniem
Strony YouTube zawierały wiele modułów, które szybko się załadowały. Aby zoptymalizować sposób renderowania ponad 50 komponentów, zespół stworzył komponent mapy modułów JS, który informował klienta, które moduły mają zostać wczytane. Gdy oznaczysz komponenty jako leniwe, moduły JS będą wczytywane później, co skraca początkowy czas wczytywania strony i zmniejsza ilość nieużywanego kodu JavaScript wysyłanego do klienta.
Po wdrożeniu leniwego ładowania zespół zauważył jednak efekt kaskadowy – leniwe ładowanie komponentów i ich zależności wczytywało się w nieoptymalnym czasie.
Aby rozwiązać ten problem, zespół określił minimalny zestaw komponentów potrzebnych w widoku danych i zgrupował je w jednym żądaniu sieciowym. Uzyskane wyniki to większa szybkość działania stron, skrócony czas analizowania JavaScriptu, a w rezultacie dłuższy początkowy czas renderowania.
Zarządzanie stanem w komponentach
W YouTube występowały problemy z wydajnością z powodu elementów sterujących odtwarzaczem, zwłaszcza na starszych urządzeniach. Z analizy kodu wynika, że odtwarzacz, który umożliwia użytkownikom kontrolowanie takich funkcji jak szybkość i postęp odtwarzania, został z czasem nadmiernie skomponowany.
Każde zdarzenie przesunięcia palcem na pasku postępu wywołało 2 dodatkowe obliczenia dotyczące stylu, które trwały 21,17 ms podczas testów wydajności w module. W miarę dodawania nowych elementów sterujących ich zdecentralizowany model często generował zależności cykliczne i wycieki pamięci, co niekorzystnie wpływało na wydajność strony odtwarzania filmu.
Aby rozwiązać problemy związane z brakiem scentralizowanej kontroli, zespół zaktualizował interfejs użytkownika tak, aby synchronizować wszystkie aktualizacje. Zasadniczo zespół odtwarzacza aktualizował się na jeden komponent najwyższego poziomu, który przekazuje dane do elementów podrzędnych. Dzięki temu można było przeprowadzić tylko jeden cykl aktualizacji interfejsu (renderowania) na każdą zmianę stanu, co eliminowało łańcuchowe aktualizacje. Nowe zdarzenie ruchu na pasku postępu odtwarzacza nie wymaga ponownego obliczania stylu podczas wykonywania JavaScriptu i teraz wymaga tylko 25% czasu w przypadku poprzedniego odtwarzacza.
Ta modernizacja kodu przyniosła też dodatkowe ulepszenia w zakresie wydajności, w tym krótszy czas wczytywania na starszych urządzeniach, mniejszą liczbę porzuconych odtworzeń i zmniejszoną liczbę błędów niekrytycznych.
Podsumowanie
Dzięki inwestycji w YouTube w skuteczność strony odtwarzania filmów wczytują się znacznie szybciej – 76% adresów URL witryn mobilnych YouTube przekracza już w tym polu odpowiednie progi. Na komputerach wskaźnik LCP modułu w przypadku strony odtwarzania filmu został zmniejszony z około 4,6 sekundy do 1,6 sekundy. Jakość interakcji i renderowania, szczególnie w przypadku odtwarzacza wideo YouTube, skróciła czas wykonywania kodu JavaScript nawet o 75%.
Poprawa wyników witryny YouTube w ciągu ostatniego roku przyniosła również poprawę wyników biznesowych, w tym czasu oglądania i dziennej liczby aktywnych użytkowników. Opierając się na sukcesie tych wysiłków, planujemy poszukiwać kolejnych sposobów optymalizacji w przyszłości.
W drugiej części tej serii, „Tworzenie łatwo dostępnej sieci”, dowiesz się, jak YouTube zwiększył dostępność swojej strony dla użytkowników czytników ekranu.
Szczególne podziękowania należą się 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łom YouTube i Chrome za ich wkład w tę pracę.