Digital Transformation
Next.js Image Priority Budget
TL;DR: Next.js Image Priority Budget adalah batas berapa banyak komponen
next/imagedi sebuah halaman yang boleh memakai propertipriority. Properti ini memaksa preload, jadi memakainya untuk banyak gambar justru memperburuk LCP. Aturan praktisnya satu gambar hero saja, atau maksimal dua untuk layout split.
Apa itu Next.js Image Priority Budget?
Next.js Image Priority Budget adalah disiplin teknis di komponen next/image yang membatasi jumlah gambar dengan flag priority per halaman. Flag ini menghapus lazy-load dan menambah preload hint, sehingga browser mengunduh gambar tersebut lebih awal. Bila dipakai pada terlalu banyak gambar, persaingan bandwidth justru memperlambat LCP, metrik utama Core Web Vitals.
Anggaran ini bukan aturan resmi Next.js, melainkan praktik standar tim performance untuk menjaga halaman tetap cepat sambil mengikuti rekomendasi resmi di dokumentasi Next.js Image.
Aturan Praktis
| Layout | Priority Budget | Catatan |
|---|---|---|
| Hero penuh satu kolom | 1 | Hanya hero image |
| Hero dua kolom (teks + foto) | 1 | Foto hero saja |
| Galeri grid 3 kolom | 2 | Dua kartu paling atas |
| Halaman artikel panjang | 1 | Cover image saja |
| Halaman list (kategori, blog) | 0 | Lazy semua aman |
Kenapa Penting?
Marketer Indonesia yang punya website Next.js sering menambahkan priority ke banyak gambar agar terlihat tajam saat halaman dibuka. Akibatnya LCP justru naik di atas 2,5 detik karena gambar saling rebutan bandwidth, terutama di jaringan 4G yang masih dominan. Menetapkan anggaran ini mencegah keputusan ad hoc dan memudahkan komunikasi dengan developer.
Pertanyaan Umum
Apakah priority sama dengan eager loading?
Tidak. Eager loading hanya mematikan lazy-load. Priority menambah preload hint dan menaikkan prioritas fetch sehingga browser memprosesnya lebih awal.
Kalau saya pakai dua hero di carousel, perlu priority semua?
Tidak. Cukup slide pertama yang priority. Slide berikutnya diunduh setelah interaksi pertama atau auto-play.