W tym ćwiczeniu poprawisz wydajność, zastępując animowany GIF filmem.
Pomiar najpierw
Najpierw zmierz skuteczność witryny:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Lighthouse.
- Na liście Kategorie sprawdź, czy zaznaczone jest pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
Po zakończeniu Lighthouse powinien zgłosić GIF-a jako problem w ramach audytu „Używanie formatów wideo do animowanych treści”.
Pobieranie FFmpeg
Istnieją różne sposoby konwertowania GIF-ów na filmy. W tym przewodniku użyjemy narzędzia FFmpeg. Jest ona już zainstalowana na maszynie wirtualnej Glitch. Jeśli chcesz, możesz też zainstalować ją na swoim lokalnym komputerze, postępując zgodnie z tymi instrukcjami.
Otwieranie konsoli
Sprawdź, czy FFmpeg jest zainstalowany i działa:
- Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
- Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
- W konsoli wykonaj te czynności:
which ffmpeg
Powinieneś otrzymać ścieżkę do pliku:
/usr/bin/ffmpeg
Przekształcanie GIF-a w film
- W konsoli uruchom
cd images
, aby przejść do katalogu images. - Aby wyświetlić zawartość, uruchom
ls
.
Powinien pojawić się ekran podobny do tego:
$ ls
cat-herd.gif
- W konsoli wykonaj te czynności:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
Polecenie to informuje FFmpeg, aby wejściowe dane (oznaczone flagą -i
) z pliku cat-herd.gif przekonwertować na film o nazwie cat-herd.mp4. Wykonanie tego polecenia powinno zająć sekundę. Po zakończeniu wykonywania polecenia możesz ponownie wpisać ls
i zobaczyć 2 pliki:
$ ls
cat-herd.gif cat-herd.mp4
Tworzenie filmów WebM
Format MP4 istnieje od 1999 r., a WebM jest stosunkowo nowym formatem, który został po raz pierwszy udostępniony w 2010 r. Pliki wideo WebM mogą być znacznie mniejsze niż pliki MP4, więc warto wygenerować oba formaty. Na szczęście element <video>
umożliwia dodanie wielu źródeł, więc jeśli przeglądarka nie obsługuje formatu WebM, może użyć formatu MP4.
- W konsoli wykonaj te czynności:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- Aby sprawdzić rozmiary plików, wykonaj te czynności:
ls -lh
Powinieneś mieć 1 GIF-a i 2 filmy:
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
Zwróć uwagę, że oryginalny GIF ma rozmiar 3,7 M, wersja MP4 – 551 K, a wersja WebM – tylko 341 K. To ogromna oszczędność!
Zaktualizuj kod HTML, aby odtworzyć efekt GIF
Animowane GIF-y mają 3 kluczowe cechy, które muszą być odzwierciedlone w filmach:
- Są one odtwarzane automatycznie.
- Zazwyczaj są one odtwarzane w pętli (można jednak zablokować tę funkcję).
- Są wyciszone.
Na szczęście możesz odtworzyć te zachowania za pomocą elementu <video>
.
- W pliku
index.html
zastąp wiersz z elementem<img>
tym:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Element <video>
, który używa tych atrybutów, będzie odtwarzany automatycznie w nieskończoność bez dźwięku i wbudowany (czyli nie na pełnym ekranie). To właśnie oczekuje się od animowanych GIF-ów. 🎉
Określ źródła
Teraz wystarczy określić źródła filmów. Element <video>
wymaga co najmniej jednego elementu podrzędnego <source>
wskazującego różne pliki wideo, spośród których przeglądarka może wybrać, w zależności od obsługi formatu.
Zaktualizuj element <video>
elementami <source>
, które prowadzą do filmów o kotach:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Podgląd
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .
Użytkownicy powinni mieć takie same wrażenia. Idzie Ci dobrze.
Weryfikacja za pomocą Lighthouse
Gdy witryna jest aktywna:
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Lighthouse.
- Na liście Kategorie sprawdź, czy zaznaczone jest pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
Powinieneś/powinnaś zobaczyć, że audyt „Używanie formatów wideo do animowanych treści” jest teraz pozytywny. Super! 💪