Digital Transformation
Next.js Image CLS Budget
TL;DR: Next.js Image CLS Budget adalah alokasi maksimum pergeseran layout dari komponen next/image dalam total Cumulative Layout Shift halaman. Disepakati per template, biasanya 0,02-0,04, supaya kontribusi gambar tidak menelan budget CLS keseluruhan yang dipatok di bawah 0,1.
Apa itu Next.js Image CLS Budget?
Next.js Image CLS Budget adalah bagian dari CLS Budget yang dipatok khusus untuk elemen next/image. Komponen ini secara default reserve ruang via width dan height atau fill di container ber-aspect-ratio, jadi seharusnya tidak menambah pergeseran. Tetapi salah pakai prop, misal fill tanpa parent relative, sering memicu shift di hero atau galeri.
Pola pengelolaannya mirip dengan Next.js Image LCP Budget, tetapi fokusnya stabilitas visual selama dekode, bukan kecepatan paint.
Pola yang Sering Bocor
| Pola | Risiko CLS | Mitigasi |
|---|---|---|
fill tanpa container position: relative + ukuran tetap | Gambar lompat saat parent grow | Set wrapper relative aspect-[16/9] |
| Aspect ratio gambar berubah antar breakpoint | Layout berubah saat resize | Gunakan sizes + class responsive konsisten |
priority tidak diset di LCP image | Late paint pindah elemen di bawah | Tandai LCP image dengan priority |
| Galeri grid skeleton terlalu kecil | Konten geser saat gambar load | Skeleton harus match dimensi final |
Kenapa Penting?
Pada website bisnis berbasis next/image cache policy, gambar hero dan thumbnail produk dominan terhadap CLS karena ukurannya besar. Dalam audit yang saya jalankan di proyek Vetmo dan template UMKM 2025-2026, kontribusi next/image ke total CLS rata-rata 35-55 persen. Budget per komponen memaksa tim menulis wrapper konsisten, bukan satu-satu memperbaiki saat skor merah.
Pertanyaan Umum
Apakah next/image otomatis aman dari CLS?
Tidak otomatis. next/image hanya aman kalau prop dipakai benar. fill tanpa parent dengan ukuran eksplisit, atau gambar tanpa width/height di mode statis, tetap memicu shift.
Berapa angka ideal untuk Next.js Image CLS Budget?
Patokan praktis 0,02-0,04 per halaman untuk total kontribusi next/image. Sisa budget 0,06-0,08 dialokasikan untuk font, banner cookie, iklan, dan elemen interaktif lain.
Istilah Terkait