Digital Transformation
Next.js Image LCP Budget
TL;DR: Next.js Image LCP Budget adalah anggaran ukuran file dan waktu render untuk gambar above-the-fold (biasanya hero) supaya skor LCP tetap di bawah 2,5 detik. Praktik standar: ukuran terkirim di bawah 120 KB di mobile, format AVIF/WebP, dan preload otomatis via next/image priority.
Apa itu Next.js Image LCP Budget?
Next.js Image LCP Budget adalah disiplin teknis menyiapkan gambar utama Next.js dengan batasan ukuran dan timing supaya berkontribusi positif ke LCP (Largest Contentful Paint), salah satu pilar Core Web Vitals. Tanpa budget eksplisit, gambar hero sering menjadi titik gagal LCP bahkan di website Next.js yang sudah pakai App Router.
Anggap saja seperti budget kalori. Anda boleh makan apa saja, tapi total kalori per hari ada batasnya. Untuk halaman bisnis Next.js di koneksi 4G median Indonesia, batas LCP image yang aman adalah 120 KB terkirim dan render di bawah 1,8 detik. Lihat juga Next.js Image Cache Policy untuk pengaturan caching.
Komponen Budget LCP Image
| Komponen | Anggaran Sehat |
|---|---|
| Ukuran file terkirim (mobile) | <= 120 KB |
| Format | AVIF lalu WebP fallback |
| priority prop di next/image | wajib untuk hero |
| sizes prop | wajib, sesuai breakpoint |
| Preload | otomatis oleh Next.js bila priority true |
| Waktu render LCP | <= 1,8 detik (target aman dari 2,5 detik) |
Pastikan domain image sudah di-allowlist di next.config.ts (Supabase Storage atau CDN). Cek metrik aktual di CrUX Dataset.
Kenapa Penting?
Gambar hero adalah elemen LCP di 70 persen halaman bisnis Indonesia berdasarkan audit Vito Atmo pada Q1 2026. Budget yang eksplisit mencegah developer mendrop gambar 800 KB ke hero hanya karena desainer menyerahkan PNG mentah dari Figma. Disiplin ini juga melindungi konversi: penelitian Web Vitals menunjukkan LCP naik 1 detik berkorelasi dengan turunnya konversi 7 sampai 12 persen pada e-commerce.
Tim Vetmo dan Nalesha menerapkan budget ini sejak Februari 2026 dan menurunkan LCP median dari 3,4 detik ke 1,9 detik dalam 5 minggu. Dokumentasi resmi: web.dev tentang LCP.
Pertanyaan Umum
Apakah next/image otomatis menjamin LCP bagus?
Tidak. next/image membantu format dan responsive sizes, tapi tanpa priority, sizes yang tepat, dan kontrol ukuran sumber, LCP tetap bisa lambat.
Berapa breakpoint sizes minimum?
Minimum tiga: mobile (<=640px), tablet (<=1024px), desktop. Contoh: sizes="(max-width: 640px) 100vw, (max-width: 1024px) 75vw, 50vw".
Istilah Terkait