Case Study

Studi Kasus Aris Setiawan: Pangkas TTFB dari 1,4 Detik ke 180 ms Pakai Edge Runtime di 2026

Vito Atmo
Vito Atmo·25 Mei 2026·0 kali dibaca·4 min baca
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 AwalWaktu
Koneksi Jakarta to US East240 ms
TLS handshake90 ms
Server processing380 ms
Database query (Supabase EU)690 ms
Total1,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:

  1. Pindah Supabase ke region terdekat audience. Kami restore project ke region ap-southeast-1 (Singapore). Database 200 km dari pengguna utama.
  2. 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.
  3. 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:

typescript
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:

typescript
// 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:

MetrikSebelumSesudahDelta
TTFB (p75)1.400 ms180 ms-87%
LCP (p75)3.200 ms1.800 ms-44%
FCP (p75)1.900 ms720 ms-62%
Bounce rate58%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.

Bagikan

Artikel Terkait

#ttfb#edge-runtime#performance#case-study#personal-branding

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang