Digital Transformation
LCP Image (Largest Contentful Paint Image)
Gambar yang menjadi elemen terbesar di viewport dan diukur Google sebagai LCP. Optimasi LCP image langsung memperbaiki skor Core Web Vitals.
TL;DR: LCP Image adalah gambar yang menjadi elemen visual terbesar di viewport halaman saat dimuat dan menjadi penentu skor Largest Contentful Paint. Optimasi LCP image (preload, format modern, dimensi tepat, prioritas fetch) sering memberi peningkatan LCP 20 sampai 50 persen tanpa perubahan arsitektur.
Apa itu LCP Image?
LCP Image adalah elemen gambar yang dipilih browser sebagai konten terbesar yang terlihat di viewport saat halaman dimuat. Browser mencatat waktu paint elemen ini, dan angka itulah yang dilaporkan sebagai LCP. Pada landing page bisnis Indonesia, LCP image biasanya hero photo, banner promo, atau cover artikel.
Bayangkan halaman web sebagai panggung. LCP Image adalah aktor utama yang harus tampil paling cepat. Penonton (Google dan pengguna) menilai pengalaman dari kapan aktor utama muncul, bukan dari kapan tirai naik.
Cara Mengoptimasi LCP Image
| Teknik | Dampak Tipikal | Catatan |
|---|---|---|
<link rel="preload"> di head | LCP turun 200-500 ms | Wajib jika hero image dimuat via JS |
| Format AVIF atau WebP | Ukuran file turun 25-50% | Fallback JPEG untuk browser lawas |
Atribut fetchpriority="high" | Browser prioritaskan unduh | Pasangkan dengan Priority Hints |
Dimensi width & height | Cegah layout shift, bantu CLS | Wajib di responsive image |
| Image CDN dengan resize on-fly | Hemat bandwidth mobile | Lihat Image CDN |
Kenapa Penting?
Per April 2026, LCP tetap menjadi metrik Core Web Vitals yang paling sering melanggar threshold 2,5 detik di pasar Indonesia. Dari beberapa audit landing page klien yang Vito Atmo lakukan tahun ini, 7 dari 10 kasus LCP buruk berakar di LCP image yang tidak dioptimasi: ukuran file 800 KB ke atas, dimuat lazy, atau di-render setelah JavaScript framework selesai hydrate. Memperbaiki LCP image adalah quick win paling murah untuk SEO teknis.
Pertanyaan Umum
Apakah lazy loading boleh dipasang di LCP image?
Tidak. loading="lazy" justru menunda unduh dan memperburuk LCP. Pakai loading="eager" atau biarkan default untuk LCP image.
Bagaimana cara tahu mana elemen yang dianggap LCP?
Buka Chrome DevTools, panel Performance, jalankan recording, lalu cek marker LCP di timeline. Atau pakai PageSpeed Insights yang langsung menyoroti elemen LCP di laporan.
Istilah Terkait