Studi Kasus Ryandi Pratama: TBT Budget Turunkan Total Blocking Time dari 412 ke 168 ms dalam 22 Hari di Personal Brand Konsultan Pajak 2026

TL;DR: Saat mengaudit personal brand Ryandi Pratama (konsultan pajak) per Mei 2026, Total Blocking Time halaman booking konsultasi mencapai 412 ms di koneksi Slow 4G. Setelah penerapan TBT Budget Next.js dalam 22 hari, TBT turun ke 168 ms dan konversi formulir booking naik dari 1,9 persen ke 3,2 persen. Studi kasus ini merinci enam keputusan teknis utama yang berdampak terbesar.

Halaman booking adalah titik konversi paling kritis untuk konsultan pajak. Bila respons klik lambat, calon klien sering kembali ke pencarian Google. Pada audit awal, dua sumber utama TBT ditemukan: bundle skrip pihak ketiga yang dimuat eager dan komponen kalender pilihan jadwal yang berat.

Konteks Awal

Stack: Next.js 15 App Router, Tailwind v4, Supabase Auth, integrasi kalender pihak ketiga. Detail metrik selaras dengan praktik Web Vitals Google.

Enam Keputusan Teknis

1. Audit Bundle dengan next-bundle-analyzer

Identifikasi tiga skrip pihak ketiga yang membebani main thread: tag analitik, pixel iklan, dan widget chat. Ketiganya dipindahkan ke requestIdleCallback melalui custom Script strategy lazyOnload. Pola ini selaras dengan TBT Budget.

2. Pisahkan Komponen Kalender

Komponen kalender pilihan tanggal awalnya client-rendered penuh. Diubah jadi dynamic import dengan ssr: false, dimuat hanya saat pengguna scroll ke section booking. Beban turun signifikan.

3. Decoding Gambar Tertata

Foto profil konsultan diatur memakai komponen <HeroImage /> yang menerapkan Next.js Image TBT Budget. Hasil: decoding tidak lagi menjadi long task.

4. Optimasi Font

Font heading awalnya dimuat dua weight. Kami simplifikasi jadi satu weight + variable, sehingga ada satu permintaan font lebih sedikit.

5. Server Component untuk Daftar Testimoni

Daftar testimoni klien dipindahkan ke Server Component supaya tidak menambah hydration cost.

6. Pasang Budget di Lighthouse CI

Ambang total-blocking-time 180 ms ditanam di budgets.json. Build gagal bila terlampaui. Selaras dengan kerangka Cara Pasang TBT Budget Next.js.

Dampak Pasca-Implementasi

Setelah deploy, monitoring 22 hari menunjukkan stabilitas yang baik. Tidak ada lonjakan TBT saat update mingguan. Halaman booking tetap di bawah ambang meskipun terdapat tambahan testimonial baru. Ini menjadi acuan untuk klien personal brand lain di portfolio.

Pertanyaan Umum

Apakah hasil ini bisa direplikasi tanpa Next.js?

Prinsipnya sama, terutama langkah audit bundle dan dynamic import. Stack lain dapat memetakan ke padanannya. Namun, integrasi <Script> strategy yang dimiliki Next.js menyederhanakan implementasi.

Berapa effort yang dibutuhkan?

Sekitar 22 hari kalender dengan dua sprint pendek. Mayoritas waktu untuk testing di perangkat mid-range nyata, bukan ngoding.

Apa risiko utama saat menerapkan budget?

Tim desain bisa menambah gambar atau widget baru tanpa cek budget. Pasang reminder di pull request template supaya audit terjaga.

Penutup

Performa adalah hasil dari budget yang dijaga, bukan hasil sekali tuning. Personal brand konsultan yang serius mempertahankan konversi perlu menjadikan TBT bagian dari ritual rilis, sama pentingnya dengan revisi konten.