Dalam codelab ini, tingkatkan performa dengan mengganti GIF animasi dengan video.
Ukur terlebih dahulu
Pertama, ukur performa situs:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak Performa dicentang pada 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".
Dapatkan FFmpeg
Ada sejumlah cara untuk mengonversi GIF menjadi video. Panduan ini menggunakan FFmpeg. Alat ini sudah terinstal di Glitch VM, dan jika ingin, Anda juga dapat mengikuti petunjuk berikut untuk menginstalnya di komputer lokal.
Membuka konsol
Periksa kembali apakah FFmpeg sudah terinstal dan berfungsi:
- Klik Remix untuk Mengedit agar project dapat diedit.
- Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin harus menggunakan opsi Layar Penuh).
- Di konsol, jalankan:
which ffmpeg
Anda akan mendapatkan jalur file kembali:
/usr/bin/ffmpeg
Ubah GIF ke 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
Kode ini akan memberi tahu FFmpeg untuk mengambil input, yang ditandai dengan flag -i
, dari
cat-herd.gif dan mengonversinya menjadi video bernama cat-herd.mp4. Proses ini memerlukan waktu
satu detik untuk dijalankan. Setelah perintah selesai, Anda dapat mengetik ls
lagi
dan melihat dua file:
$ ls
cat-herd.gif cat-herd.mp4
Buat video WebM
Meskipun MP4 sudah ada sejak 1999, WebM adalah pendatang baru yang relatif baru
dirilis pada tahun 2010. Video WebM bisa 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 kembali 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 seharusnya 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 adalah 3,7 M, versi MP4 551K, dan versi WebM hanya 341K. Itu penghematan yang besar!
Mengupdate HTML untuk membuat ulang efek GIF
GIF animasi memiliki tiga karakteristik utama yang harus direplikasi oleh video:
- Iklan diputar secara otomatis.
- Pengulangan operasi berlangsung terus-menerus (biasanya, tetapi dapat juga mencegah pengulangan).
- Mereka diam.
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 inline (yaitu, bukan layar penuh), semua
perilaku yang diharapkan dari GIF animasi. 🎉
Menentukan sumber Anda
Hal yang harus dilakukan hanyalah menentukan sumber video Anda. Elemen <video>
memerlukan
satu atau beberapa elemen turunan <source>
yang mengarah ke file video berbeda
yang dapat dipilih browser, bergantung pada dukungan format.
Perbarui <video>
dengan elemen <source>
yang tertaut ke video penggembala 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. Lalu tekan Layar Penuh .
Pengalaman akan terlihat sama. Sejauh ini tidak ada masalah.
Verifikasi dengan Lighthouse
Saat situs live terbuka:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak Performa dicentang pada daftar Kategori.
- Klik tombol Buat laporan.
Anda akan melihat bahwa audit "Gunakan format video untuk konten animasi" kini lulus. Hore! 💪