Cara Membuat Lazy Load Gambar

Lazy load gambar dibuat dengan menambahkan atribut loading="lazy" pada tag gambar di HTML. Satu atribut itu cukup untuk peramban modern, tanpa pustaka tambahan dan tanpa skrip. Peramban akan menunda pemuatan gambar sampai posisinya mendekati layar, sehingga gambar yang jauh di bawah tidak ikut diunduh saat halaman pertama dibuka.

Ini panduan kode, bukan fitur tool di layanan ini. Tool gambar di sini menyiapkan berkasnya: memperkecil dimensi, menurunkan mutu, mengubah format, dan menghapus metadata. Lazy load dipasang di kode halaman, dan itu pekerjaan penulis halaman atau pengembang yang memegang template.

Sebelum memasangnya, ada satu aturan yang perlu diingat: gambar utama di bagian atas halaman sebaiknya tidak ditunda. Kalau gambar pertama yang dilihat pengunjung ikut ditunda, halaman justru terasa lebih lambat karena isi utamanya menunggu.

Bentuk kode yang paling sederhana

Ini bentuk yang dipakai peramban modern:

<img src="foto-produk.webp" alt="Produk tampak depan" width="800" height="600" loading="lazy">

Atribut loading menerima tiga nilai. Nilai lazy menunda pemuatan sampai gambar mendekati layar. Nilai eager memuat gambar segera, dan itu nilai bawaan kalau atribut tidak ditulis. Ada juga nilai auto, yang membiarkan peramban memutuskan; dalam praktiknya nilainya sama dengan eager.

Jarak "mendekati layar" ditentukan peramban, bukan penulis halaman, dan nilainya berbeda antraperamban. Jadi gambar bisa mulai dimuat beberapa ratus piksel sebelum masuk layar. Ini disengaja supaya gambar sudah siap saat pengunjung tiba di posisinya.

Atribut lebar dan tinggi pada contoh di atas bukan hiasan. Keduanya memberi tahu peramban rasio gambar, sehingga ruangnya bisa dipesan sebelum gambar selesai dimuat. Tanpa keduanya, tata letak bergeser saat gambar muncul, dan itu masalah yang lebih mengganggu daripada waktu tunggu. Penjelasannya ada di cara menentukan dimensi gambar di HTML.

Gambar mana yang ditunda dan mana yang tidak

Tunda gambar yang berada jauh di bawah layar: foto di tengah artikel, gambar galeri, dan isi bagian bawah halaman. Jangan tunda gambar utama di bagian atas, logo di header, dan gambar yang menjadi bagian tampilan pertama.

Patokan praktisnya: kalau gambar kemungkinan terlihat sebelum pengunjung menggulir, jangan tunda. Kalau tidak, tunda. Halaman artikel biasanya punya satu gambar utama di atas dan puluhan gambar di bawah, jadi sebagian besar gambarnya bisa ditunda.

Kalau ragu, biarkan gambar dimuat segera. Menunda gambar yang ternyata terlihat lebih dulu membuat pengunjung menunggu, dan itu kerugian yang lebih besar daripada byte yang dihemat.

Kalau butuh kendali lebih

Atribut loading bawaan sudah cukup untuk sebagian besar halaman. Kalau butuh kendali yang lebih rinci, misalnya memuat gambar hanya setelah elemen tertentu terlihat, atau memuat gambar dari sumber yang berbeda menurut ukuran layar, ada dua jalur.

Jalur pertama adalah IntersectionObserver, API peramban yang melaporkan saat sebuah elemen masuk atau keluar area pandang. Dengan API ini, penulis halaman bisa menentukan sendiri kapan pemuatan dimulai, misalnya saat gambar berjarak 500 piksel dari layar.

Jalur kedua adalah pustaka lazy load pihak ketiga. Pustaka seperti ini berguna kalau halaman membutuhkan perilaku yang rumit, misalnya animasi saat gambar muncul atau penanganan galeri yang dinamis. Untuk halaman biasa, menambah satu pustaka hanya menambah satu berkas JavaScript yang harus diunduh, dan itu bertentangan dengan tujuan mempercepat halaman.

Kalau situs Anda memakai kerangka kerja modern, periksa dulu apakah komponen gambarnya sudah menangani penundaan secara bawaan. Sebagian kerangka kerja sudah memasangnya, dan menambahkan pengaturan sendiri bisa bertabrakan dengan perilaku bawaan itu.

Kesalahan yang sering terjadi

Menunda gambar utama. Ini kesalahan yang paling sering dan paling merugikan. Gambar pertama yang dilihat pengunjung harus dimuat segera. Kalau seluruh gambar di halaman diberi loading="lazy" tanpa terkecuali, gambar utamanya ikut menunggu.

Menunda gambar tanpa atribut lebar dan tinggi. Ruang gambar belum dipesan saat gambarnya belum dimuat, sehingga tata letak bergeser ketika gambarnya akhirnya muncul. Gejalanya justru terlihat lebih buruk pada halaman yang memakai lazy load, karena gambar baru muncul saat pengunjung menggulir.

