Studi Kasus Felicia Tan: TTFB Budget Turunkan Time to First Byte dari 1.180 ke 312 ms dalam 12 Hari di Personal Brand Konsultan 2026

TL;DR: Penerapan TTFB Budget di website personal brand Felicia Tan menurunkan Time to First Byte rata-rata lapangan dari 1.180 ms ke 312 ms dalam 12 hari kerja, periode 28 Maret hingga 8 April 2026. Tiga intervensi utama: konversi route dinamis ke ISR, edge caching via Vercel, dan ramping query Supabase di route handler /api/bookings.

Felicia Tan adalah konsultan strategi bisnis berbasis Jakarta yang website personal brand-nya dibangun di Next.js 15 sejak akhir 2025. Awal Maret 2026, dia mengeluh halaman booking sering terasa "ngegantung" sebelum konten muncul. Saat saya audit, baseline TTFB lapangan tercatat 1.180 ms, jauh di atas ambang TTFB Budget yang disarankan 600 ms.

Studi kasus ini mendokumentasikan tiga intervensi yang dilakukan dan dampaknya terhadap Core Web Vitals secara keseluruhan, mengikuti kerangka yang saya susun untuk TTFB Budget di Next.js.

Konteks Awal

Halaman utama Felicia menggunakan dynamic rendering penuh karena setiap visit memanggil tiga query Supabase untuk testimoni, jadwal booking, dan artikel terbaru.

Tiga Intervensi

1. Konversi ke ISR

Route / dan /tentang dikonversi dari dynamic = "force-dynamic" ke ISR dengan revalidate: 300. Konten yang berubah jarang (bio, testimoni) tidak perlu di-render tiap request. Setelah deploy, TTFB p75 turun ke 568 ms.

2. Edge Caching via Vercel

Header Cache-Control: s-maxage=300, stale-while-revalidate=600 ditambahkan ke route handler /api/testimonials. Vercel Edge Network kemudian menyajikan respons dari node terdekat (Singapura untuk pengunjung Indonesia). TTFB p75 turun ke 398 ms.

3. Ramping Route Handler

Route /api/bookings awalnya menjalankan tiga query Supabase berurutan. Setelah dirangkai dengan Promise.all, total latensi turun dari 420 ms ke 165 ms. TTFB p75 akhir tercatat 312 ms pada 8 April 2026.

Dampak Terhadap Core Web Vitals

LCP ikut turun karena pre-rendered HTML sudah memuat link preload untuk hero image. INP membaik karena bundle JavaScript untuk route ISR di-split dan tidak menghambat main thread di kunjungan awal.

Pertanyaan Umum

Apakah ISR membuat data Felicia jadi basi?

Tidak. Window revalidate 5 menit cukup untuk konten personal brand yang updatenya tidak real-time. Untuk jadwal booking yang sensitif, route /api/bookings tetap dinamis tapi dengan optimasi query.

Berapa biaya tambahan dari intervensi ini?

Nol. Felicia sudah di Vercel Pro yang sudah include edge caching. Supabase juga sudah di plan yang sama. Optimasi semuanya di sisi kode.

Apakah pendekatan ini berlaku untuk e-commerce?

Sebagian besar iya, tapi untuk halaman produk dengan stok real-time, window ISR perlu lebih pendek (30-60 detik) atau pakai on-demand revalidation.

Pelajaran

TTFB Budget di kisaran 312 ms membuat seluruh rantai rendering lebih ringan. Felicia sekarang lolos Core Web Vitals di Search Console per 12 April 2026, dan halaman booking-nya tidak lagi "ngegantung". Pengamatan dari Vercel docs tentang caching sejalan dengan praktik yang dipakai di proyek ini: edge cache + ISR adalah kombinasi paling cost-effective untuk site dengan trafik regional.