Studi Kasus Ade Mulyana: Pangkas INP dari 480 ke 140 ms di Halaman Portfolio Personal Branding 2026

TL;DR: Portfolio personal branding Ade Mulyana sempat mengalami INP 480 ms di halaman utama, jauh di atas threshold baik 200 ms. Akar masalah ada di handler animasi sinkron dan widget testimoni third-party. Setelah refactor pakai requestIdleCallback dan code-splitting, INP turun ke 140 ms dan bounce rate mobile turun dari 47 ke 31 persen dalam 30 hari.

Saat melakukan audit performa rutin di Maret 2026 untuk portfolio Ade Mulyana (personal branding consultant), Vito Atmo menemukan anomali yang tidak terlihat di Lighthouse: skor Performance 89 di lab, tapi data Search Console melaporkan 62 persen URL mobile gagal lulus INP. Bounce rate mobile menyentuh 47 persen, padahal traffic dari Instagram terus naik.

Masalah ini sering luput dari marketer karena lab data dan field data sering tidak sinkron. Studi kasus ini mendokumentasikan proses diagnosis dan perbaikan yang dilakukan dalam 30 hari, dengan hasil terukur.

Konteks Masalah

Halaman portfolio Ade adalah Next.js statis dengan tiga komponen interaktif berat, yaitu hero animation dengan parallax scroll, testimoni carousel dari widget third-party, dan calendar booking embed. Ketiganya berjalan di onMount tanpa idle scheduling. Saat pengguna mengeklik tombol "Lihat Layanan", JavaScript thread sudah penuh dengan animasi yang masih berjalan.

Data RUM dari Vercel Analytics menunjukkan INP P75 di 480 ms, dengan interaksi paling lambat di tombol CTA primary. Untuk personal branding yang mengandalkan konversi konsultasi, ini fatal.

Framework Diagnosis

Vito Atmo memakai pendekatan "ukur sebelum optimasi" supaya setiap perubahan terverifikasi dampaknya, bukan tebak-tebakan.

Studi Kasus dan Solusi

Tiga perubahan dijalankan bertahap dalam 30 hari:

Pertama, parallax scroll handler dipindah ke requestIdleCallback dengan debounce 16 ms. Sebelum perubahan, scroll handler memblokir thread 180 ms tiap event. Setelah refactor, blocking time turun di bawah 30 ms.

Kedua, widget testimoni third-party diganti dengan komponen native yang lazy-load saat masuk viewport, pakai Intersection Observer. Bundle size halaman turun dari 412 kB ke 168 kB.

Ketiga, calendar booking embed dipisah ke route terpisah /booking dan ditautkan via Link, bukan embed di halaman utama. Halaman portfolio jadi fokus ke konversi tunggal, klik ke booking.

Hasil setelah 30 hari (data CrUX 28 hari): INP P75 turun dari 480 ke 140 ms, LCP turun dari 2,8 ke 1,9 detik, bounce rate mobile turun dari 47 ke 31 persen, dan permintaan konsultasi via form naik 28 persen.

Pertanyaan Umum

Kenapa skor Lighthouse bagus tapi INP real user buruk?

Lighthouse berjalan di lingkungan kontrol dengan koneksi simulasi. Real user pakai perangkat dan jaringan beragam, sering jauh lebih lambat. Selalu validasi dengan data RUM seperti CrUX atau Google Search Console.

Berapa biaya untuk audit performa seperti ini?

Tools yang dipakai semuanya gratis, yaitu Chrome DevTools, PageSpeed Insights, dan Search Console. Yang berbayar hanya waktu engineer atau konsultan. Untuk personal brand, biasanya 8 sampai 16 jam kerja cukup.

Apakah perlu rebuild seluruh website?

Tidak. Dari pengalaman Vito Atmo, 70 persen masalah INP bisa diselesaikan dengan refactor 2 sampai 3 komponen kritis, tanpa menyentuh arsitektur utama.

Tools apa untuk monitor INP secara berkelanjutan?

Vercel Analytics, Google Search Console, dan CrUX Dashboard untuk data field. Tambahan Lighthouse CI untuk lab regression test sebelum deploy.

Insight Aplikatif

Performa bukan hanya soal kecepatan loading. INP mengukur responsivitas, yang lebih dirasakan pengguna daripada angka detik. Untuk personal brand yang mengandalkan konversi, INP yang buruk artinya pengunjung mengeklik tombol dan halaman terasa "ngadat" sebelum merespons. Audit performa rutin tiap kuartal lebih murah daripada kehilangan lead karena pengalaman buruk.