Odtwarzanie wideo w Internecie: aktualny stan wideo (część 1)

Wykorzystanie wideo w Internecie rośnie, ponieważ urządzenia i sieci stają się szybsze i bardziej zdolne do obsługi treści wideo. Badania pokazują, że strony z filmami zwiększają zaangażowanie o 80%. Witryny e-commerce z wideo mają wyższe konwersje niż witryny bez wideo.

Ale dodanie wideo może mieć swoją cenę. Filmy (będące większymi plikami) wydłużają czas wczytywania strony, a badania wydajności pokazują, że wolniejsze strony mają odwrotny skutek – mniejsze zaangażowanie klientów i konwersje. W tym artykule przeanalizuję ważne wskaźniki, które pozwalają zrównoważyć wydajność i odtwarzanie wideo w sieci, przyjrzę się dzisiejszemu wykorzystaniu wideo i przedstawię najlepsze praktyki dostarczania wideo w sieci.

Jednym z pierwszych kroków do poprawy satysfakcji klienta jest przyspieszenie czasu ładowania strony . Google pokazało, że strony mobilne, które ładują się dłużej niż trzy sekundy, tracą 53% swoich odbiorców z powodu porzucenia. Inne badania wykazują, że wraz z poprawą wydajności witryny wzrasta wykorzystanie i sprzedaż.

Dodanie wideo do witryny zwiększy zaangażowanie, ale może również znacznie spowolnić czas ładowania, więc jasne jest, że należy znaleźć równowagę między dodawaniem filmów do witryny i nie wpływaniem zbytnio na czas ładowania.

Zalecana literatura : Front-End Performance Checklist 2018 [PDF, Apple Pages]

Wideo w Internecie dzisiaj

Aby zbadać obecny stan wideo w sieci, użyję danych z archiwum HTTP. Archiwum HTTP używa WebPageTest do skanowania wydajności 1,2 miliona witryn mobilnych i stacjonarnych co dwa tygodnie, a następnie przechowuje dane w Google BigQuery.

Zazwyczaj sprawdzana jest tylko strona główna każdej domeny (co oznacza, że ​​uruchomiona jest www.cnn.com , ale nie jest uruchamiana www.cnn.com/politics ). Dane te mogą nam pomóc zrozumieć, w jaki sposób korzystanie z wideo w sieci wpływa na wydajność witryn internetowych. Testy mobilne są przeprowadzane na emulowanej Motoroli G4 z połączeniem internetowym 3G (1,6 MBPS w dół, 768 KBPS w górę, 300 ms RTT), a testy na komputerze uruchamiają Chrome na połączeniu kablowym (5 MBPS w dół, 1 MBPS w górę, 28 ms RTT). Z zestawu danych będę korzystać od 1 sierpnia 2018 r.

Witryny, które pobierają wideo

Pierwszym krokiem do zbadania witryn z filmami jest przyjrzenie się witrynom, które pobierają pliki wideo podczas wczytywania strony. W zestawie danych HTTP Archive zawiera 35 tys. witryn mobilnych i 55 tys. witryn na komputery z plikami wideo do pobrania (to 3% wszystkich witryn mobilnych i 4,5% wszystkich witryn na komputery). Porównując komputery z urządzeniami mobilnymi, okazuje się, że 30 tys. z tych witryn zawiera filmy zarówno na urządzeniach mobilnych, jak i na komputerach (pozostaje ok. 5800 witryn na urządzeniach mobilnych bez filmów na komputerach).

Mediana strony mobilnej z filmem waży aż 7 MB (583% więcej niż 1,2 MB dla mediany strony mobilnej). Wzrost ten nie jest w pełni spowodowany samym materiałem wideo (2,5 MB). Ponieważ witryny z filmami są zwykle bogatsze w funkcje i wciągające wizualnie, wykorzystują również więcej obrazów (mediana witryny ma więcej o ponad 1 MB), CSS i JavaScript. Poniższa tabela pokazuje również, że mediana SpeedIndex (pomiar szybkości wyświetlania treści na ekranie) w witrynach z filmami jest o 3,7 s wolniejsza niż typowa witryna mobilna, a jej wczytywanie zajmuje aż 11,5 sekundy.

