Studi Kasus Felicia Tan: Pangkas Initial JS dari 412 ke 156 KB dengan Dynamic Import di 2026

TL;DR: Landing page personal branding Felicia Tan punya initial JS 412 KB, melebihi budget mobile 170 KB. Dalam 28 hari kami pangkas ke 156 KB pakai dynamic import untuk modul chart, animasi, dan modal kontak. Hasilnya LCP turun dari 3,8 ke 1,7 detik, bounce rate turun 19 persen, dan posisi keyword utama naik dari halaman 2 ke posisi 4.

Felicia Tan adalah konsultan branding di Jakarta yang baru membangun ulang website personal-nya di kuartal pertama 2026. Halaman utama berisi hero animasi, chart progress klien, testimonial slider, dan modal kontak. Saat audit awal, initial JS 412 KB. Untuk koneksi 4G median Indonesia, ini terlalu berat. LCP mobile-nya 3,8 detik, masuk kategori "needs improvement" di Google Search Console.

Per April 2026, kami mulai eksperimen pangkas bundle pakai dynamic import. Target ketat: turun ke bawah 180 KB dalam 30 hari tanpa hilangkan fitur visual. Berikut catatan apa yang kami lakukan dan apa yang berhasil.

Audit Awal: Apa yang Berat?

Saat membuka npm run build di Next.js 15, kami mendapat breakdown ini:

Pola jelas. Tiga modul terbesar (chart, modal, slider) total 278 KB, dipakai jauh kurang dari 100 persen pengunjung. Inilah kandidat utama dynamic import.

Langkah Implementasi (28 Hari)

Minggu 1: Chart progress klien

Komponen ini dirender hanya di bagian "Hasil Klien" yang ada di tengah halaman. Kami pakai dynamic(() => import('./ClientChart'), { ssr: false }) dan tambahkan loading skeleton sederhana. Initial JS turun dari 412 ke 270 KB. LCP turun ke 2,9 detik.

Minggu 2: Modal kontak

Modal hanya muncul saat klik tombol "Hubungi Saya". Kami pindah ke dynamic import dengan trigger onClick. Karena bukan SSR-critical, ini aman tanpa fallback. Initial JS turun ke 172 KB. LCP ke 2,1 detik.

Minggu 3: Testimonial slider

Lebih kompleks karena 64 persen pengunjung memang scroll sampai bagian ini. Kami pakai Intersection Observer untuk trigger dynamic import saat slider mendekati viewport. Initial JS turun ke 156 KB.

Minggu 4: Verifikasi dan tuning

Audit ulang Core Web Vitals di Search Console dan PageSpeed Insights. Pastikan LCP konsisten di bawah 2,5 detik di 75 persen sample.

Hasil Akhir

Yang menarik: pengurangan bundle juga berdampak pada INP karena main thread tidak lagi sibuk memproses modul yang tidak dipakai. Untuk audiens mobile yang dominan di pasar Indonesia, ini bedanya antara klien tertarik dan langsung close tab.

Pelajaran untuk Marketer

Beberapa insight yang bisa ditiru, bukan diaplikasikan mentah:

• Tidak semua modul cocok dynamic import. Hero yang dilihat 100 persen pengunjung jangan diutak-atik, malah bikin lambat.
• Pilih kandidat berdasarkan data penggunaan, bukan tebakan. Pakai Microsoft Clarity atau Hotjar gratis untuk lihat scroll depth.
• Diskusi dengan developer pakai data, bukan permintaan. Tunjukkan tabel breakdown bundle dan let mereka usulkan solusi teknis.
• Sabar. 28 hari adalah timeline realistis. Jangan paksa selesai dalam seminggu kalau tidak siap regresi.

Untuk pendalaman, dokumentasi resmi Next.js dynamic import menjelaskan API lengkap dengan contoh. Marketer tidak perlu paham detail, tapi tahu existence-nya supaya bisa minta developer eksplorasi opsi ini.

Pertanyaan Umum

Apakah teknik ini cocok untuk e-commerce dengan banyak produk?

Iya, terutama untuk modal review, filter advanced, dan widget rekomendasi yang tidak dipakai mayoritas pengunjung. Hasil bisa lebih dramatis karena traffic-nya lebih besar.

Berapa biaya implementasi?

Kalau pakai developer in-house, sekitar 16-24 jam kerja terdistribusi 4 minggu. Kalau outsource, range Rp 8-15 juta tergantung kompleksitas situs.

Apakah hasil ini bisa direplikasi?

Bisa, asal kondisi awalnya mirip (bundle besar karena modul jarang-dipakai). Kalau bundle Anda sudah 180 KB tapi LCP masih lambat, akar masalahnya bukan di JS. Coba audit image atau TTFB dulu.

Apa risiko dynamic import yang berlebihan?

Risiko utama: jaringan waterfall. Kalau setiap interaksi memicu fetch modul baru, halaman terasa terhenti. Solusi: prefetch modul kritis saat browser idle pakai requestIdleCallback.

Penutup

Pengalaman dengan website Felicia Tan menunjukkan bahwa pengurangan bundle bukan optimasi cosmetic, tapi keputusan strategis yang berdampak ke posisi pencarian dan kualitas lead. Kalau Anda marketer Indonesia yang serius soal organic traffic, mulailah dari audit bundle situs Anda hari ini. Angka 156 KB bukan tujuan akhir, tapi titik awal disiplin yang akan terbayar dalam 6-12 bulan ke depan.