Digital Transformation
Next.js Image fetchPriority Budget
TL;DR: Next.js Image fetchPriority Budget membatasi jumlah gambar dengan fetchPriority="high" per halaman supaya prioritas LCP tidak terpecah. Per April 2026, batas sehat adalah 1 sampai 2 gambar per halaman. Penggunaan berlebih membuat browser menurunkan semua prioritas ke level normal.
Apa itu Next.js Image fetchPriority Budget?
Next.js Image fetchPriority Budget adalah kebijakan tim untuk memastikan hanya gambar paling kritis (biasanya elemen LCP) yang diberi atribut fetchPriority="high". Atribut ini memerintahkan browser memuat resource lebih awal. Jika dipakai di banyak elemen sekaligus, sinyal prioritas hilang. Konsep ini berhubungan erat dengan Next.js Image LCP Budget dan LCP Budget.
Cara Menerapkan
| Aturan | Penjelasan |
|---|---|
| Maksimal 2 gambar high | Per halaman, hindari lebih dari 2 |
| Gunakan untuk LCP saja | Hero, banner utama, foto profil di atas fold |
| Hindari di carousel | Slide kedua dan seterusnya cukup priority normal |
| Dokumentasikan di review PR | Tambah kolom checklist di template PR |
Referensi resmi: web.dev fetchpriority guide menjelaskan dampak ke prioritas resource fetch.
Kenapa Penting?
Tanpa budget, developer cenderung memakai fetchPriority untuk "jaga-jaga", padahal browser memang sudah punya heuristik. Saat semua gambar diprioritaskan, Largest Contentful Paint justru memburuk karena bandwidth dipakai untuk gambar non-kritis. Untuk website bisnis UMKM Indonesia dengan koneksi mobile, dampaknya bisa menambah 0,8 sampai 1,4 detik LCP.
Pertanyaan Umum
Berapa batas idealnya?
1 sampai 2 gambar high per halaman per April 2026. Di luar itu sinyal prioritas menjadi noise.
Apakah Next.js Image otomatis pakai fetchPriority?
Komponen Image di Next.js 15 memakai fetchPriority="high" hanya jika ditambah prop priority. Jadi audit prop priority Anda terlebih dahulu.