Digital Transformation
Lazy Load (Pemuatan Tertunda)
Lazy load adalah teknik web yang menunda pemuatan resource (gambar, video, iframe, atau komponen) sampai mendekati viewport pengguna, sehingga halaman awal terbuka lebih cepat.
TL;DR: Lazy load adalah strategi memuat aset hanya ketika dibutuhkan, biasanya saat aset mendekati viewport pengguna. Teknik ini memangkas ukuran halaman awal dan mempercepat metrik First Contentful Paint. Browser modern mendukung native lazy loading lewat atribut
loading="lazy"pada gambar dan iframe sejak 2019. Yang sering keliru: jangan lazy load gambar hero karena bisa merusak LCP.
Apa itu Lazy Load?
Lazy load adalah pendekatan "muat saat dibutuhkan" yang berlawanan dengan eager load (muat semua di awal). Tanpa lazy load, browser mengunduh seluruh gambar di halaman saat halaman dibuka, walau gambar di paling bawah belum tentu dilihat. Dengan lazy load, browser menunda pengunduhan sampai gambar mendekati viewport. Hasilnya: ukuran transfer awal lebih kecil, halaman terasa lebih responsif, dan biaya bandwidth turun.
Implementasi paling sederhana: tambahkan loading="lazy" pada tag <img> atau <iframe>. Untuk Next.js, komponen next/image sudah lazy load by default kecuali kamu pakai prop priority. Untuk komponen React kompleks, React.lazy() dengan <Suspense> memungkinkan code-splitting per route.
Kapan Pakai dan Kapan Hindari
| Skenario | Lazy Load? | Alasan |
|---|---|---|
| Gambar hero di atas fold | TIDAK | Hero adalah elemen LCP, lazy load justru menunda render |
| Gambar produk di bawah fold | YA | Mengurangi initial payload |
| Iframe YouTube di artikel | YA | Iframe menambah ratusan KB JS |
| Komponen modal/dialog | YA | Hanya dibutuhkan saat user trigger |
| Logo header | TIDAK | Bagian critical path |
| Footer images | YA | Selalu di luar viewport awal |
Cara cek apakah lazy load sudah benar: buka DevTools Network tab, scroll halaman, lihat apakah gambar muncul saat di-scroll mendekati viewport. Jika muncul semua di awal, lazy load belum aktif. Untuk audit massal, jalankan Lighthouse dan cek peringatan "Defer offscreen images".
Kenapa Penting?
Lazy load membantu memenuhi target Core Web Vitals tanpa mengubah desain. Halaman dengan banyak gambar (e-commerce, portfolio, artikel panjang) bisa memangkas 50-70% data transfer awal hanya dengan lazy load. Untuk koneksi 4G di Indonesia yang ratenya bervariasi, hemat 1-2 MB di initial load berdampak nyata pada bounce rate dan persepsi kecepatan.
Pertanyaan Umum
Apakah lazy load mempengaruhi SEO?
Tidak negatif jika diimplementasi benar. Googlebot bisa render lazy-loaded images selama pakai standar HTML (loading="lazy" atau IntersectionObserver). Yang berbahaya: lazy load yang menunggu interaksi pengguna (misal scroll event manual yang lambat). Pastikan crawler tetap bisa "lihat" gambar dalam viewport simulasi mereka.
Native lazy load vs library JavaScript, mana lebih baik?
Native (loading="lazy") lebih ringan karena nol JS dan didukung 95%+ browser modern. Library seperti lozad.js relevan jika kamu butuh kontrol granular (threshold custom, fade-in animation) atau perlu support browser lama.
Istilah Terkait