Wyniki filmu

W poprzednim module przedstawiliśmy kilka technik dotyczących skuteczności, które są związane z są to powszechnie stosowane obrazy, które mogą być oglądane znacznej przepustowości, jeśli użytkownik nie zostanie odpowiednio zoptymalizowany i skrócony widoczny obszar.

Obrazy nie są jednak jedynym typem zawartości, którą można znaleźć w internecie. Filmy są inny popularny rodzaj multimediów, często spotykany na stronach internetowych. Zanim przyjrzymy się niektórym możliwych optymalizacji, trzeba najpierw zrozumieć, jak <video> .

Pliki źródłowe filmu

Podczas pracy z plikami multimedialnymi plik rozpoznawany w systemie operacyjnym (.mp4, .webm i inne) są nazywane kontenerem. Kontener zawiera jeden lub więcej 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 to kontener WebM zawierający strumień wideo skompresowany za pomocą VP9 oraz plik audio strumienia skompresowanego za pomocą Vorbis.

Warto znać różnice między kontenerami a kodekami, ponieważ pozwala skompresować pliki multimedialne przy znacznie mniejszej przepustowości, co prowadzi do skrócenia ogólnego czasu wczytywania strony i potencjalnie poprawi największe wyrenderowanie treści (LCP), czyli dane o użytkownikach, jeden z 3 podstawowych wskaźników internetowych.

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

ffmpeg -i input.mov output.webm

Poprzednie polecenie, choć tak podstawowe, jakby było używane w przypadku korzystania z FFmpeg, pobiera input.mov i wyprowadza plik output.webm, używając domyślnego formatu FFmpeg . Poprzednie polecenie generuje mniejszy plik wideo, który działa we wszystkich nowoczesnych przeglądarek. Zmodyfikowanie opcji wideo lub dźwięku dostępnych w ofercie FFmpeg może umożliwiają dalsze zmniejszenie rozmiaru pliku z filmem. Jeśli na przykład jesteś przy użyciu elementu <video> zamiast GIF-a, usuń ścieżkę audio:

ffmpeg -i input.mov -an output.webm

Jeśli chcesz go nieco bardziej doprecyzować, FFmpeg oferuje flagę -crf, gdy kompresowania filmów bez stosowania kodowania o zmiennej szybkości transmisji bitów. -crf oznacza Stała stawka. To ustawienie służy do regulacji poziomu i to przez akceptowanie liczby całkowitej w określonym zakresie.

Kodeki takie jak H.264 i VP9 obsługują flagę -crf, ale jej użycie zależy od jakiego kodeka używasz. Więcej informacji znajdziesz w artykule o współczynniku stałej stawki dla kodowanie filmów w jakości H.264, a także stałą jakość przy kodowaniu filmów w VP9.

Wiele formatów

W przypadku pracy z plikami wideo wybór wielu formatów działa jako kreacji zastępczej. 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, więc format MP4 może być używany jako dla starszych przeglądarek. Wersja WebM może korzystać z nowszego kodeka AV1, który nie jest jeszcze tak powszechnie obsługiwany, lub poprzedni kodek VP9, lepszy niż AV1, ale zwykle nie jest tak skompresowany jak AV1.

Atrybut poster

Obraz plakatu filmu został dodany za pomocą atrybutu poster w: <video> , który informuje użytkowników, jaka może być treść filmu przed odtworzeniem, zainicjowano:

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

Autoodtwarzanie

Według danych HTTP Archive 20% filmów w internecie zawiera autoplay. autoplay jest używane, gdy trzeba odtworzyć film natychmiast – na przykład jako tło filmu lub zastąpienie animowane GIF-y.

Animowane pliki GIF mogą być bardzo duże, zwłaszcza jeśli zawierają wiele klatek ze szczegółami. Nierzadko animowane pliki GIF wykorzystują wiele megabajtów danych, co może znacznie obciążać przepustowość, . Należy unikać animowanych formatów graficznych, ponieważ <video> ich odpowiedniki są znacznie skuteczniejsze w przypadku tego typu mediów.

Jeśli autoodtwarzanie filmów jest wymagane w Twojej witrynie, możesz użyć Atrybut 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>

Dzięki połączeniu atrybutu poster z interfejsem Intersection Observer API możesz Skonfiguruj stronę tak, aby pobierało filmy tylko wtedy, gdy znajdą się w widocznym obszarze. Obraz poster może być niskiej jakości symbolem zastępczym obrazu, takim jak pierwszy każdej klatki filmu. Gdy film znajdzie się w widocznym obszarze, pobieranie filmu. Może to skrócić czas wczytywania treści w w pierwszym widocznym obszarze. Natomiast gdy używasz obrazu poster w autoplay, użytkownicy zobaczą obraz, który będzie wyświetlany tylko przez chwilę, aż film został załadowany i rozpocznie się odtwarzanie.

Odtwarzanie inicjowane przez użytkownika

Zazwyczaj przeglądarka rozpoczyna pobieranie pliku wideo natychmiast po przesłaniu pliku HTML parser wykrywa element <video>. Jeśli masz elementy <video>, w których użytkownik zainicjuje odtwarzanie, prawdopodobnie nie chcesz, aby film zaczynał się od pobierania. do czasu, aż użytkownik wejdzie z nim w interakcję.

Przy użyciu parametru <video> możesz określić, jakie dane są pobierane w przypadku zasobów wideo Atrybut preload elementu:

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

Ustawienie preload="none" jest prawdopodobnie najbardziej pożądanym rozwiązaniem, jeśli wczytujesz które wymagają rozpoczęcia odtwarzania.

Możesz zwiększyć wygodę użytkowników w tym przypadku, dodając obraz poster. Daje to użytkownikowi dodatkowe informacje o tematyce filmu. Dodatkowo, jeśli Obraz plakatu to Twój element LCP, możesz zwiększyć atrybut poster obrazu priorytet przy użyciu wskazówki <link rel="preload"> wraz z fetchpriority="high":

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

Umieszczanie na stronie

Biorąc pod uwagę fakt, że optymalizacja i wydajne wyświetlanie treści wideo jest złożone, rozsądne jest zrzucić problem dedykowanymi usługami wideo, jak YouTube czy Vimeo. Usługi tego typu optymalizują wyświetlanie filmów za Ciebie, ale umieszczanie filmu z usługi innej firmy może mieć własny skutek ponieważ umieszczone na niej odtwarzacze często oferują dodatkowe funkcje zasobów takich jak JavaScript.

W tej sytuacji umieszczanie filmów innych firm może w znacznym stopniu wpłynąć skuteczność reklam. Według archiwum HTTP filmy umieszczone w YouTube blokują wątek główny ponad 1,7 sekundy w przypadku mediany witryny. Blokowanie wątku głównego na jest poważnym problemem dla użytkowników, który może mieć wpływ w sekcji Interakcja z następnym wyrenderowaniem (INP) strony. Można jednak znaleźć kompromis, przez nie wczytując umieszczonej treści od razu podczas jej początkowego wczytywania, a zamiast tego utwórz obiekt zastępczy, który będzie zastąpiony filmem. gdy użytkownik wejdzie z nią w interakcję.

Prezentacje wideo

Sprawdź swoją wiedzę

Następny krok: optymalizacja czcionek internetowych

Kolejnym elementem naszej wiedzy na temat optymalizacji konkretnych typów zasobów są czcionki. Optymalizowanie czcionek w witrynie często pomija się, ale warto sprawdzić, mają znaczny wpływ na ogólną szybkość wczytywania witryny i dane takie jak jako LCP i skumulowane przesunięcie układu (CLS).