Wyniki filmu

W poprzednim module przedstawiliśmy kilka technik wydajności związanych z obrazami, czyli powszechnie używanym rodzajem zasobów w internecie, które mogą zużywać znaczną część przepustowości łącza, jeśli nie została odpowiednio przeprowadzona optymalizacja i uwzględnienie widocznego obszaru użytkownika.

Jednak obrazy nie są jedynym rodzajem multimediów często spotykanym w internecie. Filmy to kolejny popularny typ mediów często używany na stronach internetowych. Zanim przeanalizujemy możliwe optymalizacje, dowiedz się, jak działa element <video>.

Pliki źródłowe filmu

Podczas pracy z plikami multimedialnymi rozpoznany przez Ciebie plik w systemie operacyjnym (.mp4, .webm i innych) jest nazywany kontenerem. Kontener zawiera co najmniej 1 strumień. W większości przypadków będzie to strumień wideo i audio.

Możesz skompresować każdy strumień za pomocą kodeka. Na przykład video.webm może być kontenerem WebM zawierającym strumień wideo skompresowany za pomocą VP9 i strumień audio skompresowany za pomocą Vorbis.

Zrozumienie różnic między kontenerami i kodekami jest pomocne, ponieważ pomaga kompresować pliki multimedialne przy użyciu znacznie mniejszej przepustowości. Skraca to ogólny czas wczytywania strony i potencjalnie poprawia jakość największego wyrenderowania treści (LCP), która jest wskaźnikiem skupionym na użytkownikach i jednym z 3 podstawowych wskaźników internetowych.

Jednym ze sposobów kompresowania plików wideo jest użycie FFmpeg:

ffmpeg -i input.mov output.webm

Poprzednie polecenie – choć równie proste w przypadku korzystania z FFmpeg – pobiera plik input.mov i generuje plik output.webm przy użyciu domyślnych opcji FFmpeg. Poprzednie polecenie generuje mniejszy plik wideo, który działa we wszystkich nowoczesnych przeglądarkach. Aby jeszcze bardziej zmniejszyć rozmiar pliku wideo, możesz jeszcze bardziej zmniejszyć rozmiar filmu lub opcji audio w ofercie FFmpeg. Jeśli na przykład do zastąpienia GIF-a używasz elementu <video>, musisz usunąć ścieżkę audio:

ffmpeg -i input.mov -an output.webm

Jeśli chcesz nieco poprawić działanie funkcji, FFmpeg oferuje flagę -crf podczas kompresowania filmów bez używania kodowania o zmiennej szybkości transmisji bitów. -crf to skrót od Constant Rate Factor. To ustawienie dostosowuje poziom kompresji, a potem akceptuje liczbę całkowitą z danego zakresu.

Kodeki takie jak H.264 i VP9 obsługują flagę -crf, ale jej zastosowanie zależy od używanego kodeka. Więcej informacji znajdziesz w artykule o współczynniku stałej szybkości kodowania filmów w standardzie H.264 oraz o stałej jakości przy kodowaniu filmów w VP9.

Wiele formatów

W przypadku pracy z plikami wideo określenie wielu formatów sprawdza się jako rozwiązanie zastępcze w przeglądarkach, które nie obsługują wszystkich nowoczesnych formatów.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Wszystkie nowoczesne przeglądarki obsługują kodek H.264, dlatego w przypadku starszych przeglądarek można użyć formatu MP4. Wersja WebM może korzystać z nowszego kodeka AV1, który nie jest jeszcze tak powszechnie obsługiwany, lub wcześniejszego kodeka VP9, który jest lepszy od AV1, ale zwykle nie kompresuje tak dobrze jak AV1.

Atrybut poster

Obraz plakatu filmu jest dodawany za pomocą atrybutu poster w elemencie <video>, który informuje użytkowników, jaka może być treść filmu przed rozpoczęciem odtwarzania:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Autoodtwarzanie

Według archiwum HTTP 20% filmów w internecie zawiera atrybut autoplay. Atrybut autoplay jest używany, gdy film musi zostać odtworzony od razu, np. gdy jest używany jako tło filmu lub zastąpi animowany GIF.

