Przypadek zmiany, którą zespół ds. stron internetowych w YouTube wprowadził, aby poprawić wydajność, zwiększyć wskaźnik pozytywnych wyników podstawowych wskaźników internetowych i poprawić kluczowe dane biznesowe.
Zespół Chrome często mówi o „tworzeniu lepszego internetu”, ale co to właściwie oznacza? Użytkownicy powinni mieć dostęp do szybkich i dostępnych treści oraz do korzystania z możliwości urządzeń w chwili, gdy tego najbardziej 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 tworzenia, w nowej serii „Budowanie lepszej sieci”. W pierwszej części tej serii omówimy, 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 rozwijające się, 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 przypadku największego wyrenderowania treści (LCP) w niektórych przypadkach wynosił on 4–6 sekund. Było to znacznie więcej niż zakładane 2,5 sekund.
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 strona uzyskała niski wynik Lighthouse (lab) z pierwszym wyrenderowaniem treści (FCP) wynoszącym 3,5 sekundy i LCP wynoszącym 8,5 sekundy.
Aby zoptymalizować FCP i LCP, zespół YouTube przeprowadził kilka eksperymentów, w wyniku których udało się uzyskać 2 ważne odkrycia.
Po pierwsze odkryli, że mogą zwiększyć skuteczność, 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.
Drugie odkrycie polegało na tym, że LCP uwzględnia tylko obrazy plakatów elementów
<video>, 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. Eksperymentowali 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 sekund.
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 wskaźnika sprawi, że te optymalizacje będą miały większy wpływ na wrażenia użytkowników.
Modułowanie za pomocą leniwego ładowania
Strony YouTube zawierały wiele modułów, które były wczytywane z wyprzedzeniem. Aby zoptymalizować sposób renderowania ponad 50 komponentów, zespół stworzył mapę komponentów do modułu 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ść stron, 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 funkcji takich jak szybkość odtwarzania i postęp, z czasem stał się zbyt złożony.
Każde zdarzenie przesunięcia dotknię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 nowych elementów sterujących z czasem 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 przyniosła też dodatkowe korzyści w zakresie wydajności, takie jak krótszy czas wczytywania na starszych urządzeniach, mniejsza liczba porzucanych odtwarzań i mniejsza liczba błędów niekrytycznych.
Wyniki i optymalizacje
Dzięki inwestycjom YouTube w jakość strony z filmem wczytują się znacznie szybciej. Obecnie 76% adresów URL witryn mobilnych YouTube spełnia progi danych 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 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 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.