To wyraźnie pokazuje, że witryny, które są bardziej interaktywne i zawierają treści wideo, ładują się (średnio) dłużej niż te witryny bez wideo. Ale czy możemy przyspieszyć dostarczanie wideo? Czego jeszcze możemy się nauczyć z dostępnych danych?

Hosting wideo

Czy podczas badania dostarczania wideo pliki są udostępniane przez CDN lub dostawcę wideo, czy też programiści przechowują filmy na własnych serwerach? Analizując domenę filmów dostarczanych na urządzeniach mobilnych, okazuje się, że 12 163 domen jest wykorzystywanych do dostarczania filmów, co wskazuje, że około 49% witryn udostępnia własne pliki wideo. Jeśli uszeregujemy domeny według częstotliwości, jesteśmy w stanie określić najpopularniejsze rozwiązania hostingu wideo:

Najpopularniejsze CDN i domeny Facebook, Akamai, Google, Cloudinary, AWS i Cloudfront wiodą prym, co nie jest zaskakujące. Jednak interesujące jest, aby zobaczyć YouTube i Vimeo jak dotąd na liście, ponieważ są to dwie najpopularniejsze witryny do udostępniania wideo.

Przyjrzyjmy się dostarczaniu wideo na YouTube, Vimeo i Facebook:

Liczba filmów w YouTube

Domyślnie strony z osadzonym filmem YouTube w rzeczywistości nie pobierają żadnych plików wideo — tylko skrypty i obraz zastępczy, więc nie pojawiają się w zapytaniach szukających witryn z pobranymi plikami wideo. Jednym z plików JavaScript do pobrania dla odtwarzacza wideo YouTube jest www-embed-player.js . Wyszukując ten plik, znajdujemy 69 tys. wystąpień w 66 647 witrynach mobilnych. Te witryny mają medianę SpeedIndex wynoszącą 10 700, a wykorzystanie danych wynosi 3,31 MB — lepiej niż witryny z pobranymi plikami wideo, ale wciąż wolniejsze niż witryny bez filmów wideo. Wzrost danych jest bezpośrednio związany z większą liczbą obrazów i JavaScript (jak pokazano poniżej).

Liczy się wideo Vimeo

