Studi Kasus Aris Setiawan: Pangkas TTFB dari 1,4 Detik ke 180 ms Pakai Edge Runtime di 2026
TL;DR: Aris Setiawan, konsultan IT yang aktif posting di domain personal, mengalami TTFB 1,4 detik di server US East. Setelah migrasi API route ke Vercel Edge Runtime region Singapore dan optimasi caching, TTFB turun ke 180 ms dan LCP membaik dari 3,2 detik ke 1,8 detik. Investasi waktu: 4 jam.
Aris Setiawan adalah konsultan IT yang membangun otoritas lewat blog teknis. Audience-nya 80 persen Indonesia. Saat audit performa April 2026, field data di PageSpeed Insights menunjukkan masalah serius: TTFB persentil ke-75 mencapai 1,4 detik. LCP otomatis ikut buruk di 3,2 detik. Halaman terlihat lambat meski konten ringan.
Akar Masalah: Lokasi Server
Aris pakai Vercel free plan yang default-nya region iad1 (US East). Untuk audience Indonesia, round-trip latency dari Jakarta ke US East minimum 200-250 ms. Ditambah waktu server processing (query database Supabase, render React), total TTFB membengkak.
| Komponen TTFB Awal | Waktu |
|---|---|
| Koneksi Jakarta to US East | 240 ms |
| TLS handshake | 90 ms |
| Server processing | 380 ms |
| Database query (Supabase EU) | 690 ms |
| Total | 1,400 ms |
Database Supabase di region eu-central-1 menambah lapisan latensi karena server US East harus query ke Frankfurt.
Strategi: Edge Runtime + Region Match
Tiga langkah yang kami terapkan:
- Pindah Supabase ke region terdekat audience. Kami restore project ke region
ap-southeast-1(Singapore). Database 200 km dari pengguna utama. - Migrasi API route ke Edge Runtime. Tambahkan
export const runtime = 'edge'di route handler Next.js. Code dieksekusi di edge node Singapore, bukan US East. - Aktifkan ISR (Incremental Static Regeneration) untuk halaman blog. Halaman di-cache 1 jam di edge, di-revalidate on-demand saat ada update.
Implementasi di Next.js
Edit app/api/posts/route.ts:
export const runtime = 'edge';
export const preferredRegion = 'sin1';
export async function GET() {
const data = await fetchFromSupabase();
return Response.json(data, {
headers: {
'Cache-Control': 's-maxage=3600, stale-while-revalidate=86400',
},
});
}
Untuk halaman blog, gunakan revalidate segment config:
// app/blog/[slug]/page.tsx
export const revalidate = 3600;
Hasil Setelah 21 Hari
Field data CrUX update mingguan, jadi kami pantau selama 21 hari sebelum klaim:
| Metrik | Sebelum | Sesudah | Delta |
|---|---|---|---|
| TTFB (p75) | 1.400 ms | 180 ms | -87% |
| LCP (p75) | 3.200 ms | 1.800 ms | -44% |
| FCP (p75) | 1.900 ms | 720 ms | -62% |
| Bounce rate | 58% | 41% | -29% |
Bounce rate dari Google Analytics 4 menunjukkan dampak nyata ke perilaku pengguna. Halaman yang load di bawah 2 detik dipersepsikan instan oleh sebagian besar pengguna.
Pelajaran Penting
Pertama, jangan migrasi semua route ke Edge Runtime sekaligus. Edge Runtime punya keterbatasan: tidak semua npm package compatible, tidak bisa pakai Node.js native modules. Mulai dari route paling sederhana yang tidak butuh dependency berat. Kedua, region database harus match dengan region edge runtime. Edge node Singapore yang query database EU tetap lambat. Ketiga, pakai Cache-Control header agar response di-cache di CDN. Tanpa caching, Edge Runtime hanya memindahkan masalah, bukan menyelesaikan.
Untuk konteks lebih luas tentang field data dan strategi monitoring, lihat panduan Core Web Vitals dan studi kasus Ade Mulyana soal INP.
Pertanyaan Umum
Apakah migrasi region Supabase aman tanpa downtime?
Tidak bisa zero-downtime. Supabase membutuhkan restore ke project baru di region tujuan, lalu update connection string. Rencanakan di jam traffic rendah dan komunikasikan ke pengguna.
Berapa biaya tambahan Edge Runtime?
Di Vercel Hobby plan gratis sampai 1 juta invocations per bulan. Untuk blog personal dengan traffic puluhan ribu, tidak perlu upgrade plan.
Bisakah strategi ini diaplikasikan tanpa Vercel?
Bisa. Cloudflare Workers, Netlify Edge Functions, dan Deno Deploy punya konsep serupa. Cari "edge runtime" + provider hosting kamu.
Apa next step setelah TTFB membaik?
Audit ulang LCP untuk pastikan tidak ada bottleneck lain (image besar, render-blocking CSS). Lanjut ke optimasi bundle size dan INP.
Penutup
TTFB sering dianggap masalah developer, padahal punya dampak langsung ke perilaku audience. Untuk pemilik personal brand atau bisnis Indonesia dengan audience lokal, region matching adalah satu keputusan arsitektur yang paling tinggi ROI-nya. Empat jam kerja Aris menghasilkan pengalaman yang 87 persen lebih cepat tanpa rewrite kode aplikasi.
Artikel Terkait
Case Study
Studi Kasus Nalesha: Turunkan CLS dari 0,28 ke 0,04 dengan Grid Reservation di Product Listing 2026
Halaman product listing Nalesha mencatat CLS 0,28 karena gambar produk lazy-load tanpa reservasi dimensi. Berikut perbaikan dengan CSS grid dan aspect-ratio.
Case Study
Studi Kasus Ryandi Pratama: Pasang CSP di Website Personal Brand Tanpa Merusak Widget 2026
Pasang Content Security Policy di situs personal brand sering ditakuti karena risiko memblokir widget. Studi kasus klien menunjukkan pola report-only 14 hari yang aman dan hasil audit keamanan meningkat dari D ke A.
Case Study
Studi Kasus Felicia Tan: Pangkas Initial JS dari 412 ke 156 KB dengan Dynamic Import di 2026
Dynamic import berhasil pangkas initial JS landing page personal branding Felicia Tan dari 412 ke 156 KB dalam 28 hari. Begini langkah dan hasilnya.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang