Lazy Load vs LCP: Kenapa Hero Image Website Bisnis Indonesia Tidak Boleh Di-Lazy Load di 2026

TL;DR: Lazy load default di gambar hero adalah salah satu penyebab LCP buruk yang paling sering saya temui di audit website bisnis Indonesia. Hero image adalah elemen LCP utama, dan menundanya berarti memperlambat skor Core Web Vitals 1-2 detik. Solusinya: kombinasikan priority (atau fetchpriority="high") di hero, lazy load di gambar bawah fold, dan preload font jika masih kurang.

Beberapa bulan lalu, seorang client e-commerce komplain skor PageSpeed mereka anjlok dari 92 ke 67 setelah migrasi ke framework baru. Tim developer mereka rajin mengikuti praktik "lazy load semua gambar" karena baca dokumentasi yang menyarankan itu untuk performa. Hasilnya ironis: halaman justru lebih lambat di mata Google.

Akar masalahnya satu baris kode: hero image utama mereka pakai loading="lazy" ketika seharusnya priority atau fetchpriority="high". Setelah perbaikan 5 menit, LCP turun dari 4.2 detik ke 1.8 detik. Tidak ada perubahan desain, tidak ada CDN baru. Cuma satu prop yang benar.

Kenapa Lazy Load Hero Image Merusak LCP

LCP mengukur kapan elemen terbesar yang terlihat di viewport awal selesai di-render. Untuk 70-80% website, elemen LCP adalah hero image atau heading di atas fold. Saat kamu pasang loading="lazy" di hero, browser menunggu IntersectionObserver mengkonfirmasi bahwa gambar mendekati viewport, baru mulai download. Padahal gambar tersebut SUDAH di viewport sejak halaman dibuka.

Konsekuensinya: browser idle 200-800 ms sebelum mulai download hero, sementara gambar lain sudah di-discover sejak awal. Untuk koneksi 4G di Indonesia yang ratenya bervariasi (rata-rata 15-25 Mbps berdasarkan data Speedtest 2024), penundaan ini menambah 1-2 detik ke LCP. Threshold "good" Google untuk LCP adalah 2,5 detik, sehingga selisih 1 detik bisa menjatuhkan halaman dari "good" ke "poor".

Cara Memilih Mana yang Lazy, Mana yang Priority

Aturan praktis berdasarkan beberapa proyek client:

Cara identifikasi elemen LCP: buka Chrome DevTools, tab Performance, jalankan recording. Lihat metrik LCP, klik untuk reveal elemen. Atau pakai PageSpeed Insights, scroll ke "Largest Contentful Paint element". Apa pun gambar/teks yang muncul di sana adalah yang HARUS di-priority.

Implementasi di Next.js

Untuk Next.js 15 dengan komponen next/image, next/image documentation menjelaskan dua opsi utama:

// Hero image: priority WAJIB
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
/>

// Gambar di bawah fold: lazy default
<Image
  src="/feature.jpg"
  alt="Feature"
  width={800}
  height={400}
/>

priority di next/image otomatis menambahkan fetchpriority="high" dan menonaktifkan lazy loading. Untuk HTML murni, kombinasi yang setara: <img loading="eager" fetchpriority="high">.

Studi Kasus: Atmo (LMS)

Saat membangun Atmo, learning management system buatan saya, halaman utama berisi hero illustration plus 4 ilustrasi "fitur" di bawahnya. Versi pertama saya pasang priority di kelima gambar karena mengira "lebih cepat lebih baik". Hasilnya: bandwidth jadi rebutan, hero malah lebih lambat karena harus berbagi koneksi dengan 4 gambar lain yang tidak penting.

Setelah revisi: hanya hero yang priority, sisanya lazy default. LCP turun dari 2.9 detik ke 2.1 detik. Pelajaran: priority adalah resource langka. Pakai untuk 1-2 elemen kritis saja per halaman, bukan untuk semua "yang penting".

Anti-pattern yang Sering Terjadi

Beberapa praktik yang merusak performa walau niatnya baik:

• Pakai priority di semua gambar produk e-commerce. Browser tidak tahu mana yang benar-benar prioritas, hasilnya semua jadi pelan.
• Lazy load gambar yang sebenarnya di viewport awal (misal di hero carousel slide pertama).
• Menambah library lazy load JavaScript (lozad.js, lazysizes) di atas native loading="lazy". Redundant, justru menambah JS payload.
• Lazy load font icon kecil di header. Tidak ada gain, justru menambah render delay.

Cara cek: buka Network tab DevTools, lihat waterfall. Hero image idealnya mulai download di 100-300 ms pertama dengan priority "High". Jika start time-nya 500 ms+ atau priority "Low", ada masalah.

Pertanyaan Umum

Apakah saya perlu library lazy load tambahan di 2026?

Tidak untuk mayoritas kasus. Native loading="lazy" didukung 95%+ browser modern, termasuk Safari iOS 15+. Library hanya relevan jika butuh kontrol granular seperti threshold custom atau placeholder berbasis blur hash kompleks.

Berapa banyak gambar yang boleh dipakai priority?

Maksimal 1-2 per halaman. Lebih dari itu, bandwidth terbagi dan tidak ada yang benar-benar prioritas. Untuk halaman dengan multiple hero (misal carousel), priority hanya slide pertama.

Bagaimana cara cek LCP element halaman saya?

Buka PageSpeed Insights di https://pagespeed.web.dev, masukkan URL, scroll ke bagian "Largest Contentful Paint element". Atau pakai Chrome DevTools, tab Performance, klik metrik LCP di summary. Elemen yang ditampilkan adalah yang harus di-prioritize.

Apakah lazy load mempengaruhi SEO?

Tidak negatif jika diimplementasi benar. Googlebot dapat render lazy-loaded images dengan IntersectionObserver atau native loading="lazy". Yang berbahaya: lazy load yang menunggu interaksi pengguna manual atau script tidak standar.

Bagaimana priorisasi untuk halaman article blog?

Featured image di atas judul: priority. Gambar dalam body: lazy default. Cover image di related posts di bawah: lazy default. Pola ini memastikan LCP cepat untuk pembaca yang baru landing dari Google.

LCP Adalah Soal Pilihan, Bukan Volume

Optimasi LCP bukan tentang load lebih banyak atau lebih cepat secara umum. Ini tentang memilih elemen mana yang prioritas dan menyingkirkan persaingan resource untuknya. Lazy load adalah alat bagus untuk mayoritas gambar di halaman, tapi pakai dengan hati-hati untuk hero. Audit dengan PageSpeed Insights setiap kali ada perubahan layout besar, dan pastikan elemen LCP tidak ikut tertunda hanya karena praktik "lazy load semua gambar" yang dipaksakan.