Case Study

Studi Kasus Felicia Tan: INP Budget Turunkan Latensi Klik Booking dari 410 ke 138 ms dalam 21 Hari di Personal Brand Konsultan 2026

A
Admin·3 Juni 2026·0 kali dibaca·4 min baca
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

MetrikBaselineTargetHasil 21 Hari
INP p75 (booking page)410 ms150 ms138 ms
LCP p752,1 s2,0 s1,7 s
Konversi booking3,8%5,0%5,4%
Bounce rate47%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:

  1. Lazy load chat widget. Widget inject script 180 KB saat halaman idle. Dipindahkan ke load on first user interaction.
  2. Code split form booking. Form pakai react-hook-form dan validator besar. Dipecah ke dynamic import dengan suspense fallback.
  3. Prefetch route konfirmasi. Setelah submit, halaman konfirmasi sering jadi long task. Prefetch on focus form sudah meratakan beban.
  4. Defer analytics tag. GA4 dan 2 pixel iklan dipindah ke next/script dengan 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).

Bagikan

Artikel Terkait

#inp#core-web-vitals#case-study#personal-branding#nextjs

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang