Wyniki filmu

W poprzednim module poznaliśmy techniki zwiększania wydajności związane z obrazami, które są powszechnie używanym w internecie typem zasobów. Jeśli nie zadbamy o ich optymalizację i nie weźmiemy pod uwagę obszaru widocznego dla użytkownika, mogą one zużywać znaczną przepustowość.

Obrazy nie są jednak jedynym typem multimediów, który można często spotkać w internecie. Filmy to kolejny popularny typ multimediów często używany na stronach internetowych. Zanim przyjrzymy się możliwym optymalizacjom, warto najpierw zrozumieć, jak działa element <video>.

Pliki źródłowe wideo

Podczas pracy z plikami multimedialnymi plik, który rozpoznajesz w systemie operacyjnym (.mp4, .webm i inne), nazywa się kontenerem. Kontener zawiera co najmniej 1 strumień. W większości przypadków będzie to strumień wideo i audio.

Każdy strumień możesz skompresować 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óżnicy między kontenerami a kodekami jest przydatne, ponieważ pomaga kompresować pliki multimedialne przy użyciu znacznie mniejszej przepustowości, co prowadzi do krótszego czasu wczytywania strony, a także może poprawić największe wyrenderowanie treści (LCP), czyli wskaźnik zorientowany na użytkownika i jeden z 3 podstawowych wskaźników internetowych.

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

ffmpeg -i input.mov output.webm

Powyższe polecenie, choć jest najprostsze w przypadku FFmpeg, pobiera plik input.mov i tworzy plik output.webm, używając domyślnych opcji FFmpeg. Powyższe polecenie generuje mniejszy plik wideo, który działa we wszystkich nowoczesnych przeglądarkach. Dostosowanie opcji wideo lub opcji audio oferowanych przez FFmpeg może pomóc w jeszcze większym zmniejszeniu rozmiaru pliku wideo. Jeśli na przykład używasz elementu <video> do zastąpienia GIF-a, usuń ścieżkę audio:

ffmpeg -i input.mov -an output.webm

Jeśli chcesz jeszcze bardziej dopracować ustawienia, FFmpeg oferuje flagę -crf podczas kompresowania filmów bez użycia kodowania ze zmienną szybkością transmisji bitów. -crf oznacza stały współczynnik szybkości. Jest to ustawienie, które dostosowuje poziom kompresji, przyjmując liczbę całkowitą z określonego zakresu.

Kodeki takie jak H.264 i VP9 obsługują flagę -crf, ale jej użycie zależy od tego, którego kodeka używasz. Więcej informacji znajdziesz w artykułach Stały współczynnik szybkości transmisji podczas kodowania filmów w formacie H.264 i Stała jakość podczas kodowania filmów w formacie VP9.

Wiele formatów

W przypadku plików wideo określenie wielu formatów działa jako rezerwa dla przeglądarek, 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, więc format MP4 może być używany jako format zastępczy w starszych przeglądarkach. Wersja WebM może używać nowszego kodeka AV1, który nie jest jeszcze tak powszechnie obsługiwany, lub starszego kodeka VP9, który jest lepiej obsługiwany niż 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 o tym, co może zawierać film, zanim rozpocznie się odtwarzanie:

<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. autoplay jest używany, gdy film musi być odtwarzany natychmiast, np. jako tło wideo lub zamiennik animowanych GIF-ów.

Animowane pliki GIF mogą być bardzo duże, zwłaszcza jeśli zawierają wiele klatek ze złożonymi szczegółami. Animowane GIF-y często zużywają kilka megabajtów danych, co może znacznie obciążać przepustowość, którą lepiej wykorzystać na ważniejsze zasoby. Zasadniczo należy unikać formatów animowanych obrazów, ponieważ ich odpowiedniki w formacie <video> są znacznie bardziej wydajne w przypadku tego typu multimediów.

Jeśli autoodtwarzanie filmu jest wymagane w Twojej witrynie, 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 dopiero wtedy, gdy znajdą się one w widocznym obszarze. Obraz poster może być niskiej jakości obrazem zastępczym, np. pierwszą klatką filmu. Gdy film pojawi się w obszarze widoku, przeglądarka zacznie go pobierać. Może to skrócić czas wczytywania treści w początkowym widocznym obszarze. Z drugiej strony, gdy używasz obrazu poster jako autoplay, użytkownicy widzą obraz tylko przez krótki czas, dopóki nie załaduje się film i nie zacznie się odtwarzać.

Odtwarzanie inicjowane przez użytkownika

Zazwyczaj przeglądarka zaczyna pobierać plik wideo, gdy tylko parser HTML wykryje element <video>. Jeśli masz elementy <video>, w których użytkownik rozpoczyna odtwarzanie, prawdopodobnie nie chcesz, aby pobieranie filmu rozpoczęło się, dopóki użytkownik nie wejdzie z nim w interakcję.

Możesz wpływać na to, co jest pobierane w przypadku zasobów wideo, używając atrybutu preload elementu <video>:

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

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

W takim przypadku możesz poprawić komfort użytkowników, dodając posterobraz. Dzięki temu użytkownik będzie miał kontekst dotyczący treści filmu. Jeśli obraz plakatu jest elementem LCP, możesz zwiększyć priorytet obrazu poster za pomocą wskazówki <link rel="preload"> wraz z atrybutem fetchpriority="high":

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

Umieszczanie na stronie

Biorąc pod uwagę złożoność optymalizacji i wydajnego wyświetlania treści wideo, warto przekazać to zadanie wyspecjalizowanym usługom wideo, takim jak YouTube czy Vimeo. Takie usługi optymalizują dostarczanie filmów, ale umieszczanie filmów z usługi zewnętrznej może mieć własny wpływ na skuteczność, ponieważ umieszczone odtwarzacze wideo często obsługują wiele dodatkowych zasobów, takich jak JavaScript.

W związku z tym osadzanie filmów z zewnętrznych źródeł może mieć znaczący wpływ na wydajność strony. Według HTTP Archive osadzone filmy z YouTube blokują główny wątek na ponad 1, 7 sekundy w przypadku przeciętnej witryny. Blokowanie wątku głównego przez dłuższy czas to poważny problem wpływający na wygodę użytkowników, który może mieć wpływ na interakcję do kolejnego wyrenderowania (INP) strony. Możesz jednak pójść na kompromis i nie wczytywać elementu do osadzenia od razu podczas początkowego ładowania strony. Zamiast tego utwórz element zastępczy, który zostanie zastąpiony rzeczywistym elementem do osadzenia wideo, gdy użytkownik wejdzie z nim w interakcję.

Prezentacje wideo

Sprawdź swoją wiedzę

Dalej: optymalizacja czcionek internetowych

Kolejnym typem zasobów, który omówimy w ramach optymalizacji, są czcionki. Optymalizacja czcionek w witrynie jest często pomijana, ale może mieć znaczący wpływ na ogólną szybkość wczytywania witryny i wskaźniki takie jak LCP i skumulowane przesunięcie układu (CLS).