Digital Transformation
Lazy Loading
Teknik menunda pemuatan gambar, video, atau komponen web sampai dibutuhkan user, sehingga halaman awal lebih ringan dan cepat tampil.
TL;DR: Lazy loading adalah teknik menunda loading resource (terutama gambar dan iframe) hingga mendekati viewport user. Cara termudah di HTML modern: tambahkan atribut
loading="lazy"pada tag<img>atau<iframe>. Hasilnya: LCP lebih cepat dan data tersimpan.
Apa itu Lazy Loading?
Lazy loading membalik urutan prioritas loading halaman. Tanpa lazy loading, browser mengunduh semua aset saat halaman dibuka. Dengan lazy loading, browser hanya mengunduh aset yang terlihat di layar saat itu, dan menunda sisanya sampai user scroll mendekatinya.
Teknik ini sudah native di browser modern sejak 2020. Untuk kontrol lebih halus, developer bisa pakai Intersection Observer API atau library seperti next/image di Next.js.
Implementasi Native
<img src="/hero.webp" alt="Dashboard analytics" loading="lazy" width="1200" height="800">
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>
Perhatian: jangan lazy-load gambar hero atau above-the-fold. Gambar LCP harus di-load eager supaya Core Web Vitals tetap bagus.
Kenapa Penting?
Untuk website bisnis Indonesia yang banyak diakses via mobile 4G, lazy loading bisa memangkas initial page weight 40-60%, tergantung jumlah gambar. Di proyek e-commerce Nalesha yang menampilkan katalog parfum panjang, penerapan lazy loading pada gambar produk di bawah fold menurunkan TTFB perceived dan menaikkan skor Lighthouse Performance dari 62 ke 88 di mobile.
Pertanyaan Umum
Apakah lazy loading buruk untuk SEO?
Tidak jika diterapkan benar. Google Bot sekarang memahami loading="lazy" native. Baca panduan resmi Google untuk memastikan crawler tetap bisa mengindeks konten.
Gambar hero saya di-lazy load, kok skor LCP malah jelek?
Itu anti-pattern. Gambar LCP (biasanya hero) harus loading="eager" atau bahkan fetchpriority="high" supaya browser prioritaskan download-nya.