Performa video

Di modul sebelumnya, Anda telah mempelajari beberapa teknik performa terkait gambar, yang merupakan jenis resource yang banyak digunakan di web dan dapat menggunakan bandwidth yang signifikan jika tidak dioptimalkan dan tidak mempertimbangkan area tampilan pengguna.

Namun, gambar bukan satu-satunya jenis media yang umum terlihat di web. Video adalah jenis media populer lainnya yang sering digunakan di halaman web. Sebelum melihat beberapa kemungkinan pengoptimalan, Anda harus memahami terlebih dahulu cara kerja elemen <video>.

File sumber video

Saat bekerja dengan file media, file yang Anda kenali di sistem operasi Anda (.mp4, .webm, dan lainnya) disebut penampung. Penampung berisi satu atau beberapa aliran. Dalam sebagian besar kasus, ini adalah aliran 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 akan sangat membantu, karena hal ini membantu Anda mengompresi file media menggunakan bandwidth yang jauh lebih sedikit, yang menghasilkan waktu pemuatan halaman secara keseluruhan yang lebih rendah, 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 adalah dengan menggunakan FFmpeg:

ffmpeg -i input.mov output.webm

Perintah sebelumnya—meskipun sangat mendasar saat menggunakan FFmpeg—mengambil file input.mov dan menghasilkan file output.webm menggunakan opsi FFmpeg default. Perintah sebelumnya menghasilkan file video yang lebih kecil dan dapat diputar di semua browser modern. Menyesuaikan opsi video atau 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 menyesuaikan lebih lanjut, FFmpeg menawarkan tanda -crf saat mengompresi video tanpa menggunakan encoding bitrate 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 tanda -crf, tetapi penggunaannya bergantung pada codec yang Anda gunakan. Untuk mengetahui info selengkapnya, baca tentang faktor kecepatan bit konstan untuk mengenkode video dalam H.264, serta kualitas konstan saat mengenkode video dalam VP9.

Beberapa format

Saat bekerja dengan 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 untuk browser lama. Versi WebM dapat menggunakan codec AV1 yang lebih baru, yang belum didukung secara luas, atau codec VP9 sebelumnya, yang lebih didukung 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 kemungkinan isi 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 diputar segera—seperti saat digunakan sebagai latar belakang video atau sebagai pengganti GIF animasi.

GIF animasi bisa berukuran sangat besar, terutama jika memiliki banyak frame dengan detail yang rumit. GIF animasi sering kali menggunakan beberapa megabyte data, yang dapat menghabiskan bandwidth secara signifikan dan lebih baik digunakan untuk resource yang lebih penting. Anda sebaiknya menghindari format gambar animasi, karena pengganti <video> jauh lebih efisien untuk jenis media ini.

Jika video yang diputar otomatis adalah persyaratan untuk situs Anda, 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 agar hanya mendownload video setelah video berada dalam area tampilan. Gambar poster dapat berupa placeholder gambar berkualitas rendah, seperti frame pertama video. Setelah video muncul di area tampilan, browser akan mulai mendownload video. Hal ini dapat meningkatkan waktu pemuatan untuk konten dalam area pandang awal. Di sisi negatifnya, saat menggunakan gambar poster untuk autoplay, pengguna Anda menerima gambar yang hanya ditampilkan sebentar hingga video dimuat dan mulai diputar.

Pemutaran yang dimulai pengguna

Biasanya, browser mulai mendownload file video segera setelah parser HTML menemukan elemen <video>. Jika Anda memiliki elemen <video> tempat pengguna memulai pemutaran, sebaiknya Anda tidak ingin video mulai didownload hingga pengguna berinteraksi dengannya.

Anda dapat memengaruhi apa yang didownload untuk resource video dengan menggunakan atribut preload elemen <video>:

• Setelan preload="none" memberi tahu browser bahwa tidak ada konten video yang harus dimuat sebelumnya.
• Menyetel preload="metadata" hanya mengambil metadata video, seperti durasi video dan kemungkinan informasi singkat lainnya.

Menetapkan preload="none" kemungkinan merupakan kasus yang paling diinginkan jika Anda memuat video yang pemutarannya perlu dimulai oleh pengguna.

Anda dapat meningkatkan kualitas pengalaman pengguna dalam hal ini dengan menambahkan gambar poster. Hal ini memberikan beberapa konteks kepada pengguna tentang isi video. Selain itu, jika gambar poster adalah elemen LCP, Anda dapat meningkatkan prioritas gambar poster menggunakan petunjuk <link rel="preload"> bersama dengan fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Penyematan

Mengingat semua kompleksitas dalam mengoptimalkan dan menayangkan konten video secara efisien, wajar jika Anda ingin menyerahkan 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 efek tersendiri pada performa, karena pemutar video yang disematkan sering kali menggunakan banyak resource tambahan, seperti JavaScript.

Mengingat kenyataan ini, sematan video pihak ketiga dapat memengaruhi performa halaman secara signifikan. Menurut HTTP Archive, sematan YouTube memblokir thread utama selama lebih dari 1,7 detik untuk situs median. Memblokir thread utama dalam jangka waktu yang lama adalah masalah serius terkait pengalaman pengguna yang dapat memengaruhi Interaction to Next Paint (INP) halaman. Namun, Anda dapat mencapai kompromi dengan tidak memuat sematan segera selama pemuatan halaman awal, dan sebagai gantinya, membuat penampung untuk sematan yang digantikan oleh sematan video sebenarnya saat pengguna berinteraksi dengannya.

Demo video

Menguji pengetahuan Anda

Berikutnya: Mengoptimalkan font web

Selanjutnya dalam pembahasan kami tentang mengoptimalkan jenis resource tertentu adalah font. Mengoptimalkan font situs Anda sering kali diabaikan, tetapi dapat memengaruhi kecepatan pemuatan keseluruhan situs Anda secara signifikan, dan metrik seperti LCP dan Cumulative Layout Shift (CLS).