Studi Kasus Felicia Tan: INP Budget Turunkan Latensi Klik Booking dari 410 ke 138 ms dalam 21 Hari di Personal Brand Konsultan 2026
TL;DR: Personal brand Felicia Tan, konsultan branding di Jakarta, sempat punya INP p75 410 ms di halaman booking konsultasi. Setelah memasang INP Budget 150 ms dan mengeksekusi 4 perbaikan (lazy chat widget, code split form, prefetch route, defer analytics), p75 turun ke 138 ms dalam 21 hari. Konversi booking naik dari 3,8% ke 5,4% pada periode yang sama.
Studi kasus ini merangkum eksekusi nyata yang Vito Atmo jalankan bersama tim Felicia Tan antara minggu pertama Mei dan minggu pertama Juni 2026. Cerita lengkapnya: bagaimana baseline diukur, perbaikan apa yang dipilih, dan apa yang ternyata bukan jadi penyebab utama.
Konteks Awal
Felicia Tan menjalankan personal brand konsultan branding berbasis Jakarta. Channel akuisisi utama: artikel SEO yang mengarahkan ke landing booking 30 menit. Dari Google Search Console, halaman booking mengalami penurunan klik 14% selama dua minggu sebelum audit, padahal traffic stabil. Hipotesis awal: konten kurang persuasif. Setelah audit performa, ternyata penyebabnya teknis.
Baseline INP p75: 410 ms. Berdasarkan ambang resmi web.dev/inp, angka ini masuk kategori buruk dan otomatis menurunkan signal Core Web Vitals untuk halaman tersebut. Konsep INP Budget dijadikan acuan eksekusi.
Apa yang Diukur
| Metrik | Baseline | Target | Hasil 21 Hari |
|---|---|---|---|
| INP p75 (booking page) | 410 ms | 150 ms | 138 ms |
| LCP p75 | 2,1 s | 2,0 s | 1,7 s |
| Konversi booking | 3,8% | 5,0% | 5,4% |
| Bounce rate | 47% | 40% | 38% |
Sumber data: Vercel Speed Insights untuk lapangan, GA4 untuk konversi, CrUX Dataset untuk verifikasi 28 hari.
4 Perbaikan yang Bergerak
Eksekusi memakai pendekatan dari panduan cara pasang INP Budget di Next.js. Empat aksi yang paling berdampak:
- Lazy load chat widget. Widget inject script 180 KB saat halaman idle. Dipindahkan ke load on first user interaction.
- Code split form booking. Form pakai react-hook-form dan validator besar. Dipecah ke dynamic import dengan suspense fallback.
- Prefetch route konfirmasi. Setelah submit, halaman konfirmasi sering jadi long task. Prefetch on focus form sudah meratakan beban.
- Defer analytics tag. GA4 dan 2 pixel iklan dipindah ke
next/scriptdengan strategy "lazyOnload".
Yang ternyata bukan penyebab utama: bundle React, gambar testimonial, dan font. Pelajaran: hipotesis awal sering salah. Profil long task dari Chrome DevTools harus jadi acuan, bukan asumsi.
Yang Tidak Dilakukan
Tim tidak mengubah desain, copywriting, atau CTA. Hipotesis konten persuasif dipertahankan apa adanya supaya kontribusi performa bisa diukur bersih. Hasil konversi yang naik membuktikan latensi klik adalah faktor terbesar.
Studi serupa pada personal brand Aris Setiawan menunjukkan pola yang sama: perbaikan teknis sering menghasilkan lift konversi yang dikira tim marketing berasal dari copywriting.
Pertanyaan Umum
Apakah hasil ini bisa direplikasi tanpa Next.js?
Pola dasarnya bisa: lazy load third party, code split form, defer analytics. Stack lain perlu mekanisme setara.
Berapa lama monitoring sebelum dianggap stabil?
Vito Atmo memantau minimal 28 hari (window CrUX) setelah deploy supaya angka p75 tidak bias oleh hari spesifik.
Apakah Personal Brand kecil butuh INP Budget?
Ya, terutama jika halaman booking atau form jadi titik konversi utama. Margin konversi 1 sampai 2 persen sering datang dari latensi klik, bukan copywriting.
Apa risiko terbesar lazy load chat widget?
Pengguna yang butuh chat segera mungkin menunggu 200 ms ekstra saat pertama klik. Mitigasi: load on hover tombol chat, bukan menunggu klik.
Penutup Aplikatif
Untuk personal brand profesional di Indonesia, halaman booking sering jadi pintu konversi tunggal. Audit INP halaman ini setiap kuartal. Tulis dokumen INP Budget tim, instrumentasi dengan web-vitals, dan jalankan profiling Chrome DevTools sebelum menyalahkan copywriting. Untuk konteks metrik yang berdampingan, gabungkan dengan [panduan Core Web Vitals Budget](/artikel/cara-pasang-core-web-vitals-budget-nextjs-website-bisnis-2026).
Artikel Terkait
Case Study
Studi Kasus: Glosarium sebagai Mesin Trafik Organik yang Diam
Banyak yang menganggap halaman istilah sekadar pelengkap. Padahal, dengan struktur yang tepat, glosarium bisa jadi sumber trafik organik paling stabil di sebuah website.
Case Study
Studi Kasus: Bagaimana Glosarium Jadi Mesin Traffic Organik
Glosarium sering dianggap pelengkap. Padahal, jika dirancang benar, ia bisa jadi salah satu sumber traffic organik paling stabil sebuah website.
Case Study
MVP untuk UMKM: Validasi Produk Sebelum Bangun Besar
MVP membantu UMKM menguji kebutuhan pasar sebelum modal besar keluar. Langkah praktis dan studi kasus nyata membangun versi terkecil yang cukup.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang