Digital Transformation
Native Lazy Loading
TL;DR: Native lazy loading adalah fitur bawaan browser yang menunda pemuatan gambar atau iframe hingga elemen tersebut hampir terlihat di layar. Cukup tambahkan atribut loading="lazy", tanpa pustaka JavaScript. Hasilnya halaman awal lebih cepat karena hanya memuat yang langsung dibutuhkan.
Apa itu Native Lazy Loading?
Dulu, menunda pemuatan gambar memerlukan pustaka JavaScript khusus. Kini browser modern mendukungnya secara bawaan lewat atribut loading="lazy" pada tag gambar dan iframe. Browser hanya memuat elemen saat pengguna menggulir mendekatinya.
Teknik ini langsung memengaruhi kecepatan tampil halaman dan terkait erat dengan Core Web Vitals, karena mengurangi beban unduhan di awal pemuatan.
Hal yang Perlu Diperhatikan
| Situasi | Saran |
|---|---|
| Gambar di bawah layar | Pakai loading="lazy" |
| Gambar utama di atas layar (hero, LCP) | Jangan lazy, justru beri prioritas |
| Iframe berat (peta, video) | Lazy load sangat membantu |
Catatan penting: jangan lazy-load gambar yang menjadi LCP. Menunda elemen utama justru memperlambat metrik kunci. Untuk elemen penting, gunakan priority hints sebaliknya.
Kenapa Penting?
Di halaman dengan banyak gambar, seperti katalog produk atau galeri portofolio, lazy loading memangkas data yang diunduh saat halaman pertama dibuka. Pengunjung di koneksi seluler merasakan halaman tampil lebih cepat. Spesifikasinya dijelaskan di web.dev.
Pertanyaan Umum
Apakah perlu pustaka tambahan?
Tidak untuk browser modern. Atribut loading="lazy" sudah cukup dan didukung luas. Pustaka hanya perlu jika menargetkan browser sangat lama.
Apakah semua gambar sebaiknya di-lazy-load?
Tidak. Gambar di atas layar, terutama yang menjadi LCP, sebaiknya dimuat normal atau diprioritaskan agar halaman terasa cepat.
Istilah Terkait