Dipublikasikan: 16 Agustus 2019, Terakhir diperbarui: 2 Juli 2026
Seperti elemen gambar, Anda mungkin juga ingin memuat video secara lambat. Video biasanya dimuat dengan elemen <video>, meskipun untuk video yang dihosting di layanan lain seperti YouTube, video tersebut dapat menggunakan <iframe> (dalam hal ini, lihat artikel di iframe pemuatan lambat).
Cara memuat <video> secara lambat bergantung pada kasus penggunaan, karena ada beberapa solusi yang berbeda.
Menggunakan atribut loading
Browser telah mulai mendukung atribut loading pada elemen media (<video> dan <audio>). Jika didukung, hal ini berarti media dan gambar poster dimuat secara lambat secara otomatis hanya dengan menambahkan atribut loading="lazy":
<video controls loading="lazy" preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Menggunakan loading="lazy" akan mencegah gambar poster dimuat sama sekali, hingga berada di dalam atau dekat area tampilan, lalu akan menggunakan atribut preload untuk menentukan jumlah video yang akan dimuat. Hal ini juga berarti video autoplay tidak akan diputar otomatis hingga berada di dalam atau dekat area tampilan. Atribut loading="lazy" berfungsi dengan atribut poster, preload, dan autoplay serta tidak menggantikan kebutuhan akan atribut tersebut.
Browser yang tidak mendukung atribut loading pada elemen media akan mengabaikan atribut ini, yang akan menyebabkan gambar poster dimuat segera, dan video dimuat berdasarkan atribut preload, yang akan kita bahas berikutnya.
Menggunakan atribut preload untuk memuat video secara lambat yang tidak diputar otomatis
Menghindari video yang diputar otomatis biasanya merupakan praktik terbaik karena memberikan kontrol kepada pengguna. Dalam kasus ini, menentukan atribut preload pada elemen <video> adalah cara terbaik untuk menghindari pemuatan seluruh video hingga diperlukan:
<video controls loading="lazy" preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Contoh sebelumnya menggunakan atribut preload dengan nilai none untuk mencegah browser memuat data video apa pun, bahkan saat berada di area tampilan. Atribut poster memberi elemen <video> placeholder yang akan menempati ruang saat video dimuat.
Di sebagian besar browser, preload secara default adalah metadata dan sebagian video dimuat sebelumnya menggunakan header Content-Range. Hal ini dapat menyebabkan lebih banyak data didownload daripada yang diinginkan—browser tidak dapat mengetahui byte tempat metadata disimpan, dan mungkin tidak disimpan di awal file. Oleh karena itu, peluang terbaik untuk menghindari pemuatan video adalah dengan menggunakan preload="none".
Hal ini dapat ditingkatkan lebih lanjut untuk memuat metadata sebelumnya saat pengguna mengarahkan kursor ke video dengan atribut onmouseenter (atau dengan pengendali peristiwa mouseenter yang setara):
<video controls
loading="lazy"
preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Hal ini tidak hanya mengurangi penundaan saat pengguna memutar video, tetapi juga menampilkan durasi video segera setelah mereka.
Video dapat memenuhi syarat sebagai kandidat LCP. Gambar poster akan lebih cepat dimuat daripada video sehingga jika ini adalah kandidat LCP, Anda harus menggunakan gambar poster, tetapi juga memuatnya sebelumnya dengan nilai atribut fetchpriority"high", karena pada saat penulisan, Anda tidak dapat menentukan fetchpriority untuk atribut poster:
<link rel="preload" href="one-does-not-simply-placeholder.jpg" as="image" fetchpriority="high">
<video controls preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Video yang merupakan elemen LCP tidak boleh menggunakan loading="lazy"—dengan cara yang sama seperti Anda tidak boleh memuat gambar LCP secara lambat video.
Untuk video yang bertindak sebagai pengganti GIF animasi
Video yang diputar otomatis biasanya digunakan untuk animasi cepat bergaya GIF. Meskipun GIF animasi banyak digunakan, GIF animasi lebih rendah daripada video yang setara dalam beberapa hal, terutama dalam ukuran file. GIF animasi dapat mencapai rentang beberapa megabyte data. Video dengan kualitas visual serupa cenderung jauh lebih kecil.
Menggunakan elemen <video> sebagai pengganti GIF animasi tidak sesederhana elemen <img>. GIF animasi memiliki tiga karakteristik:
- GIF animasi diputar secara otomatis saat dimuat.
- GIF animasi diulang terus-menerus (meskipun tidak selalu demikian).
- GIF animasi tidak memiliki trek audio.
Mencapai hal ini dengan elemen <video> terlihat seperti ini:
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Atribut loading="lazy" menghindari pemuatan video hingga dekat area tampilan. Atribut autoplay, muted, dan loop sudah jelas. playsinline diperlukan agar pemutaran otomatis terjadi di iOS.
Sekarang Anda memiliki pengganti video-sebagai-GIF yang dapat digunakan dan berfungsi di berbagai platform. Namun, bagaimana cara memuatnya secara lambat?
Untuk browser yang mendukungnya, loading="lazy" adalah opsi termudah:
<video loading="lazy" autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Untuk mendukung pemuatan video secara lambat di browser lain, Anda harus menggunakan JavaScript dan mengubah markup <video> Anda sesuai dengan hal tersebut:
<video class="lazy" preload="none" controls muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Anda akan melihat penghapusan autoplay, dan penambahan atribut class="lazy", preload="none", dan poster, yang memungkinkan Anda menentukan placeholder untuk menempati ruang elemen <video> hingga video dimuat secara lambat. Kemudian, kita menggunakan JavaScript Intersection Observer untuk mengaktifkan kembali pemutaran otomatis:
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
video.target.removeAttribute('preload');
video.target.removeAttribute('controls');
video.target.autoplay = true;
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
Dengan metode ini, video tidak diputar otomatis secara default dan hanya saat pengamat persimpangan mendeteksi video saat memasuki area tampilan. Selain itu, atribut controls menangani kasus saat JavaScript gagal. Secara keseluruhan, hal ini berarti Anda memiliki solusi video yang meniru perilaku GIF animasi, tetapi tidak menimbulkan penggunaan data intensif yang sama seperti GIF animasi, dan Anda dapat memuat konten tersebut secara lambat.
Library pemuatan lambat
Library berikut dapat membantu Anda memuat video secara lambat:
- vanilla-lazyload dan lozad.js adalah opsi yang sangat ringan yang hanya menggunakan Intersection Observer. Dengan demikian, keduanya memiliki performa yang sangat baik, tetapi harus diisi ulang sebelum dapat digunakan di browser lama.
- Jika Anda memerlukan library pemuatan lambat khusus React, Anda dapat mempertimbangkan react-lazyload. Meskipun tidak menggunakan Intersection Observer, library ini menyediakan metode pemuatan gambar secara lambat yang familiar bagi mereka yang terbiasa mengembangkan aplikasi dengan React.
Setiap library pemuatan lambat ini didokumentasikan dengan baik, dengan banyak pola markup untuk berbagai upaya pemuatan lambat Anda.
Karena atribut loading untuk <video> tersedia di lebih banyak browser, kami berharap solusi JavaScript (termasuk library) akan lebih jarang digunakan dibandingkan solusi bawaan, kecuali bagi mereka yang menginginkan kontrol lebih dari yang diizinkan.