Lazy Loading Images

Galeri kedai memuat 20 foto sekaligus pada saat halaman dibuka, padahal pengunjung baru melihat dua foto teratas. Delapan belas request sisanya terjadi untuk gambar yang berada di luar layar — memakan kuota pengunjung dan memperlambat tampilan awal. Atribut loading="lazy" membetulkan kebiasaan ini tanpa satu baris JavaScript pun.

Mekanisme loading=“lazy” #

Aturannya: atribut ini memerintahkan browser menunda pemuatan gambar yang berada di luar viewport sampai gambar itu mendekati terlihat — saat pengguna menggulir mendekatinya, barulah request dikirim.

Dukungannya kini luas: loading="lazy" berstatus Baseline widely available sekitar Maret 2022, sehingga seluruh browser utama menerapkannya. Browser lama hanya mengabaikan atribut ini dan memuat gambar seperti biasa — perilaku yang aman, sehingga atribut ini boleh dipasang tanpa syarat tambahan.

Tiga Nilai Atribut loading #

Contoh: Galeri Empat Foto #

<h2>Galeri Kedai</h2>
<img src="assets/galeri/espresso.jpg" alt="Cangkir espresso dengan crema keemasan" loading="lazy">
<img src="assets/galeri/kopi-susu.jpg" alt="Kopi susu gula aren dengan es batu" loading="lazy">
<img src="assets/galeri/matcha.jpg" alt="Minuman matcha berwarna hijau pekat" loading="lazy">
<img src="assets/galeri/croissant.jpg" alt="Croissant panggang berisi cokelat" loading="lazy">

Hasil render: judul dan seluruh teks halaman tampil seketika; foto-foto yang berada di luar viewport belum diambil. Saat pengguna menggulir dan sebuah foto mendekati terlihat, browser memuatnya — pengalaman bergulir tetap mulus karena browser mengambil sebelum foto benar-benar masuk layar.

Mari kita telaah penerapannya:

1. loading="lazy" pada tiap img: keempat foto yang berada di luar viewport pertama ditunda pemuatannya.
2. Konteks teks tetap cepat: permintaan jaringan awal hanya mencakup gambar yang benar-benar terlihat.
3. Request terjadi bertahap: setiap foto diambil pada waktunya, bukan semuanya di depan.
4. Aturan lain tetap berlaku: alt serta width/height tetap ditulis seperti biasa — atribut ini menambah strategi pemuatan, bukan menggantikan aturan sebelumnya.

Gulir demo berikut sampai bawah — area demo sengaja dibuat lebih pendek dari isinya agar penggulirannya terlihat. Buka panel Network di DevTools (saring Img) pada berkas sungguhan, dan foto-foto di luar layar akan tercatat termuat satu per satu saat mendekati terlihat:

Pada demo, keempat foto diganti placeholder SVG ringan; perilaku pemuatannya sama — ditunda sampai gambar mendekati viewport, lalu dimuat tepat saat dibutuhkan.

Gambar di Atas Sebaiknya Tidak lazy #

Atribut ini justru bukan untuk semua gambar. Gambar pada viewport pertama — hero, foto utama, logo besar — sebaiknya dimuat segera: beri eager, atau cukup tanpa atribut loading karena bawaannya memang memuat segera.

Alasannya bernama LCP (Largest Contentful Paint): penanda waktu kemunculan elemen terbesar pada viewport pertama — dan di banyak halaman, elemen terbesar itu justru gambar utamanya. Menunda gambar utama berarti menunda penanda kualitas halaman itu.

Ringkasan #

• loading="lazy" menunda request gambar di luar viewport sampai mendekati terlihat.
• Nilainya tiga: auto (bawaan), eager (segera), lazy (ditunda) — Baseline widely available sekitar Maret 2022.
• Gunakan lazy untuk gambar jauh di bawah; biarkan gambar atas memuat segera demi LCP.
• Atribut yang sama juga berlaku untuk iframe.

Seluruh atribut utama gambar kini sudah lengkap — chapter penutup merangkum kesalahan yang paling sering menyertai pemakaiannya.