Studi Kasus Felicia Tan: Bandwidth Budget Turunkan Total Transfer Gambar dari 1,4 MB ke 480 KB dalam 18 Hari di Personal Brand Konsultan 2026

TL;DR: Personal brand Felicia Tan punya hero image 850 KB dan gallery 6 foto 1,4 MB total. Setelah pasang Next.js Image Bandwidth Budget, total transfer turun ke 480 KB, LCP mobile turun dari 3,4 ke 1,7 detik, bounce rate mobile turun 22 persen, dalam 18 hari.

Saat Vito Atmo mulai audit halaman personal brand Felicia Tan, satu fakta langsung muncul di PageSpeed Insights: Largest Contentful Paint di mobile 3,4 detik, dengan kontributor utama hero image yang tidak dikompresi optimal. Felicia adalah konsultan tax dengan trafik mayoritas dari mobile, jadi angka ini menjelaskan kenapa bounce rate mobile tinggi.

Yang menarik, banyak audit web menempatkan skor LCP sebagai output utama. Untuk pasar Indonesia, root cause biasanya bandwidth, bukan timing. Itu sebabnya pendekatan kali ini fokus ke Next.js Image Bandwidth Budget sebagai instrumen primer.

Masalah Awal

Halaman /tentang Felicia memuat 1 hero image PNG 850 KB dan galeri 6 foto JPG total 1,4 MB. Total transfer gambar per page load mobile mencapai 2,25 MB. Di koneksi 4G dengan median Indonesia 25 Mbps, ini menerjemah jadi waktu transfer netto 750 ms hanya untuk gambar, ditambah delay TCP/TLS.

Eksekusi Bandwidth Budget

Target: total transfer gambar mobile di bawah 600 KB, sesuai Next.js Image Bandwidth Budget. Langkah konkretnya:

1. Konversi format: PNG hero diganti AVIF + WebP fallback via next/image formats setting di next.config.ts.
2. Kompresi quality: Quality diset 75 untuk hero, 70 untuk gallery thumbnail, 80 untuk preview full.
3. Responsive sizes: Sizes attribute diset (max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw supaya mobile tidak download desktop variant.
4. Lazy gallery: 5 dari 6 foto gallery dipindah ke lazy load, hanya foto cover yang priority.
5. Monitor: Lighthouse CI dipasang dengan budget JSON, fail build kalau total resource gambar lewat 600 KB di mobile profile.

Hasil Setelah 18 Hari

Konsisten dengan apa yang dilihat di proyek Aris Setiawan, Felicia Tan terkait TTFB Budget, dan halaman pricing klien Vetmo, kombinasi format modern plus disiplin sizes attribute adalah leverage paling tinggi. Tidak butuh ganti CDN atau migrasi platform.

Tools yang Dipakai

• next/image dengan formats: ['image/avif', 'image/webp']
• Squoosh untuk benchmark kompresi sebelum production
• Lighthouse CI dengan budgets JSON
• Vercel Analytics untuk monitor field data LCP

Pertanyaan Umum

Apakah AVIF aman dipakai per Juni 2026?

Aman. Dukungan browser AVIF sudah di atas 94 persen menurut Can I Use. next/image otomatis serve WebP atau JPG fallback untuk browser lama, jadi tidak perlu khawatir.

Berapa quality optimal untuk konteks bisnis Indonesia?

Quality 70-75 untuk AVIF sudah secara visual setara JPG quality 88-92. Untuk konten yang butuh akurasi warna tinggi seperti produk fashion atau food, naikkan ke 80-82. Vito Atmo memakai quality 78 sebagai default untuk klien e-commerce Nalesha.

Apakah lazy loading mempengaruhi SEO?

Tidak negatif jika dipasang benar. Image yang lazy-loaded tetap di-crawl Googlebot. Yang berbahaya: lazy loading image LCP, karena akan dideteksi sebagai render-blocking soft. Pasang priority untuk LCP image saja.

Bagaimana memantau bandwidth budget tetap terjaga seiring waktu?

Pasang Lighthouse CI di pipeline deploy dengan budgets JSON. Pakai juga GEO Prompt Counter Evidence Rate untuk niche-specific monitoring konten, sehingga bandwidth budget dan engagement metric bisa dilihat bersamaan.

Penutup

Untuk personal brand profesional Indonesia yang mayoritas trafiknya mobile, bandwidth budget lebih impactful daripada sekadar mengejar skor lab Lighthouse. Eksekusi Felicia Tan menunjukkan: disiplin pada format modern, quality terukur, dan sizes attribute yang ketat bisa memangkas 80 persen byte transfer tanpa kompromi visual. Pasang monitoring otomatis, jangan ukur sekali lalu lupa.