Next.js Image Priority Stability Budget

TL;DR: Next.js Image Priority Stability Budget adalah anggaran perilaku untuk komponen <Image priority> di Next.js supaya LCP, INP, dan CLS tetap stabil pada viewport pertama. Anggaran ini melengkapi Next.js Image Priority Budget yang fokus pada kuantitas, sedangkan stability budget memastikan tidak ada degradasi metrik antar build.

Apa itu Next.js Image Priority Stability Budget?

Next.js Image Priority Stability Budget adalah ambang batas variasi (delta) yang diizinkan pada LCP, INP, dan CLS untuk gambar yang memakai prop priority di komponen next/image. Tujuannya menjaga konsistensi pengalaman pertama, bukan sekadar nilai absolut. Stabilitas penting karena Web Vitals Google menghitung distribusi P75 lintas sesi, bukan satu pengukuran.

Cara Kerja

Anggaran ini bekerja sebagai gate di Lighthouse CI atau monitoring runtime. Tiga ambang yang biasa dipakai:

Jika delta melampaui anggaran, deploy ditahan atau ditandai untuk review. Praktik ini saya pakai di proyek Vetmo dan beberapa landing client untuk mencegah regresi tersembunyi setelah update dependency.

Kenapa Penting?

Untuk website bisnis Indonesia yang LCP-nya bergantung pada hero image, satu build buruk bisa menjatuhkan skor Web Vitals di Search Console. Praktik standar yang saya pakai di proyek client: pasang Lighthouse CI dengan anggaran ini sebelum production deploy, dan monitor via PageSpeed Insights API tiap minggu untuk konfirmasi field data.

Pertanyaan Umum

Apa beda priority budget dan priority stability budget?

Priority budget membatasi berapa banyak gambar yang boleh pakai priority. Stability budget membatasi seberapa besar perubahan metrik antar build untuk gambar yang sudah priority.

Apakah perlu untuk semua halaman?

Cukup untuk halaman LCP-sensitive: homepage, landing page kampanye, halaman produk utama. Halaman blog umumnya tidak perlu.