Digital Transformation
Next.js Image TBT Budget
TL;DR: Next.js Image TBT Budget adalah batas Total Blocking Time yang disisihkan untuk pekerjaan decoding dan layout komponen next/image supaya main thread tidak diblokir lebih dari 200 ms. Per Juni 2026, budget ini menjadi alat operasional supaya Largest Contentful Paint dan INP halaman bisnis tetap stabil saat gambar berat dimuat.
Apa itu Next.js Image TBT Budget?
Next.js Image TBT Budget adalah angka ambang yang ditetapkan tim untuk porsi Total Blocking Time yang boleh dihabiskan oleh komponen next/image. TBT sendiri menjumlahkan durasi tugas main thread yang melampaui 50 ms sejak First Contentful Paint sampai halaman interaktif. Pada halaman bisnis, decoding gambar berukuran besar sering menjadi penyumbang TBT terbesar. Konsep budget berasal dari pendekatan performance budget yang dipopulerkan oleh tim web.dev di Chrome.
Budget biasanya dipasang setelah audit Web Vitals. Tim mencatat berapa milidetik tugas decoding gambar berkontribusi ke TBT Budget keseluruhan, kemudian membaginya ke setiap halaman bisnis. Acuannya: gabungan tugas decoding next/image pada halaman bisnis tetap di bawah 80 ms supaya total TBT halaman aman di bawah 200 ms.
Cara Kerja Budget di Komponen next/image
| Aspek | Tanpa Budget | Dengan Budget |
|---|---|---|
| Format gambar | JPG/PNG mentah | AVIF/WebP dengan fallback |
priority | Dipasang semua | Hanya LCP candidate |
| Ukuran intrinsic | Mengikuti file | Disesuaikan sizes |
| Decode hint | Default browser | loading="lazy" selain hero |
Penerapan praktisnya: definisikan komponen <HeroImage /> yang mengunci priority, fetchPriority, dan sizes. Sisanya pakai <ContentImage /> tanpa priority dengan loading="lazy". Pendekatan ini selaras dengan dokumentasi resmi Next.js Image Component.
Kenapa Penting?
Untuk marketer dan pemilik website bisnis di Indonesia, mayoritas pengguna mengakses lewat perangkat mid-range Android dengan main thread yang lemah. Bila TBT melonjak, INP halaman ikut buruk, sehingga konversi formulir turun. Penerapan budget di lapisan next/image membuat performa terkendali tanpa harus menulis ulang halaman setiap kali tim desain mengganti aset.
Berdasarkan pengalaman membangun ulang website Vetmo dan Atmo, mengunci budget per komponen membantu tim handover antar developer dan desainer tetap rapi. Setiap gambar baru harus lolos checklist sebelum masuk produksi.
Pertanyaan Umum
Apakah TBT Budget sama dengan INP Budget?
Tidak. TBT diukur dari sisi lab (Lighthouse), sementara INP Budget diukur dari interaksi pengguna nyata. Keduanya saling melengkapi untuk diagnosa main thread.
Berapa angka aman untuk halaman bisnis?
Acuan praktis: total TBT halaman di bawah 200 ms, dengan porsi next/image tidak lebih dari 80 ms. Angka ini bisa lebih ketat untuk halaman landing yang kritikal.
Istilah Terkait