Studi Kasus Felicia Tan: Pakai Bundle Analyzer Pangkas First-Load JS Konsultasi dari 312 ke 168 KB di 2026

TL;DR: Konsultan personal branding Felicia Tan memangkas first-load JavaScript dari 312 KB ke 168 KB dalam 2 minggu pakai Bundle Analyzer di Next.js. INP halaman booking turun dari 240 ms ke 110 ms, dan submission rate naik 14 persen di kanal organik. Pemicunya satu library chart yang ternyata di-import secara eager di seluruh layout.

Awal Maret 2026, Felicia Tan mengeluhkan halaman booking yang terasa berat di handphone klien. Field Data dari CrUX menunjukkan INP P75 di 240 ms, di atas threshold "Needs Improvement" Google. LCP masih hijau di 2,1 detik, tapi tombol terasa "ngambang" saat dipencet pertama kali.

Diagnosa cepat lewat PerformanceObserver menunjuk ke skrip pihak ketiga, tapi setelah Partytown dipasang INP cuma turun ke 210 ms. Sisanya ternyata bundle aplikasi sendiri yang kebanyakan.

Masalah: Bundle Tebal di Halaman yang Tidak Butuh Semua

Audit next build menunjukkan first-load JavaScript halaman /konsultasi di angka 312 KB gzip. Untuk standar Felicia yang sebagian besar visitor di 4G Indonesia, ini di atas batas sehat. Setiap 100 KB extra JavaScript akan menggeser INP 200-400 ms sesuai panduan web.dev.

Hipotesis tim Vito Atmo: ada library berat yang ter-import di seluruh layout padahal cuma dipakai di satu route.

Eksperimen: Bundle Analyzer 30 Menit

npm install --save-dev @next/bundle-analyzer
ANALYZE=true npm run build

Treemap yang muncul langsung menjawab. Satu kotak besar warna jingga menempati hampir 90 KB gzip: library chart yang dipakai di dashboard internal Felicia, tapi keburu di-import di app/layout.tsx karena ada widget kecil di footer.

Tiga aksi yang diambil dalam 2 minggu:

Total pangkasan: 144 KB gzip. First-load JavaScript halaman /konsultasi turun ke 168 KB.

Hasil: INP Turun, Submission Rate Naik

Dalam 28 hari setelah deploy, Field Data CrUX merangkum:

• INP P75 turun dari 240 ms ke 110 ms (kategori "Good")
• LCP P75 turun dari 2,1 detik ke 1,7 detik
• Submission rate kanal organik naik dari 4,8 persen ke 5,5 persen, atau setara +14 persen relatif

Konversi tambahan ini setara 18 booking konsultasi extra per bulan untuk Felicia, tanpa tambahan iklan.

Pelajaran: Audit Sebelum Tambah, Bukan Setelah

Banyak tim Indonesia mendiagnosa performa setelah keluhan masuk. Pola yang lebih murah: jalankan Bundle Analyzer setiap PR yang menambah dependency. CI Vercel sudah punya hook untuk menjalankan ANALYZE=true, jadi setiap merge bisa otomatis menampilkan delta ukuran bundle di komentar PR.

Studi Lighthouse Score Distribution 2025 dari HTTP Archive menyebutkan bahwa median JavaScript per situs Indonesia naik 18 persen tahun ke tahun. Tanpa audit rutin, situs akan terus membengkak meski tim merasa "tidak menambah apa-apa".

Pertanyaan Umum

Apakah Bundle Analyzer butuh konfigurasi rumit?

Tidak. Cukup @next/bundle-analyzer, satu wrapper di next.config.js, dan flag ANALYZE=true saat build. Setup di bawah 10 menit.

Berapa target first-load JavaScript yang sehat?

Untuk koneksi 4G Indonesia, target ideal di bawah 170 KB gzip per route. Di atas itu, INP cenderung memburuk.

Apakah dynamic import selalu bagus?

Tidak. Dynamic import menambah satu round-trip jaringan saat komponen butuh. Pakai untuk komponen yang jarang dirender di first paint, jangan untuk komponen yang langsung terlihat.

Penutup: Performa Adalah Hasil Audit, Bukan Sekali Setting

Felicia Tan tidak menambah server, tidak ganti CDN, tidak ubah desain. Cukup audit bundle dengan tool gratis, dan satu library yang salah tempat berhasil ditemukan. Praktik standar industri yang bisa diadopsi semua marketer Indonesia: jadwalkan bundle audit setiap rilis fitur baru, dan jadikan ukuran first-load sebagai metrik di dashboard internal.