Istnieje 14 148 żądań wideo Vimeo w archiwum HTTP do odtwarzania wideo. Widzę tylko 5848 żądań pliku player.js (w formacie https://f.vimeocdn.com/p/3.2.0/js/player.js — co oznacza, że ​​być może na jednej stronie jest wiele filmów, a może inna lokalizacja dla pliku odtwarzacza wideo W archiwum HTTP dostępnych jest 17 różnych wersji odtwarzacza, z których najpopularniejszymi są 3.1.5 i 3.1.4:

Wydaje się, że żadna biblioteka Vimeo nie zwiększa wydajności — wszystkie strony mają podobny czas ładowania.

Uwaga : korzystanie www-embed-player.js dla YouTube lub https://f.vimeocdn.com/p/*/js/player.js dla Vimeo to dobre odciski palców dla przeglądarek z czystą pamięcią podręczną, ale jeśli klient wcześniej przeglądałeś witrynę z osadzonym filmem, ten plik może już znajdować się w pamięci podręcznej przeglądarki i dlatego nie zostanie ponownie zażądany. Ale, jak zauważył niedawno Andy Davies, nie jest to bezpieczne założenie.

Liczy się wideo na Facebooku

Zaskakujące jest to, że w danych archiwum HTTP 67% wszystkich żądań wideo pochodzi z CDN Facebooka. Okazuje się, że w Chrome zewnętrzne widżety Facebooka pobierają 30% wszystkich filmów umieszczonych w widżecie (ten efekt nie występuje w Safari ani w Firefoksie). Okazuje się, że widżet innej firmy dodany za pomocą zaledwie kilku linijek kodu odpowiada za 57% wszystkich filmów widzianych w archiwum HTTP.

Typy plików wideo

Większość filmów na testowanych stronach to pliki MP4. Jeśli spojrzymy na wszystkie pobrane filmy (oprócz tych z Facebooka), otrzymamy następujący widok:

Spośród plików bez rozszerzenia — 10 tys. to pliki googlevideo.com .

Czego możemy się dowiedzieć o tych plikach? Przyjrzyjmy się każdemu typowi pliku, aby dowiedzieć się więcej o dostarczanej zawartości.

Użyłem FFPROBE do zapytania o 34k unikalnych plików MP4 i uzyskałem dane dla 14700 filmów (wiele z filmów zostało zmienionych lub usuniętych w ciągu 3 tygodni od przechwycenia z archiwum HTTP do analizy).

Dane wideo MP4

Spośród 14,7 tys. filmów w zbiorze danych 8564 ma ścieżki audio (58%). Krótsze filmy odtwarzane automatycznie lub filmy odtwarzane w tle nie wymagają dźwięku, więc usunięcie ścieżki dźwiękowej to świetny sposób na zmniejszenie rozmiaru pliku (i przyspieszenie dostarczania) filmów.

Kolejnym najważniejszym aspektem szybkiego pobierania wideo są wymiary. Im większe wymiary (a w przypadku wideo, należy wziąć pod uwagę trzy wymiary: width × height × time ), tym większy będzie plik wideo.

Czas trwania wideo MP4

Większość z 14 tys. przebadanych filmów jest krótkich: mediana (50. percentyl) czasu trwania wynosi 21 s. Jednak 10% przebadanych filmów trwa dłużej niż 2 minuty. Przypadki użycia tutaj będą oczywiście podzielone, ale w przypadku krótkich pętli wideo lub filmów w tle — krótsze filmy będą zużywać mniej danych i szybciej pobierać.

Szerokość i wysokość wideo MP4

Rozmiary wideo na ekranie decydują o tym, ile pikseli będzie musiała zużyć każda klatka. Poniższy wykres przedstawia różne szerokości filmów, które są wyświetlane na urządzeniu mobilnym. (Na marginesie Moto G4 ma ekran o wymiarach 1080×1920, a wszystkie strony są wyświetlane w trybie pionowym).

Jak pokazują dane, dwie najczęściej używane szerokości wideo są znacznie większe niż na ekranie G4 (w trybie pionowym). Pełne 49% wszystkich filmów jest wyświetlanych w szerokości większej niż 1080 pikseli. Alcatel 1x, nowe urządzenie z Androidem Go, ma ekran o rozdzielczości 480×960 pikseli. 77% filmów dostarczonych w zestawie próbek ma szerokość większą niż 480 pikseli.

Wraz ze zmniejszaniem się rozmiarów filmów zmniejsza się również rozmiar plików (a tym samym czas na dostarczenie filmu). To jest główny powód zmiany rozmiaru filmów.

Dlaczego te filmy są tak duże? Jeśli skorelujemy filmy wyświetlane na urządzeniach mobilnych i komputerach, okazuje się, że 18% filmów wyświetlanych na urządzeniach mobilnych to te same filmy wyświetlane na komputerach. Jest to „problem” rozwiązany wiele lat temu z obrazami responsywnymi. Wyświetlając filmy o różnych rozmiarach na urządzeniach o różnych rozmiarach, możemy zapewnić wyświetlanie pięknych filmów, ale w rozmiarze i rozmiarze odpowiednim dla danego urządzenia.

Szybkość transmisji wideo MP4

Szybkość transmisji wideo dostarczanego do urządzenia ma duży wpływ na jakość odtwarzania wideo. Testy archiwum HTTP są przeprowadzane na połączeniu 3G z prędkością pobierania 1,6 MBPS. Aby odtwarzać (bez zatrzymywania) pobieranie musi być szybsze niż odtwarzanie. Zapewnijmy plikom wideo 80% dostępnego bitrate (1,3 MBPS). 47% filmów w zestawie próbek ma szybkość transmisji bitów powyżej 1,3 MB/s, co oznacza, że ​​gdy te filmy są odtwarzane przez połączenie 3G, są bardziej podatne na zatrzymanie, co prowadzi do niezadowolonych klientów. 27% filmów ma bitrate wyższy niż 2,5 MBPS, 10% jest wyższy niż 5 MBPS, a 35 filmów wyświetlanych na urządzenia mobilne ma bitrate > 10 MBPS. Jest mało prawdopodobne, że te większe filmy będą odtwarzane bez zatrzymywania się na wielu połączeniach — stacjonarnych lub mobilnych.

Co prowadzi do wyższych szybkości transmisji?

Większe filmy mają zwykle większą szybkość transmisji, ponieważ filmy o większych rozmiarach wymagają znacznie więcej danych, aby wypełnić dodatkowe piksele na urządzeniu. Potwierdza to krzyżowe odniesienie bitrate każdego filmu do szerokości: filmy o szerokości 1280 (pomarańczowy) i 1920 (szary) mają znacznie szerszy rozkład bitrate (więcej punktów danych po prawej stronie na wykresie). Kolumna zaznaczona na żółto oznacza 136 filmów o szerokości 1920 i przepływności między 10-11 MBPS.

Jeśli wizualizujemy tylko filmy powyżej 1,6 MBPS, staje się jasne, że wyższe rozdzielczości ekranu (1280 i 1920) są odpowiedzialne za filmy o wyższej szybkości transmisji bitów.

MP4: HTTP kontra HTTPS

Protokół HTTP2 na nowo zdefiniował dostarczanie treści dzięki połączeniom multipleksowym — gdzie wymagane jest tylko jedno połączenie na serwer. Czy w przypadku dużych plików, takich jak wideo, protokół HTTP2 zapewnia znaczącą poprawę dostarczania treści? Jeśli spojrzymy na statystyki z archiwum HTTP:

Pomijając 116 tys. filmów na Facebooku (wszystkie wysłane przez HTTP2), widzimy, że jest to około 50:50 podzielony między HTTP 1.1 i HTTP2. Jednak HTTP1.1 może korzystać z HTTPS, a kiedy filtrujemy pod kątem użycia HTTPS, okazuje się, że 81% strumieni wideo jest przesyłanych przez HTTPS, przy czym HTTP2 jest używany nieco częściej niż HTTPS1.1 (41%:36%)

Jak widać, porównywanie szybkości dostarczania wideo HTTP i HTTP2 jest w toku.

Przesyłanie strumieniowe wideo HLS

Strumieniowe przesyłanie wideo przy użyciu adaptacyjnej szybkości transmisji bitów to idealny sposób na dostarczanie wideo do użytkownika końcowego. Wiele wersji każdego filmu ma różne wymiary i szybkości transmisji. Lista dostępnych strumieni jest prezentowana na urządzeniu odtwarzającym, a odtwarzacz wideo na urządzeniu może wybrać najbardziej odpowiedni strumień w oparciu o rozmiar ekranu urządzenia i dostępne warunki sieciowe. W zbadanym przeze mnie zestawie danych archiwum HTTP znajduje się 1065 plików manifestu (i plików strumieni wideo o rozmiarze 14 tys.).

Odtwarzanie strumienia wideo

Jednym z kluczowych wskaźników w streamingu wideo jest jak najszybsze rozpoczęcie wideo. Chociaż plik manifestu zawiera listę dostępnych strumieni, odtwarzacz nie ma pojęcia o dostępnej przepustowości sieci na początku odtwarzania. Aby rozpocząć transmisję i ponieważ gracz musi wybrać transmisję, zazwyczaj wybiera pierwszy z listy. Aby ułatwić szybkie uruchamianie wideo, ważne jest, aby umieścić odpowiedni strumień na górze pliku manifestu.

Uwaga : używanie interfejsu Chrome Network Info API do generowania plików manifestu w locie może być dobrym sposobem na szybką optymalizację treści wideo podczas uruchamiania.

Jednym ze sposobów zapewnienia szybkiego uruchomienia wideo jest rozpoczęcie od segmentu wideo o najniższej jakości, ponieważ pobieranie będzie najszybsze. Początkowa jakość wideo może być rozpikselowana, ale ponieważ odtwarzacz lepiej rozumie jakość sieci, może szybko dostosować się do bardziej odpowiedniego (miejmy nadzieję, wyższej jakości) strumienia wideo. Mając to na uwadze, spójrzmy na początkowe szybkości transmisji strumienia w archiwum HTTP.

Czerwona linia na powyższym wykresie oznacza 1,5 MBPS (przypomnijmy, że testy mobilne są uruchamiane z prędkością 1,6 MBPS i pobierane są nie tylko treści wideo). Widzimy, że 30,5% wszystkich strumieni (wszystko po lewej stronie linii) zaczyna się z początkową szybkością transmisji bitów wyższą niż 1,5 MBPS (i dlatego jest mało prawdopodobne, aby odtwarzała w połączeniu 3G), a 17% zaczyna się powyżej 2 MBPS.

Co się dzieje, gdy pobieranie wideo jest wolniejsze niż faktyczne odtwarzanie wideo? Początkowo odtwarzacz będzie próbował pobrać (zbyt) duże pliki o szybkości transmisji bitów, ale w oparciu o prędkość pobierania zda sobie sprawę z problemu. Odtwarzacz przełączy się następnie na pobieranie wideo o niższej szybkości transmisji bitów, dzięki czemu pobieranie jest szybsze niż odtwarzanie. Problem polega na tym, że początkowa próba pobrania zajmuje trochę czasu, a dodanie opóźnienia do rozpoczęcia odtwarzania wideo prowadzi do rezygnacji klienta.

Możemy również przyjrzeć się najczęstszym bitratem plików .ts (pliki, które zawierają treść wideo), aby zobaczyć, jakie bitrate są ostatecznie pobierane na urządzenia mobilne. Te dane obejmują początkowe szybkości transmisji bitów i każdy kolejny plik pobrany podczas uruchomienia WebPageTest:

Widzimy dwie główne grupy przepływności strumieniowego przesyłania wideo (100-300 KBPS i szerszy szczyt z 300-1000 MBPS). W tym miejscu spodziewalibyśmy się pojawienia się strumieni, biorąc pod uwagę, że prędkość sieci jest ograniczona do 1,6 MBPS.

Porównując dane do komputerów stacjonarnych, Mobile jest wyraźnie wyższy przy niższych przepływnościach, a strumienie desktopowe mają wysokie wartości szczytowe w zakresach 500-600 i 800-900 KBPS, których nie widać w urządzeniach mobilnych.

Kiedy porównamy obserwowane początkowe szybkości transmisji bitów (kolor niebieski) z faktycznie pobranymi plikami, bardzo wyraźnie widać, że w przypadku urządzeń mobilnych szybkość transmisji ogólnie zmniejsza się podczas odtwarzania strumienia, co wskazuje, że obniżenie początkowej szybkości transmisji dla strumieni wideo może poprawić wydajność uruchamiania wideo i zapobiec przestojom we wczesnym odtwarzaniu wideo. Wydaje się, że wideo na komputery stacjonarne również się zmniejsza, ale możliwe jest również, że niektóre filmy przesuną się na wyższe prędkości odtwarzania.

Wniosek

Treści wideo w sieci zwiększają zaangażowanie i satysfakcję klientów. Strony, które szybko się ładują, mają ten sam efekt. Dodanie wideo do witryny spowolni czas renderowania strony, wymuszając zachowanie równowagi między ogólnym ładowaniem strony a treścią wideo. Aby zmniejszyć rozmiar treści wideo, upewnij się, że masz wersje odpowiednio dopasowane do wymiarów urządzenia mobilnego i, jeśli to możliwe, używaj krótszych filmów.

Jeśli odtwarzanie Twoich filmów nie jest niezbędne, podążaj ścieżką YouTube i Vimeo — pobierz wszystkie wymagane fragmenty, aby były gotowe do odtwarzania, ale w rzeczywistości nie pobieraj żadnych segmentów wideo, dopóki użytkownik nie naciśnie odtwarzania. Wreszcie — jeśli przesyłasz strumieniowo wideo — zacznij od ustawienia najniższej jakości, aby zapewnić szybkie odtwarzanie wideo.

W moim następnym poście na wideo wezmę te ogólne ustalenia i zagłębię się w sposoby rozwiązywania potencjalnych problemów za pomocą przykładów.