Digital Transformation
Lazy Loading Gambar
TL;DR: Lazy loading gambar adalah teknik menunda pemuatan gambar sampai gambar itu hampir masuk ke area pandang pengguna. Hasilnya, halaman tampil lebih cepat dan menghemat data karena hanya memuat yang benar-benar dilihat. Penting: gambar utama di paruh atas halaman justru tidak boleh di-lazy-load agar tidak memperlambat LCP.
Apa itu Lazy Loading Gambar?
Lazy loading gambar menunda permintaan unduh gambar hingga pengguna menggulir mendekatinya. Tanpa teknik ini, browser memuat seluruh gambar sekaligus saat halaman dibuka, termasuk gambar yang berada jauh di bawah dan mungkin tidak pernah dilihat. Dengan lazy loading, beban awal halaman jadi lebih ringan.
Di web modern, lazy loading bisa diaktifkan dengan atribut sederhana loading="lazy" pada elemen gambar. Namun ada satu jebakan umum: menerapkannya pada gambar hero. Gambar hero biasanya adalah elemen yang diukur optimasi LCP, sehingga menundanya justru memperburuk skor kecepatan.
Kapan Dipakai dan Tidak
| Situasi | Rekomendasi |
|---|---|
| Gambar hero / paruh atas | Jangan lazy-load, beri prioritas muat |
| Gambar di bawah lipatan | Lazy-load aman dan dianjurkan |
| Galeri panjang | Lazy-load sangat membantu |
| Gambar dekoratif kecil | Pertimbangkan CSS atau ukuran kecil |
Kenapa Penting?
Bagi website bisnis di Indonesia dengan banyak pengunjung seluler, lazy loading memangkas data yang diunduh di awal dan mempercepat tampilan halaman. Dalam beberapa proyek yang saya tangani, menerapkan lazy loading pada galeri panjang sambil mengecualikan gambar hero memberi keseimbangan yang baik antara kecepatan dan pengalaman. Acuan teknisnya tersedia di dokumentasi MDN soal lazy loading. Untuk konteks struktur halaman yang ringan, lihat juga kedalaman klik.
Pertanyaan Umum
Apakah semua gambar sebaiknya di-lazy-load?
Tidak. Gambar penting di paruh atas halaman, terutama hero, sebaiknya dimuat lebih awal agar tidak memperlambat LCP. Lazy loading paling tepat untuk gambar di bawah area pandang awal.
Apakah lazy loading butuh library khusus?
Tidak selalu. Browser modern mendukung atribut bawaan loading="lazy", sehingga banyak kasus tidak lagi memerlukan pustaka tambahan.
Istilah Terkait