Memahami Cache Image di Browser dan Cloudflare

Dalam proses optimasi performa website, salah satu aspek paling penting adalah caching. Banyak developer sering bertanya: apakah file gambar yang dimuat berasal dari cache browser 🖥️, dari Cloudflare ☁️, atau justru selalu diminta ulang ke server?

Artikel ini membahas secara mendalam cara kerja cache, cara mengeceknya di Chrome, serta bagaimana mengatur header cache di PHP agar optimal dan aman untuk production.

🧠 1. Memahami Dua Jenis Cache: Browser vs CDN

🖥️ A. Browser Cache

Browser cache adalah file yang disimpan langsung di perangkat pengguna. Jika gambar sudah tersimpan dan belum melewati waktu kadaluarsa (max-age), browser tidak akan meminta ulang file ke server.

Ciri khas di Chrome DevTools:

• Status Code: 200 (from disk cache)
• Status Code: 200 (from memory cache)

Artinya file diambil langsung dari penyimpanan lokal browser. ⚡

☁️ B. Cloudflare Cache (CDN Cache)

Cloudflare adalah CDN (Content Delivery Network) yang menyimpan file statis di edge server mereka. Jika file tersedia di edge terdekat, maka request tidak sampai ke origin server.

Ciri khas di Response Headers:

• cf-cache-status: HIT ✅ → file diambil dari cache Cloudflare
• cf-cache-status: MISS ❌ → belum ada di cache
• cf-cache-status: EXPIRED ⏳ → kadaluarsa
• cf-cache-status: BYPASS 🚫 → tidak di-cache
• server: cloudflare 🌍 → request melewati Cloudflare

🔎 2. Cara Mengecek Cache di Chrome

1. Buka halaman website
2. Klik kanan → Inspect
3. Pilih tab Network
4. Filter berdasarkan Img
5. Klik salah satu gambar
6. Buka tab Headers

Di bagian Response Headers, perhatikan:

• Apakah ada cf-cache-status? ☁️
• Apakah ada Cache-Control? 📦
• Status Code menunjukkan from disk cache? 💾

Untuk memastikan bukan cache browser, lakukan Hard Reload:

• Windows: Ctrl + Shift + R
• Mac: Cmd + Shift + R

⚙️ 3. Mengatur Header Cache di PHP

Contoh implementasi:

$expire_seconds = 604800; // 7 hari
header("Cache-Control: public, max-age={$expire_seconds}, must-revalidate, proxy-revalidate, immutable");
header("Pragma: public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + $expire_seconds) . " GMT");

📖 Penjelasan Directive

• public → Boleh di-cache oleh browser dan CDN
• max-age → Masa berlaku cache (dalam detik)
• must-revalidate → Harus validasi ulang setelah expire
• proxy-revalidate → Sama seperti must-revalidate untuk proxy/CDN
• immutable → Selama belum expire, browser tidak akan cek ulang meskipun refresh 🔒

📌 4. Kapan Menggunakan Immutable?

Gunakan immutable hanya jika file memiliki versi unik, misalnya:

• image.abc123.jpg
• app.js?v=20260301

Jika file tidak menggunakan versioning, penggunaan immutable bisa menyebabkan user tidak mendapatkan update terbaru hingga masa cache habis. ⚠️

❓ 5. Mengapa Cloudflare Kadang Tidak Cache?

Beberapa penyebab umum:

• Header Cache-Control: private 🚫
• Ada cookie atau session aktif 🍪
• Ada header Authorization 🔐
• Rule Cloudflare tidak aktif ⚙️
• File dianggap dynamic 🔄

Pastikan juga tidak ada konfigurasi NGINX atau Apache yang menimpa header dari PHP.

🏆 6. Best Practice untuk Production

📂 Untuk File Upload Dinamis

header("Cache-Control: public, max-age=604800");

Gunakan max-age sederhana tanpa must-revalidate dan immutable. Lebih stabil dan aman untuk file yang bisa berubah.

📦 Untuk File Static Versioned (CSS/JS/Image Build)

header("Cache-Control: public, max-age=31536000, immutable");

Set 1 tahun + immutable, pastikan file menggunakan hash versioning.

🧪 7. Validasi Menggunakan Curl

curl -I https://domain.com/path/image.jpg

Perhatikan apakah muncul:

cf-cache-status: HIT

Jika muncul HIT, berarti file benar-benar disajikan dari Cloudflare. 🎯

🎯 Kesimpulan

Caching adalah kombinasi dari:

• Konfigurasi server (NGINX/Apache/PHP) 🖥️
• Header HTTP yang benar 📡
• Konfigurasi CDN (Cloudflare) ☁️
• Strategi versioning file 🔢

Dengan memahami cara kerja browser cache dan CDN cache, developer dapat:

• Meningkatkan performa website secara signifikan ⚡
• Mengurangi beban server 💪
• Mengontrol update asset dengan lebih presisi 🎛️
• Menghindari bug akibat cache lama 🐞

Optimasi cache yang tepat bukan hanya soal kecepatan, tetapi juga tentang arsitektur sistem yang matang, scalable, dan profesional. 👨‍💻✨