Cara Pasang fetchPriority Budget di Website Bisnis Next.js 2026: Kerangka 5 Langkah supaya Sinyal Prioritas Tetap Fokus

TL;DR: fetchPriority Budget di Next.js Image membatasi maksimal 1 sampai 2 gambar per halaman yang boleh memakai priority high. Tanpa batas, sinyal prioritas hilang dan LCP justru memburuk. Kerangka 5 langkah berikut membantu marketer dan developer menerapkan batas secara konsisten di repo Next.js 15.

Dalam beberapa audit terakhir di klien Yuanita Sekar dan Vetmo, saya menemukan pola yang sama. Developer menambah prop priority di hampir semua komponen Image karena ingin "memastikan gambar cepat tampil". Hasilnya kebalikannya: LCP rata-rata naik dari 1,9 ke 2,6 detik di koneksi mobile. Browser memperlakukan terlalu banyak sinyal high sebagai noise.

Artikel ini membahas cara memasang Next.js Image fetchPriority Budget secara sistematis, lengkap dengan checklist PR review.

Masalah: Sinyal Prioritas yang Saling Memakan

Atribut fetchPriority diperkenalkan Chrome 101 (April 2022) untuk membantu browser memilih resource paling kritis di fase awal load. Spesifikasinya jelas: gunakan untuk LCP element. Praktiknya, di banyak codebase Next.js 15, prop priority dipasang di hero, banner, foto produk, hingga icon footer.

Akibatnya, browser tidak punya rujukan mana yang benar-benar paling penting. Dokumentasi resmi web.dev fetch-priority menyebut, ketika lebih dari dua resource bersaing high, browser bisa menurunkan semua ke level normal. Ini yang membuat metrik LCP Budget sering meleset dari target 2,5 detik.

Kerangka 5 Langkah

Studi Kasus Vetmo: Dari 6 priority ke 1

Saat membangun ulang Vetmo (platform pet care), tim awal memakai prop priority di 6 komponen sekaligus: hero, banner promo, foto dokter, slide carousel, ilustrasi panduan, dan footer logo. LCP di Pixel 5 (network throttling 4G) tercatat 2,9 detik.

Setelah audit, kami menyisakan priority hanya pada hero. Hasil setelah deploy: LCP turun ke 1,8 detik dalam 14 hari, terverifikasi via CrUX Dashboard. Tidak ada perubahan ukuran gambar, hanya pengurangan sinyal prioritas. Pola serupa terulang di project Atmo LMS.

Cara Menerapkan di Repo

Tambah aturan ESLint atau code review note: "priority hanya untuk komponen yang menjadi LCP element di route ini." Untuk komponen yang ragu, jalankan Lighthouse atau Web Vitals Attribution API untuk identifikasi LCP target sebenarnya.

Di template PR review, sisipkan checklist:

• Maksimal 2 Image dengan priority per halaman
• LCP element teridentifikasi dengan jelas
• Tidak ada priority di carousel slide kedua dan seterusnya

Pertanyaan Umum

Berapa batas idealnya?

1 sampai 2 gambar dengan priority per halaman. Di luar itu sinyal hilang.

Apakah aman dipakai untuk hero dan foto profil bersamaan?

Aman, asal keduanya benar-benar di atas fold dan menjadi LCP candidate.

Bagaimana cara cek LCP element halaman saya?

Buka DevTools Performance panel, jalankan recording, lihat baris "LCP" di Web Vitals lane.

Apa beda budget ini dengan Next.js Image LCP Budget?

LCP Budget mengatur target waktu LCP. fetchPriority Budget mengatur jumlah sinyal prioritas. Keduanya komplemen, bukan duplikasi.

Penutup Aplikatif

Atribut fetchPriority bukan tombol "bikin cepat". Ia sinyal yang efektif hanya ketika dipakai hemat. Tim yang sudah memasang [Core Web Vitals Budget](/glosarium/core-web-vitals) sebaiknya menambah baris fetchPriority Budget di dokumen internal, tepat di samping LCP dan INP. Per April 2026, aturan 1 sampai 2 priority per halaman adalah standar minimal yang layak diikuti tim Next.js mana pun.