Zastąp animowane GIF-y filmami, aby przyspieszyć wczytywanie stron

Czy kiedykolwiek zdarzyło Ci się zobaczyć animowany GIF w usłudze takiej jak Imgur lub Gfycat i sprawdzić go w narzędziach deweloperskich, aby dowiedzieć się, czy GIF jest w rzeczywistości filmem? I masz ku temu dobry powód. Animowane pliki GIF mogą być wręcz ogromne.

Panel sieci DevTools pokazujący plik GIF o rozmiarze 13,7 MB.

Na szczęście jest to jeden z obszarów wydajności wczytywania, w których niewiele pracy można poświęcić, aby osiągnąć duże zyski. Konwertując duże GIF-y na filmy, możesz znacznie ograniczyć wykorzystanie przepustowości sieci.

Najpierw zmierz

Użyj narzędzia Lighthouse, aby znaleźć na swojej stronie GIF-y, które można przekonwertować na filmy. W Narzędziach deweloperskich kliknij kartę Audyty i zaznacz pole wyboru Wydajność. Następnie uruchom Lighthouse i sprawdź raport. Jeśli masz GIF-y, które można przekonwertować, powinna pojawić się sugestia „Użyj formatów filmów do treści animowanych”:

W przypadku treści animowanych używaj formatów wideo, które nie przeszły kontroli w Lighthouse.

Twórz filmy MPEG

GIF-y można konwertować na filmy na wiele sposobów. W tym przewodniku znajdziesz narzędzie FFmpeg. Aby użyć programu FFmpeg do konwersji GIF-a (my-animation.gif) na film MP4, uruchom w konsoli to polecenie:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Sprawi to, że FFmpeg przyjmuje jako dane wejściowe my-animation.gif (oznaczone flagą -i) i konwertuje go na film o nazwie my-animation.mp4.

Koder libx264 działa tylko z plikami o identycznych wymiarach, np. 320 na 240 pikseli. Jeśli wejściowy GIF ma nieparzyste wymiary, możesz zastosować filtr przycinania, aby FFmpeg nie zwracał błędu „wysokość/szerokość nie podzielna przez 2”:

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Twórz filmy WebM

Chociaż format MP4 jest dostępny od 1999 r., WebM to stosunkowo nowy format pliku opublikowany w 2010 roku. Filmy WebM są znacznie mniejsze od filmów w formacie MP4, ale nie wszystkie przeglądarki obsługują WebM, więc warto wygenerować oba.

Aby użyć FFmpeg do przekonwertowania filmu my-animation.gif na film w formacie WebM, uruchom w konsoli to polecenie:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Porównaj różnice

Oszczędności uzyskane dzięki GIF-om i filmom mogą być dość znaczne.

Porównanie rozmiaru pliku pokazujące 3,7 MB w przypadku GIF-a, 551 KB w przypadku pliku MP4 i 341 KB w przypadku Webm.

W tym przykładzie początkowy plik GIF ma 3,7 MB, a wersja MP4 (551 KB) i wersja WebM, czyli tylko 341 KB.

Zastąp obraz GIF-em filmem

Animowane GIF-y mają trzy główne cechy, które trzeba odtworzyć w filmie:

  • Odtwarzają się automatycznie.
  • Są one odtwarzane w pętli (zazwyczaj, ale można zapobiec zapętleniu).
  • Nie odzywają się.

Na szczęście możesz odtworzyć te zachowania, używając elementu <video>.

<video autoplay loop muted playsinline></video>

Element <video> z tymi atrybutami odtwarza się automatycznie, bez końca zapętla się, nie odtwarza dźwięku i odtwarza bezpośrednio (czyli nie na pełnym ekranie). To zachowanie zgodne z charakterystycznymi cechami animowanych GIF-ów. 🎉

Element <video> wymaga co najmniej jednego elementu podrzędnego <source> wskazującego różne pliki wideo, które przeglądarka może wybrać w zależności od obsługi formatu. Prześlij zarówno WebM, jak i MP4, tak by jeśli przeglądarka nie obsługuje WebM, by mogła przejść do formatu MP4.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

Wpływ na największe wyrenderowanie treści (LCP)

Pamiętaj, że chociaż elementy <img> są kandydatami do LCP, elementy <video> bez obrazu poster nie są kandydatami do LCP. W przypadku emulacji animowanych GIF-ów nie należy dodać atrybutu poster do elementów <video>, ponieważ obraz pozostanie nieużywany.

Co to oznacza dla Twojej witryny? Zalecamy, aby zamiast animowanego GIF-a używać elementu <video>, ale przy założeniu, że te multimedia nie kwalifikują się do uzyskania LCP, i zamiast niego zostanie użyty następny pod względem skuteczności kandydat. Ponieważ GIF-y i pliki <video> są zwykle większe i wolniejsze pobieranie, przejście na inny kandydat LCP prawdopodobnie poprawi też wskaźnik LCP witryny.