Cache-Control dan CDN untuk Website Bisnis Indonesia: Panduan Mengatur Kecepatan Tanpa Bug Stale

TL;DR: Cache-Control adalah HTTP header yang memberi tahu browser dan CDN berapa lama sebuah resource boleh disimpan dan kapan harus revalidasi. Kombinasi s-maxage dan stale-while-revalidate di edge bisa membuat halaman dinamis terasa statis. Per April 2026, CDN tier gratis seperti Vercel Edge dan Cloudflare sudah cukup untuk website bisnis kelas menengah Indonesia.

Ada bug klasik yang berulang di banyak website bisnis Indonesia: harga produk diupdate di CMS, tapi pengunjung masih melihat harga lama selama berjam-jam. Penyebabnya hampir selalu sama: cache tidak diatur dengan sengaja, jadi browser dan CDN menyimpan terlalu lama atau terlalu pendek. Solusinya bukan menonaktifkan cache, melainkan memahami strategi cache layered.

Saat saya membantu Atmo (LMS) memigrasikan landing page ke Next.js 15 tahun lalu, TTFB turun dari 1,2 detik ke 80 ms hanya dengan menambahkan s-maxage=3600, stale-while-revalidate=86400 di header. Tidak perlu rewrite kode aplikasi.

Anatomi Cache-Control

Cache-Control adalah header respons HTTP yang dipahami browser dan CDN. Direktif yang paling sering dipakai:

Kesalahan paling sering: pakai no-cache ketika sebenarnya yang dimaksud no-store, atau sebaliknya. no-cache masih boleh disimpan tapi harus revalidasi, no-store tidak boleh disimpan.

Strategi Layered untuk Website Bisnis

Pendekatan yang saya pakai di proyek client umumnya berlapis tiga:

1. Static asset (CSS, JS, gambar versioned): public, max-age=31536000, immutable
2. Halaman publik dinamis (landing, blog, katalog): public, s-maxage=3600, stale-while-revalidate=86400
3. Halaman per-user (akun, keranjang): private, no-store

Lapisan kedua adalah kunci. s-maxage membuat CDN menyajikan dari edge selama 1 jam, lalu stale-while-revalidate memperpanjang umur 24 jam dengan revalidasi background. Pengunjung selalu mendapat respons instan, sementara konten tetap segar.

Bandingkan dengan rekomendasi resmi di web.dev tentang cache strategies dan MDN HTTP caching reference.

Studi Kasus: Vetmo Booking Page

Vetmo (pet care booking) sempat punya masalah: halaman daftar dokter hewan butuh 1,8 detik karena query Supabase di setiap request. Dengan Next.js ISR plus s-maxage=600, stale-while-revalidate=3600 di header, halaman disajikan dari Vercel Edge dalam 90 ms median. Booking conversion naik 14 persen dalam dua minggu pertama, dan tagihan database turun karena query hanya jalan tiap 10 menit per region.

Kuncinya: identifikasi halaman mana yang tahan basi 5-30 menit. Hampir semua halaman katalog, kategori, dan blog masuk kategori ini. Gunakan Real User Monitoring untuk memvalidasi peningkatan dari sisi pengguna nyata.

Cara Invalidasi yang Aman

Cache yang baik tetap perlu cara invalidasi saat data berubah. Tiga pola umum:

• Time-based: biarkan TTL habis sendiri (paling sederhana)
• Tag-based: pakai tag (Next.js revalidateTag, Cloudflare Cache Tags) untuk purge selektif
• URL-based: purge URL spesifik via API CDN saat content berubah

Untuk tim Indonesia yang baru mulai, time-based dengan TTL 5-15 menit cukup untuk 80 persen halaman. Tag-based dipakai saat content update sering dan harus instan, misalnya saat staff menerbitkan artikel.

Pertanyaan Umum

Apakah CDN selalu butuh berbayar?

Tidak. Vercel Edge Network gratis untuk Hobby, Cloudflare Free tier sudah memberi global CDN dengan unlimited bandwidth. Untuk website bisnis kelas menengah Indonesia, tier gratis sering cukup hingga 1 juta request per bulan.

Bagaimana jika halaman butuh real-time?

Pakai SSE atau WebSocket di lapisan terpisah, lalu cache halaman utama dengan TTL pendek. Jangan paksakan real-time pada konten yang tahan basi 5 menit.

Apa risiko stale-while-revalidate?

Pengunjung pertama setelah TTL bisa melihat versi 1 generasi lama. Untuk halaman katalog atau blog, risiko ini dapat diterima. Untuk halaman harga atau stok ketat, kurangi stale-while-revalidate atau pakai tag-based invalidation.

Bagaimana mengukur efektifitasnya?

Lihat metrik TTFB, cache hit ratio di dashboard CDN, dan biaya database per bulan. Cache yang sehat menurunkan ketiganya bersamaan.

Apakah ini relevan untuk WordPress?

Ya. Plugin seperti WP Rocket atau Cloudflare APO menerapkan strategi serupa. Prinsipnya sama, hanya implementasinya beda.

Penutup: Cache adalah Strategi, Bukan Plugin

Banyak tim memperlakukan cache sebagai checkbox: install plugin, selesai. Hasilnya cache acak, kadang bocor data per-user, kadang stale berhari-hari. Cache yang sengaja diatur layer demi layer memberi kecepatan dan kontrol bersamaan. Mulai dari mengaudit Cache-Control header tiap kategori halaman, sebelum berinvestasi pada infrastruktur baru.