Pada modul sebelumnya, Anda telah mempelajari beberapa teknik performa terkait gambar, yang merupakan jenis resource yang banyak digunakan di web dan dapat menghabiskan bandwidth yang signifikan jika tidak berhati-hati dalam mengoptimalkannya dan mempertimbangkan area pandang pengguna.
Namun, gambar bukan satu-satunya jenis media yang umum terlihat di web. Video adalah jenis media populer
lainnya yang sering digunakan di laman web. Sebelum melihat beberapa
kemungkinan pengoptimalan, penting untuk memahami cara kerja elemen
<video> terlebih dahulu.
File sumber video
Saat menggunakan file media, file yang Anda kenali di sistem operasi
(.mp4, .webm, dan lainnya) disebut penampung. Penampung berisi satu
atau beberapa streaming. Pada umumnya, ini adalah streaming video dan audio.
Anda dapat mengompresi setiap streaming menggunakan codec. Misalnya, video.webm dapat berupa
penampung WebM yang berisi streaming video yang dikompresi menggunakan VP9, dan streaming
audio yang dikompresi menggunakan Vorbis.
Memahami perbedaan antara penampung dan codec sangat membantu, karena cara ini membantu Anda mengompresi file media menggunakan bandwidth yang jauh lebih sedikit, yang menyebabkan lebih sedikit waktu pemuatan halaman secara keseluruhan, serta berpotensi meningkatkan Largest Contentful Paint (LCP) halaman, yang merupakan metrik yang berfokus pada pengguna dan salah satu dari tiga Core Web Vitals.
Salah satu cara untuk mengompresi file video melibatkan penggunaan FFmpeg:
ffmpeg -i input.mov output.webm
Perintah sebelumnya—meskipun sederhana seperti yang didapat saat menggunakan FFmpeg—mengambil
file input.mov dan menghasilkan file output.webm menggunakan opsi FFmpeg
default. Perintah sebelumnya menghasilkan file video lebih kecil yang berfungsi di semua
browser modern. Menyesuaikan video atau opsi audio yang ditawarkan FFmpeg dapat
membantu Anda mengurangi ukuran file video lebih jauh. Misalnya, jika Anda
menggunakan elemen <video> untuk mengganti GIF, Anda harus menghapus trek audio:
ffmpeg -i input.mov -an output.webm
Jika Anda ingin menyesuaikan sedikit lebih lanjut, FFmpeg menawarkan flag -crf saat
mengompresi video tanpa menggunakan encoding kecepatan bit variabel. -crf adalah singkatan dari Constant Rate Factor. Ini adalah setelan yang menyesuaikan tingkat
kompresi, dan melakukannya dengan menerima bilangan bulat dalam rentang tertentu.
Codec seperti H.264 dan VP9 mendukung flag -crf, tetapi penggunaannya bergantung pada codec yang Anda gunakan. Untuk mengetahui informasi selengkapnya, baca faktor rasio konstan untuk
encoding video dalam H.264, serta kualitas konstan saat mengenkode video di
VP9.
Beberapa format
Saat menangani file video, menentukan beberapa format berfungsi sebagai penggantian untuk browser yang tidak mendukung semua format modern.
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Karena semua browser modern mendukung codec H.264, MP4 dapat digunakan sebagai pengganti browser lama. Versi WebM dapat menggunakan codec AV1 yang lebih baru, yang belum didukung secara luas, atau codec VP9 versi sebelumnya, yang didukung lebih baik daripada AV1, tetapi biasanya tidak mengompresi sebaik AV1.
Atribut poster
Gambar poster video ditambahkan menggunakan atribut poster pada elemen
<video>, yang memberi petunjuk kepada pengguna tentang konten video sebelum pemutaran
dimulai:
<video poster="poster.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Putar otomatis
Menurut Arsip HTTP, 20% video di seluruh web menyertakan
atribut autoplay. autoplay digunakan saat video harus segera diputar,
misalnya saat digunakan sebagai latar belakang video atau sebagai pengganti
GIF animasi.
GIF animasi dapat berukuran sangat besar, terutama jika memiliki banyak frame dengan
detail yang rumit. Bukanlah hal yang aneh bagi GIF animasi untuk menggunakan beberapa
megabyte data, yang dapat menghabiskan signifikan bandwidth yang lebih baik untuk digunakan
untuk resource yang lebih penting. Secara umum, Anda sebaiknya menghindari format gambar animasi,
karena padanan <video> jauh lebih efisien untuk jenis media ini.
Jika video putar otomatis merupakan persyaratan untuk situs, Anda dapat menggunakan
atribut autoplay langsung pada elemen <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>
Dengan menggabungkan atribut poster dan Intersection Observer API, Anda dapat
mengonfigurasi halaman untuk hanya mendownload video setelah berada di dalam area pandang.
Gambar poster dapat berupa placeholder gambar berkualitas rendah, seperti frame
pertama video. Setelah video muncul di area pandang, browser mulai
mendownload video. Hal ini dapat mempercepat waktu pemuatan konten dalam
area pandang awal. Di sisi negatifnya, saat menggunakan gambar poster untuk autoplay,
pengguna akan menerima gambar yang hanya ditampilkan sebentar hingga video
dimuat dan mulai diputar.
Pemutaran yang dimulai pengguna
Umumnya, browser mulai mendownload file video segera setelah parser HTML menemukan elemen <video>. Jika memiliki elemen <video> tempat
pengguna memulai pemutaran, Anda mungkin tidak ingin video mulai didownload
sampai pengguna berinteraksi dengannya.
Anda dapat memengaruhi apa yang didownload untuk resource video menggunakan atribut preload
milik elemen <video>:
- Menyetel
preload="none"akan memberi tahu browser bahwa tidak ada konten video yang harus dipramuat. - Menyetel
preload="metadata"hanya akan mengambil metadata video, seperti durasi video dan mungkin informasi sekilas lainnya.
Menyetel preload="none" kemungkinan akan menjadi kasus yang paling diinginkan jika Anda memuat
video yang mengharuskan pengguna memulai pemutaran.
Dalam kasus ini, Anda dapat meningkatkan pengalaman pengguna dengan menambahkan gambar poster.
Cara ini memberi pengguna beberapa konteks tentang isi video. Selain itu, jika
gambar poster adalah elemen LCP, Anda dapat meningkatkan prioritas gambar
poster menggunakan petunjuk <link rel="preload"> beserta
fetchpriority="high":
<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
Penyematan
Mengingat semua kerumitan dalam mengoptimalkan dan menayangkan konten video secara efisien, tidak masalah untuk melimpahkan masalah ini ke layanan video khusus seperti YouTube atau Vimeo. Layanan tersebut mengoptimalkan penayangan video untuk Anda, tetapi menyematkan video dari layanan pihak ketiga dapat memberikan efeknya sendiri terhadap performa, karena pemutar video tersemat sering kali dapat menyajikan banyak resource tambahan, seperti JavaScript.
Mengingat kenyataan ini, penyematan video pihak ketiga dapat memengaruhi performa halaman secara signifikan. Menurut Arsip HTTP, sematan YouTube akan memblokir rangkaian pesan utama selama lebih dari 1,7 detik untuk situs median. Memblokir thread utama dalam jangka waktu yang lama merupakan masalah pengalaman pengguna yang serius yang dapat memengaruhi Interaction to Next Paint (INP) halaman. Namun, Anda dapat melakukan penyusupan dengan tidak langsung memuat sematan saat pemuatan halaman awal, dan membuat placeholder untuk penyematan yang diganti dengan sematan video sebenarnya saat pengguna berinteraksi dengan sematan tersebut.
Demo video
Menguji pengetahuan Anda
Urutan elemen <source> di dalam elemen <video> induk tidak menentukan resource video mana yang akhirnya didownload.
Atribut poster milik elemen <video>
dianggap sebagai kandidat LCP.
Berikutnya: Mengoptimalkan font web
Selanjutnya dalam cakupan kita tentang cara mengoptimalkan tipe sumber daya tertentu adalah {i>font<i}. Mengoptimalkan font situs adalah hal yang sering diabaikan, tetapi dapat berdampak signifikan pada kecepatan pemuatan situs secara keseluruhan, dan metrik seperti LCP dan Pergeseran Tata Letak Kumulatif (CLS).