Lazy Loading

Halaman katalog atau laporan panjang sering memuat puluhan gambar dan beberapa iframe, sementara layar pertama hanya memuat sebagian kecil darinya. Tanpa pengaturan tambahan, browser mengunduh semuanya segera setelah parsing — termasuk gambar yang baru terlihat setelah pengunjung menggulir beberapa halaman ke bawah. Byte yang diunduh terlalu dini berarti berebut bandwidth dengan konten yang memang harus tampil lebih dulu. Atribut loading="lazy" memberi cara resmi bawaan HTML untuk menunda unduhan tersebut.

Cara Kerja loading=“lazy” #

Atribut loading mengatur momen unduhan dengan dua nilai. Nilai bawaan eager memuat gambar segera, sekalipun berada di luar viewport; nilai lazy menunda unduhan hingga gambar mendekati viewport pada jarak yang dihitung browser sendiri. Jarak itu sengaja tidak nol: browser menyisihkan jarak aman agar gambar selesai diunduh tepat pada saat pengunjung menggulir sampai ke posisinya. Atribut ini berlaku pada img dan iframe, dan perilakunya ditetapkan pada HTML Living Standard melalui lazy loading attribute.

<img src="galeri-07.jpg" alt="Pengunjung di stand dapur" loading="lazy" width="600" height="400">

<iframe src="peta-interaktif.html" title="Peta lokasi Toko Budi" loading="lazy" width="600" height="400"></iframe>

Pada potongan di atas, gambar galeri dan iframe peta hanya diunduh ketika keduanya mulai mendekati layar. Atribut title pada iframe wajib melekat sebagai nama aksesibel, dan width serta height tetap ditulis agar ruangnya tersedia sejak awal.

Lazy atau Eager: Memilih Kandidat yang Tepat #

Aturan pilihannya mengikuti satu pertanyaan: apakah gambar berada di layar pertama sebelum gulir? Gambar yang menjawab ya — banner hero, ilustrasi utama artikel — justru paling membutuhkan unduhan cepat, karena biasanya menjadi elemen konten terbesar yang tampil; metrik LCP (Largest Contentful Paint) mengukur waktu hingga elemen tersebut selesai dirender, dan menundanya dengan lazy memperburuk nilai. Gambar di bawah lipatan (below the fold) — galeri, daftar produk panjang, iframe peta atau widget pihak ketiga — adalah kandidat lazy yang ideal.

Lazy Loading Berbasis JavaScript #

Sebelum atribut native tersedia, lazy loading dibangun dengan JavaScript: script memantau posisi gambar memakai Intersection Observer API, lalu mengisi src saat gambar mendekati viewport — teknik yang didokumentasikan MDN pada panduan lazy loading. Pendekatan ini masih dipakai untuk kebutuhan kontrol khusus, tetapi membawa syarat yang tidak dimiliki atribut native: seluruh mekanismenya hanya berjalan bila JavaScript aktif di browser pengunjung. Bila script gagal dimuat atau JavaScript dimatikan, gambar tidak pernah tampil. Atribut loading="lazy" bekerja langsung di level browser tanpa JavaScript sama sekali, sehingga menjadi pilihan bawaan yang disarankan.

Contoh: Halaman Panjang dengan Pola yang Benar #

File berikut menyusun halaman laporan panjang dengan pola yang benar: satu gambar utama eager di atas, empat gambar galeri lazy di bawahnya, dan satu iframe peta lazy. Semua file gambar bersifat hipotetis; sediakan sendiri saat mencoba.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laporan Pasar Pagi</title>
</head>
<body>
  <h1>Laporan Pasar Pagi</h1>
  <img src="pasar-pagi.jpg" alt="Suasana pasar pagi di Jl. Melati No. 10" width="1200" height="800">
  <p>Laporan lengkap dari warung Budi dan Siti di ujung Jl. Melati No. 10.</p>

  <h2>Galeri Suasana</h2>
  <img src="galeri-01.jpg" alt="Stand sayur di baris depan" loading="lazy" width="600" height="400">
  <img src="galeri-02.jpg" alt="Pedagang menimbang beras" loading="lazy" width="600" height="400">
  <img src="galeri-03.jpg" alt="Antrian pembeli di kios daging" loading="lazy" width="600" height="400">
  <img src="galeri-04.jpg" alt="Keranjang buah warna oranye" loading="lazy" width="600" height="400">

  <h2>Lokasi Pasar</h2>
  <iframe src="peta-interaktif.html" title="Peta lokasi pasar" loading="lazy" width="600" height="400"></iframe>
</body>
</html>

Output yang Dihasilkan:

Saat halaman dibuka:
  - pasar-pagi.jpg segera diunduh (eager, kandidat LCP)
  - Empat gambar galeri dan iframe peta menunggu; byte belum diunduh
Saat pengunjung menggulir mendekati galeri:
  - galeri-01.jpg s.d. galeri-04.jpg dan iframe peta mulai diunduh
    satu per satu sesuai jarak yang dihitung browser

Mari kita telaah peran setiap bagian:

1. Baris 10 (img utama): tanpa atribut loading — perilaku bawaan eager, tepat untuk kandidat LCP di layar pertama.
2. Baris 14–17 (empat img galeri): masing-masing membawa loading="lazy"; unduhan menunggu hingga mendekati viewport.
3. Baris 20 (iframe): peta interaktif ikut lazy; title melekat sebagai nama aksesibel.
4. width dan height di semua gambar: rasio tersedia sejak awal, sehingga ruang lazy yang belum terisi tidak menimbulkan layout shift.

Unduhan gambar kini tertib: yang terlihat datang lebih dulu, yang jauh menunggu giliran. Pihak yang sama-sama berebut bandwidth adalah script; chapter berikutnya mengatur momen unduhan dan eksekusinya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Lazy loading
• MDN Web Docs — Elemen img
• web.dev — Optimize LCP

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laporan Pasar Pagi</title>
</head>
<body>
  <h1>Laporan Pasar Pagi</h1>
  <img src="pasar-pagi.jpg" alt="Suasana pasar pagi di Jl. Melati No. 10" width="1200" height="800">
  <p>Laporan lengkap dari warung Budi dan Siti di ujung Jl. Melati No. 10.</p>

  <h2>Galeri Suasana</h2>
  <img src="galeri-01.jpg" alt="Stand sayur di baris depan" loading="lazy" width="600" height="400">
  <img src="galeri-02.jpg" alt="Pedagang menimbang beras" loading="lazy" width="600" height="400">
  <img src="galeri-03.jpg" alt="Antrian pembeli di kios daging" loading="lazy" width="600" height="400">
  <img src="galeri-04.jpg" alt="Keranjang buah warna oranye" loading="lazy" width="600" height="400">

  <h2>Lokasi Pasar</h2>
  <iframe src="peta-interaktif.html" title="Peta lokasi pasar" loading="lazy" width="600" height="400"></iframe>
</body>
</html>