Performa video

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

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).