Pada modul sebelumnya, Anda mempelajari beberapa teknik performa yang terkait dengan yang merupakan jenis sumber daya yang banyak digunakan di web dan dapat memakai {i>bandwidth <i}yang signifikan jika tidak ada perhatian pengguna untuk mengoptimalkannya dan mengambil area pandang yang dipertimbangkan.
Namun, gambar bukanlah satu-satunya jenis media yang umum terlihat di web. Video
jenis media populer lainnya yang
sering digunakan di laman web. Sebelum melihat beberapa
pengoptimalan yang memungkinkan, penting untuk memahami terlebih dahulu bagaimana <video>
elemen ini berfungsi.
File sumber video
Saat menggunakan file media, file yang Anda kenali di sistem operasi Anda
(.mp4
, .webm
, dan lainnya) disebut penampung. Penampung berisi satu
atau streaming lainnya. Umumnya, ini adalah streaming video dan audio.
Anda dapat mengompresi tiap streaming menggunakan codec. Misalnya, video.webm
dapat berupa
penampung WebM yang berisi streaming video yang dikompresi menggunakan VP9, dan audio
streaming yang dikompresi menggunakan Vorbis.
Memahami perbedaan antara kontainer dan codec sangat membantu, karena alat ini membantu Anda mengompresi file media menggunakan {i>bandwidth<i} yang lebih sedikit, yang menyebabkan waktu muat halaman secara keseluruhan lebih rendah, serta berpotensi meningkatkan Largest Contentful Paint (LCP) halaman, yang merupakan metrik yang berfokus pada pengguna dan salah satu dari tiga Data Web Inti.
Salah satu cara untuk mengompresi file video adalah dengan menggunakan FFmpeg:
ffmpeg -i input.mov output.webm
Perintah sebelumnya—meskipun sesederhana seperti yang didapatkan saat menggunakan FFmpeg—mengambil
File input.mov
dan menghasilkan file output.webm
menggunakan FFmpeg default
lainnya. Perintah sebelumnya menghasilkan file video
yang lebih kecil yang berfungsi di semua
browser modern. Menyesuaikan video atau opsi audio yang ditawarkan FFmpeg dapat
membantu Anda mengurangi ukuran
file video lebih lanjut. Misalnya, jika Anda
menggunakan elemen <video>
untuk mengganti GIF, Anda harus menghapus trek audio:
ffmpeg -i input.mov -an output.webm
Jika Anda ingin sedikit menyesuaikan, FFmpeg menawarkan flag -crf
saat
mengompresi video tanpa menggunakan
encoding kecepatan bit variabel. -crf
adalah singkatan dari
Faktor Laju Konstan. 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 info selengkapnya, baca tentang faktor tarif konstan untuk
video dalam format H.264, serta kualitas konstan saat mengenkode video dalam
VP9.
Berbagai format
Saat bekerja dengan file video, menentukan beberapa format dapat digunakan sebagai pengganti 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 untuk browser lama. Versi WebM dapat menggunakan codec AV1 yang lebih baru, yang belum didukung secara luas, atau codec VP9 sebelumnya, lebih didukung daripada AV1, tetapi biasanya tidak mengompresi sebaik AV1.
Atribut poster
Gambar poster video ditambahkan menggunakan atribut poster
di <video>
, yang memberikan petunjuk kepada pengguna tentang konten video yang mungkin ditampilkan 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 mencakup
Atribut autoplay
. autoplay
digunakan saat video harus diputar
secara langsung—seperti saat digunakan sebagai latar belakang video atau sebagai pengganti
GIF animasi.
GIF animasi bisa berukuran sangat besar, terutama jika memiliki banyak bingkai
dengan detail yang rumit. Tidak jarang GIF animasi menggunakan beberapa
{i>megabytes<i} data, yang bisa menjadi menghabiskan {i>bandwidth <i}
yang lebih baik untuk digunakan
untuk mendapatkan
sumber daya yang lebih penting. Anda biasanya harus menghindari
format gambar animasi,
karena padanan <video>
jauh lebih efisien untuk jenis media ini.
Jika pemutaran otomatis video 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
dengan Intersection Observer API, Anda dapat
mengonfigurasi halaman Anda agar hanya mendownload video setelah video berada dalam area pandang.
Gambar poster
dapat berupa placeholder gambar berkualitas rendah, seperti gambar pertama
frame video. Setelah video muncul di area pandang, browser akan dimulai
mendownload video. Hal ini dapat mempercepat waktu pemuatan konten dalam
area pandang awal. Kelemahannya, saat menggunakan gambar poster
untuk autoplay
,
pengguna menerima gambar yang hanya ditampilkan sebentar hingga video
dimuat dan mulai diputar.
Pemutaran yang dimulai pengguna
Umumnya, browser mulai mendownload file video segera setelah HTML
parser menemukan elemen <video>
. Jika Anda memiliki elemen <video>
dengan
pengguna memulai pemutaran, Anda mungkin tidak ingin video tersebut mulai diunduh
hingga pengguna
berinteraksi dengannya.
Anda dapat memengaruhi apa yang didownload untuk resource video menggunakan <video>
atribut preload
elemen:
- Menyetel
preload="none"
akan memberi tahu browser bahwa tidak ada konten video seharusnya dipramuat. - Menyetel
preload="metadata"
hanya mengambil metadata video, seperti metadata video durasi dan mungkin informasi sepintas lainnya.
Menyetel preload="none"
kemungkinan adalah kasus yang paling diinginkan jika Anda memuat
video yang diperlukan pengguna
untuk memulai pemutaran.
Dalam kasus ini, Anda dapat meningkatkan pengalaman pengguna dengan menambahkan gambar poster
.
Cara ini memberi pengguna beberapa konteks tentang apa yang dibahas dalam video tersebut. Selain itu, jika
gambar poster adalah elemen LCP, Anda dapat meningkatkan poster
prioritas menggunakan petunjuk <link rel="preload">
beserta
fetchpriority="high"
:
<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
Penyematan
Dengan mempertimbangkan kompleksitas cara mengoptimalkan dan menyajikan konten video secara efisien, masuk akal untuk mengalihkan masalah ke layanan video khusus seperti YouTube atau Vimeo. Layanan tersebut mengoptimalkan penayangan video untuk Anda, tetapi menyematkan video dari layanan pihak ketiga dapat memiliki pengaruh performa, karena pemutar video tersemat sering kali dapat menyediakan banyak resource, seperti JavaScript.
Mengingat hal ini, sematan video pihak ketiga dapat memengaruhi halaman secara signifikan tingkat tinggi. Menurut Arsip HTTP, sematan YouTube memblokir rangkaian pesan utama selama lebih dari 1,7 detik untuk situs median. Memblokir thread utama untuk jangka waktu yang lama adalah masalah pengalaman pengguna serius yang dapat berdampak Interaction to Next Paint (INP) halaman. Namun, Anda dapat berkompromi dengan tidak memuat sematan langsung saat pemuatan awal halaman, dan sebagai gantinya membuat placeholder untuk sematan yang diganti dengan sematan video yang sebenarnya saat pengguna berinteraksi dengannya.
Demo video
Menguji pengetahuan Anda
Urutan elemen <source>
di dalam elemen
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 liputan kami tentang pengoptimalan jenis sumber daya tertentu adalah {i>font<i}. Mengoptimalkan font situs Anda sering kali diabaikan, tetapi dapat memiliki dampak yang signifikan terhadap kecepatan pemuatan situs web Anda secara keseluruhan, dan metrik seperti seperti LCP dan Pergeseran Tata Letak Kumulatif (CLS).