Studi Kasus Felicia Tan: Pakai Progressive Hydration Pangkas Total Blocking Time Halaman Konsultasi dari 870 ke 210 ms di 2026

TL;DR: Halaman konsultasi Felicia Tan, konsultan personal branding di Jakarta, awalnya hydrate 22 komponen klien sekaligus dengan Total Blocking Time 870 ms. Setelah saya terapkan Progressive Hydration (eager hanya untuk above-the-fold, on-visible untuk testimoni dan FAQ, on-interaction untuk modal), TBT turun ke 210 ms dan INP membaik dari 340 ms ke 145 ms dalam 18 hari. Tampilan dan fungsionalitas tetap sama.

Felicia Tan, klien personal branding konsultan saya sejak 2024, melaporkan keluhan pengguna pertengahan April 2026: "halaman lama responsif". Core Web Vitals lab data menunjukkan LCP 2,2 detik (hijau), tapi INP 340 ms (kuning) dan TBT 870 ms. Audit cepat memperlihatkan halaman konsultasi punya 22 komponen klien yang semua hydrate eager: hero, testimoni carousel, FAQ accordion, modal booking, chat widget, social proof feed, dan 17 widget pendukung.

Diagnosis Awal

Saat saya buka Chrome DevTools Performance tab dengan throttling Slow 4G dan CPU 4x slowdown, terlihat hydration timeline padat. Main thread sibuk dari 850 ms sampai 1720 ms karena React menjalankan setup useEffect, event listener, dan state initialization untuk semua 22 komponen secara serial.

Data field data dari CrUX juga memperlihatkan p75 INP di 340 ms, jauh di atas batas baik 200 ms. Klik tombol "Booking Konsultasi" sering tertunda 280-410 ms karena main thread masih sibuk hydrate komponen lain.

Strategi Progressive Hydration

Saya pisahkan 22 komponen berdasarkan prioritas bisnis:

Implementasi pakai pattern dynamic dari Next.js dengan trigger custom:

const TestimoniCarousel = dynamic(
  () => import('@/components/TestimoniCarousel'),
  { ssr: true, loading: () => <TestimoniSkeleton /> }
);

Untuk on-visible, saya wrap dengan komponen LazyHydrate yang baru hydrate saat IntersectionObserver fire. Untuk on-interaction, saya pakai pattern placeholder yang baru load full komponen saat pengguna hover atau touchstart.

Hasil 18 Hari Setelah Deploy

Pengukuran dilakukan via library web-vitals Google ke endpoint analytics custom. Data agregat:

• Total Blocking Time: 870 ms → 210 ms (turun 76%)
• INP p75: 340 ms → 145 ms (turun 57%)
• LCP p75: 2,2 s → 1,9 s (turun 14%)
• Booking form completion rate: 7,4% → 9,8% (naik 32%)

Yang menarik, LCP ikut membaik walau optimasinya bukan target langsung. Penjelasannya: hero image lebih cepat decode karena main thread tidak bersaing dengan hydration komponen lain.

Pelajaran untuk Tim Lain

Pertama, hydration eager bukan satu-satunya opsi di Next.js App Router. React Server Components memang menggeser sebagian beban, tapi komponen klien tetap perlu strategi hydration eksplisit.

Kedua, prioritas hydration harus mengikuti KPI bisnis. Komponen yang penting untuk konversi (CTA, lead form) wajib hydrate cepat. Komponen edukatif (testimoni, FAQ) bisa nunggu sampai pengguna scroll ke sana.

Ketiga, ukur impact via field data, bukan lab data. Lab data tidak akan menunjukkan dampak ke konversi. Field data via Real User Monitoring yang menunjukkan korelasi antara perbaikan teknis dan KPI bisnis.

Pertanyaan Umum

Apakah Progressive Hydration cocok untuk semua website?

Tidak. Untuk halaman simple dengan kurang dari 5 komponen klien, overhead implementasi tidak sebanding hasilnya. Strategi ini cocok untuk landing page dengan banyak widget atau halaman dashboard kompleks.

Apakah perlu library khusus?

Tidak wajib. Pattern dynamic bawaan Next.js plus custom hook dengan IntersectionObserver cukup. Library seperti react-lazy-hydration mempermudah, tapi tidak esensial.

Berapa lama implementasi untuk halaman dengan 20+ komponen?

Dari pengalaman, 3-5 hari kerja untuk audit, klasifikasi tier, refactor, dan QA. Bottleneck terbesar biasanya QA edge case interaksi yang sebelumnya selalu eager.

Penutup

Felicia Tan sekarang punya halaman konsultasi yang terasa lebih ringan tanpa kehilangan fitur apapun. Strategi Progressive Hydration ini bisa direplikasi pada situs konsultan, e-commerce, atau dashboard dengan komponen klien banyak. Mulai dari audit tier prioritas, terapkan bertahap, dan ukur via field data. Untuk eksplorasi lebih lanjut, panduan resmi tersedia di web.dev Hydration.