Animowane GIF-y mogą być bardzo duże, zwłaszcza jeśli mają wiele klatek z zawiłymi szczegółami. Nierzadko animowane GIF-y zajmują kilka megabajtów danych, co może powodować znaczne zużycie przepustowości, a przez to lepsze wykorzystanie w przypadku bardziej newralgicznych zasobów. Należy unikać animowanych formatów graficznych, ponieważ w przypadku tego typu multimediów ich odpowiedniki w formacie <video> są znacznie skuteczniejsze.

Jeśli Twoja witryna wymaga autoodtwarzania filmów, możesz użyć atrybutu autoplay bezpośrednio w elemencie <video>:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Łącząc atrybut poster z interfejsem Intersection Observer API, możesz skonfigurować stronę tak, aby pobierała filmy tylko wtedy, gdy znajdą się w widocznym obszarze. Obraz poster może być obrazem zastępczym niskiej jakości, takim jak pierwsza klatka filmu. Gdy film pojawi się w widocznym obszarze, przeglądarka zacznie go pobierać. Może to poprawić czas wczytywania treści na początkowym widocznym obszarze. Natomiast jeśli używasz obrazu poster w przypadku elementu autoplay, użytkownicy widzą obraz, który jest widoczny tylko przez chwilę, dopóki film nie zostanie wczytany i rozpocznie się jego odtwarzanie.

Odtwarzanie inicjowane przez użytkownika

Zazwyczaj przeglądarka zaczyna pobieranie pliku wideo natychmiast po wykryciu elementu <video> przez parser HTML. Jeśli masz elementy <video>, w przypadku których użytkownik inicjuje odtwarzanie, pobieranie filmu powinno rozpocząć się dopiero wtedy, gdy użytkownik wejdzie z nim w interakcję.

Możesz wpłynąć na pobieranie zasobów wideo za pomocą atrybutu preload elementu <video>:

• Ustawienie preload="none" informuje przeglądarkę, że żadna z treści wideo nie powinna być wstępnie wczytywana.
• Ustawienie preload="metadata" pobiera tylko metadane filmu, takie jak jego czas trwania i ewentualnie inne zbędne informacje.

Ustawienie preload="none" jest prawdopodobnie najbardziej pożądane, jeśli wczytujesz filmy, od których użytkownicy muszą rozpocząć odtwarzanie.

Aby zwiększyć wygodę użytkowników, dodaj obraz poster. W ten sposób użytkownik zyskuje pewne informacje o temacie filmu. Dodatkowo, jeśli Twoim elementem LCP jest obraz plakatu, możesz zwiększyć priorytet obrazu poster, korzystając z podpowiedzi <link rel="preload"> razem z wartością fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Umieszczanie na stronie

Biorąc pod uwagę złożoność optymalizacji i skutecznego wyświetlania treści wideo, warto przenieść ten problem na odpowiednie usługi, takie jak YouTube czy Vimeo. Takie usługi optymalizują wyświetlanie filmów, ale umieszczenie filmu z usługi innej firmy może mieć własny wpływ na wydajność, ponieważ osadzone odtwarzacze często udostępniają dużo dodatkowych zasobów, takich jak JavaScript.

W związku z tym umieszczanie filmów innych firm może w znacznym stopniu wpływać na wydajność strony. Według archiwum HTTP umieszczanie YouTube blokuje wątek główny na ponad 1, 7 sekundy w przypadku mediany witryny. Zablokowanie głównego wątku na dłuższy czas to poważny problem związany z wrażeniami użytkownika, który może wpłynąć na interakcję z kolejnym wyrenderowaniem (INP). Możesz jednak dojść do kompromisu, nie ładując umieszczonego filmu od razu podczas początkowego wczytywania strony. Zamiast tego utwórz obiekt zastępczy dla umieszczonego filmu, który zostanie zastąpiony przez umieszczony film, gdy użytkownik wejdzie z nim w interakcję.

Prezentacje wideo

Sprawdź swoją wiedzę

Następny krok: optymalizacja czcionek internetowych

Następnym krokiem w naszej prezentacji dotyczącej optymalizacji określonych typów zasobów są czcionki. Optymalizowanie czcionek witryny jest często pomijanym elementem, ale może mieć znaczny wpływ na jej ogólną szybkość wczytywania i dane takie jak LCP i skumulowane przesunięcie układu (CLS).