Dalam codelab ini, tingkatkan performa dengan mengganti GIF animasi dengan video.
Ukur terlebih dahulu
Pertama-tama, ukur performa situs:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
Setelah selesai, Anda akan melihat bahwa Lighthouse telah menandai GIF sebagai masalah dalam audit "Gunakan format video untuk konten animasi".
Mendapatkan FFmpeg
Ada sejumlah cara untuk mengonversi GIF menjadi video; panduan ini menggunakan FFmpeg. Alat ini sudah diinstal di VM Glitch, dan, jika mau, Anda juga dapat mengikuti petunjuk ini untuk menginstalnya di komputer lokal.
Membuka konsol
Periksa kembali apakah FFmpeg telah diinstal dan berfungsi:
- Klik Remix to Edit untuk membuat project dapat diedit.
- Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar Penuh).
- Di konsol, jalankan:
which ffmpeg
Anda akan mendapatkan jalur file kembali:
/usr/bin/ffmpeg
Mengubah GIF menjadi video
- Di konsol, jalankan
cd images
untuk masuk ke direktori image. - Jalankan
ls
untuk melihat kontennya.
Anda akan melihat sesuatu seperti ini:
$ ls
cat-herd.gif
- Di konsol, jalankan:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
Tindakan ini akan memberi tahu FFmpeg untuk mengambil input, yang ditandai dengan tanda -i
, dari
cat-herd.gif dan mengonversinya menjadi video bernama cat-herd.mp4. Proses ini akan memerlukan waktu beberapa detik untuk dijalankan. Setelah perintah selesai, Anda akan dapat mengetik ls
lagi
dan melihat dua file:
$ ls
cat-herd.gif cat-herd.mp4
Membuat video WebM
Meskipun MP4 sudah ada sejak tahun 1999, WebM relatif baru karena
pertama kali dirilis pada tahun 2010. Video WebM dapat jauh lebih kecil daripada video MP4, jadi
sebaiknya buat keduanya. Untungnya, elemen <video>
akan memungkinkan Anda
menambahkan beberapa sumber, sehingga jika browser tidak mendukung WebM, browser dapat beralih ke
MP4.
- Di konsol, jalankan:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- Untuk memeriksa ukuran file, jalankan:
ls -lh
Anda harus memiliki satu GIF, dan dua video:
$ 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
Perhatikan bahwa GIF asli berukuran 3,7 M, sedangkan versi MP4 berukuran 551 K, dan versi WebM hanya berukuran 341 K. Itu adalah penghematan yang sangat besar.
Memperbarui HTML untuk membuat ulang efek GIF
GIF animasi memiliki tiga karakteristik utama yang perlu direplikasi oleh video:
- Video akan diputar secara otomatis.
- Loop ini terus berulang (biasanya, tetapi Anda dapat mencegah looping).
- Mereka tidak bersuara.
Untungnya, Anda dapat membuat ulang perilaku ini menggunakan elemen <video>
.
- Di file
index.html
, ganti baris dengan<img>
dengan:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
Elemen <video>
yang menggunakan atribut ini akan diputar secara otomatis, berulang
tanpa henti, tidak memutar audio, dan diputar secara inline (yaitu, tidak dalam layar penuh), semua
perilaku yang diharapkan dari GIF animasi. 🎉
Menentukan sumber
Yang perlu Anda lakukan hanyalah menentukan sumber video. Elemen <video>
memerlukan
satu atau beberapa elemen turunan <source>
yang mengarah ke file video yang berbeda yang
dapat dipilih browser, bergantung pada dukungan format.
Perbarui <video>
dengan elemen <source>
yang tertaut ke video kumpulan kucing Anda:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Pratinjau
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
Pengalamannya akan terlihat sama. Sejauh ini tidak ada masalah.
Memverifikasi dengan Lighthouse
Dengan situs aktif terbuka:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
Anda akan melihat bahwa audit "Gunakan format video untuk konten animasi" kini lulus. Hore! 💪