Memasang lazy load pada gambar yang sudah dioptimalkan buruk. Lazy load menghemat byte yang tidak jadi diunduh, tetapi gambar yang sudah terunduh tetap berat. Keduanya perlu: berkas yang ringan dan pemuatan yang ditunda.

Memasang dua mekanisme sekaligus. Atribut loading dan pustaka JavaScript pada gambar yang sama bisa saling mengganggu. Pilih satu jalur.

Menunda gambar yang dipakai untuk tata letak. Gambar yang menentukan tinggi sebuah bagian halaman sebaiknya tidak ditunda, karena tinggi itu ikut menentukan posisi elemen lain.

Cara mengujinya

Buka halaman di peramban, buka panel pengembang, dan pilih tab jaringan. Muat ulang halaman dan perhatikan gambar mana yang terunduh. Gambar di bawah layar seharusnya belum muncul di daftar. Setelah Anda menggulir mendekati gambar itu, permintaannya baru muncul.

Periksa juga gambar utama. Ia harus terunduh sejak awal, sebelum pengunjung menggulir. Kalau ia baru muncul setelah halaman digulir, atributnya perlu diperiksa.

Langkah berikutnya adalah memeriksa tata letak. Gulir halaman dari atas ke bawah dan perhatikan apakah ada bagian yang bergeser setelah halaman tampak selesai dimuat. Kalau ada, periksa atribut lebar dan tinggi pada gambar di bagian itu.

Untuk menguji di ponsel, buka halaman yang sama di perangkat asli, bukan hanya di mode tampilan ponsel di komputer. Mode tampilan tidak meniru kecepatan jaringan seluler, dan justru kecepatan jaringan itulah yang membuat perbedaan paling terasa.

Hubungannya dengan ukuran berkas

Lazy load mengurangi byte yang diunduh, tetapi tidak mengurangi byte setiap gambar. Dua pekerjaan ini saling melengkapi: berkas yang ringan mengurangi berat tiap gambar, dan lazy load mengurangi jumlah gambar yang diunduh pada satu waktu.

Kalau halaman Anda memuat satu foto besar di bagian atas, lazy load tidak menolong, karena foto itu memang harus dimuat segera. Yang menolong adalah memperkecil dimensinya dan memilih format yang tepat. Urutannya dibahas di cara mengoptimalkan gambar untuk website.

Gambar untuk web sebaiknya juga disiapkan dalam beberapa ukuran supaya peramban bisa memilih yang sesuai lebar layar. Mekanisme itu dijelaskan di cara membuat gambar responsive, dan bisa dipakai bersama lazy load pada tag gambar yang sama.

Kapan lazy load tidak dipakai

Lazy load tidak dipakai kalau halaman hanya punya satu atau dua gambar. Manfaatnya terlalu kecil untuk ditambahkan, dan risikonya adalah gambar utama ikut tertunda karena salah pasang.

Lazy load juga tidak dipakai pada gambar yang perlu segera terlihat untuk alasan tampilan, misalnya gambar pembuka pada halaman arahan. Gambar seperti itu adalah isi utama halaman, bukan pelengkap.

Kalau situs Anda memakai penyedia gambar pihak ketiga, periksa apakah penundaan sudah diurus di sana. Menambahkan atribut yang sama bisa tidak berpengaruh, atau bertabrakan dengan skrip penyedianya. Baca dokumentasi penyedianya lebih dulu.

Kalau halaman Anda sudah cepat dan gambarnya sedikit, menambahkan lazy load tidak mendesak. Perbaikan sebaiknya dikerjakan pada masalah yang benar-benar ada, bukan karena praktik itu lazim dipakai.

Pertanyaan yang sering muncul

Apakah loading="lazy" didukung semua peramban? Peramban modern mendukungnya. Peramban lama yang tidak mengenal atribut itu akan mengabaikannya dan memuat gambar seperti biasa, sehingga halaman tetap berfungsi meskipun tanpa penundaan.

Apakah perlu JavaScript untuk lazy load? Tidak, untuk kebutuhan biasa. Atribut loading sudah cukup. JavaScript baru diperlukan kalau halaman membutuhkan kendali yang lebih rinci atau perilaku tambahan.

Apakah lazy load bisa dipakai bersama gambar responsive? Bisa. Atribut loading dan srcset bisa dipasang pada tag gambar yang sama. Peramban memilih berkas yang sesuai lebar layar, lalu menunda pemuatannya sampai mendekati layar.

Apakah lazy load memengaruhi peringkat mesin pencari? Mesin pencari modern menjalankan halaman seperti peramban, termasuk memuat gambar yang ditunda. Yang lebih berpengaruh pada peringkat adalah kecepatan halaman dan isi gambar itu sendiri, termasuk teks alternatifnya.

Setelah lazy load terpasang

Lazy load hanya satu bagian dari penyajian gambar di halaman. Lengkapi dengan atribut lebar dan tinggi, teks alternatif yang menjelaskan isi gambar, dan berkas yang sudah diperkecil. Urutan lengkapnya ada di Gambar untuk Web, dan gambaran seluruh pekerjaan gambar ada di Panduan Gambar dan Foto.