Digital Transformation
Next.js Image Bandwidth Budget
TL;DR: Next.js Image Bandwidth Budget adalah ambang total transfer gambar per halaman, idealnya di bawah 600 KB untuk view mobile. Budget ini memastikan halaman tetap cepat di koneksi 4G dengan kualitas variabel di Indonesia.
Apa itu Next.js Image Bandwidth Budget?
Next.js Image Bandwidth Budget adalah aturan internal yang membatasi total ukuran gambar yang ditransfer per halaman. Berbeda dengan Next.js Image LCP Budget yang fokus ke timing, bandwidth budget fokus ke volume byte. Untuk pengguna mobile di Indonesia, kualitas koneksi 4G sangat bervariasi, sehingga pembatasan bandwidth jauh lebih impactful daripada sekadar mengejar skor Lighthouse di lab.
Acuan praktis: total transfer gambar di halaman mobile sebaiknya di bawah 600 KB, dan untuk halaman desktop di bawah 1,2 MB. Angka ini bisa dicapai dengan kombinasi format AVIF/WebP, kompresi quality 70-78, dan responsive sizes yang ketat.
Cara Menerapkan
| Strategi | Implementasi |
|---|---|
| Pilih format | next/image otomatis serve AVIF/WebP via formats di next.config.ts |
| Kompres quality | Pakai quality={75} untuk hero, quality={70} untuk gallery |
| Responsive sizes | sizes="(max-width: 768px) 100vw, 50vw" supaya browser pilih size optimal |
| Lazy loading | Default Next.js, kecuali pasang priority untuk LCP |
Kenapa Penting?
Di Indonesia, mayoritas trafik website datang dari mobile dengan koneksi yang sering tidak stabil. Menurut data Speedtest Global Index Mei 2026, median download mobile Indonesia berada di kisaran 25 Mbps, tapi varians di kota tier 2-3 jauh lebih besar. Vito Atmo memakai bandwidth budget ini sebagai default di semua proyek client UMKM, termasuk Vetmo dan Nalesha, sehingga halaman tetap loadable di koneksi terbatas.
Pertanyaan Umum
Apakah bandwidth budget mengorbankan kualitas visual?
Tidak signifikan jika dipasangkan dengan format modern. AVIF di quality 75 secara visual setara JPG quality 90, tapi ukurannya 30-50 persen lebih kecil.
Bagaimana memantau bandwidth budget secara berkelanjutan?
Pakai Vercel Analytics atau Lighthouse CI dengan budget JSON untuk fail build jika total resource gambar melewati ambang.
Istilah Terkait