Cara Pasang TTFB Budget di Website Bisnis Next.js 2026: Kerangka 5 Langkah supaya Time to First Byte Tetap di Bawah 600 ms

TL;DR: TTFB Budget di website bisnis Next.js 2026 sebaiknya disetel di bawah 600 ms untuk halaman bagus dan di bawah 200 ms untuk halaman sangat cepat. Lima langkah praktis (edge caching, ISR, route handler ramping, monitoring real user, dan rotasi region) cukup untuk menjaga ambang ini stabil tanpa biaya infrastruktur tambahan.

Dalam beberapa proyek terakhir, saya melihat banyak website bisnis Indonesia yang sudah memakai Next.js tetap mengalami TTFB di kisaran 900-1.400 ms. Penyebabnya bukan framework, melainkan konfigurasi rendering yang tidak diatur sejak awal. Saat membangun ulang website klien personal branding Felicia Tan di akhir Maret 2026, baseline TTFB lapangan tercatat 1.180 ms. Setelah lima langkah berikut, angka turun ke 312 ms dalam 12 hari.

Artikel ini menyusun kerangka praktis menetapkan TTFB Budget sebagai bagian dari Core Web Vitals management di Next.js 15 App Router.

Kenapa TTFB Budget Sering Diabaikan

Mayoritas tim fokus ke LCP dan INP karena keduanya masuk ranking factor langsung. Padahal TTFB adalah sub-komponen yang mendahului LCP Budget. Jika TTFB sudah 800 ms, LCP nyaris mustahil di bawah 2,5 detik. Praktik standar di industri menyarankan menetapkan TTFB Budget sebelum optimasi gambar, karena gain terbesar biasanya datang dari sisi server, bukan asset.

Kerangka 5 Langkah TTFB Budget

Studi Kasus Penerapan

Saat mengerjakan proyek Vetmo (pet care marketplace) di kuartal pertama 2026, route handler /api/products awalnya memanggil tiga query Supabase berurutan dengan total latensi 540 ms. Setelah dipindah ke parallel query dengan Promise.all dan dipasangi revalidate: 60, TTFB rata-rata turun dari 920 ms ke 285 ms tanpa upgrade tier database. Pengamatan dari dokumentasi resmi Next.js menegaskan bahwa caching layer di App Router memang dirancang untuk skenario semacam ini.

Untuk klien Atmo (LMS), penambahan ISR dengan window 5 menit di route /courses menurunkan TTFB dari 1.120 ms ke 198 ms karena setiap request setelahnya disajikan dari edge cache Vercel.

Pertanyaan Umum

Apakah ISR mengorbankan freshness data?

Tidak signifikan. Window revalidate bisa disetel sesuai kebutuhan, mulai 10 detik untuk konten dinamis sampai 1 jam untuk halaman katalog stabil.

Bagaimana mengukur TTFB lapangan?

Pasang library web-vitals di root layout dan kirim hasilnya ke endpoint analytics. Vercel Analytics juga sudah mencatat TTFB by default.

Apakah CDN gratis cukup?

Untuk traffic di bawah 100k pageview per bulan, free tier Vercel atau Cloudflare biasanya sudah memadai. Insight standar dari web.dev menyebut edge cache adalah optimasi paling cost-effective untuk TTFB.

Penutup

TTFB Budget bukan target perfeksionis. Ini anggaran teknis yang mencegah penurunan kualitas rendering berantai. Dengan lima langkah di atas, sebagian besar website bisnis Next.js bisa mempertahankan TTFB di bawah 600 ms tanpa biaya infrastruktur tambahan, asal route handler dan caching strategy diatur sejak awal.