Caching Browser & CDN — Web Fundamentals

Caching menyimpan salinan resource agar tidak perlu diunduh ulang setiap kali. Ini salah satu teknik paling efektif untuk mempercepat website. Level caching…

Caching artinya menyimpan salinan sesuatu yang sudah pernah diambil, supaya lain kali bisa langsung dipakai tanpa mengambil ulang dari jauh. Tempat menyimpannya disebut cache. Mirip beli minum: ambil dari kulkas di rumah dulu, kalau habis beli di warung dekat rumah, dan cuma kalau warung juga kosong, barangnya dikirim dari gudang pusat.

🧪 Tebakan cepat: pengguna di Jakarta membuka situs yang servernya di Amerika, tapi halamannya tetap terasa cepat. Kok bisa? Jawabannya ada di bagian "CDN: salinan di dekat pengguna".

Tiga tempat salinan disimpan

Waktu browser meminta style.css, request-nya (permintaannya) lewat jalur ini:

Browser        →   CDN edge          →   Server asal
cache browser      cache CDN             file aslinya
~0 ms              ~20 ms                ~200 ms

Request berhenti di tempat pertama yang punya salinan yang masih boleh dipakai. Ketemu disebut cache hit. Gak ketemu disebut cache miss, dan request lanjut ke tempat berikutnya. Waktu response (balasan) kembali, tiap cache yang dilewati ikut menyimpan salinannya buat lain kali.

Cache-Control: aturan dari server

Server yang menentukan boleh tidaknya sebuah response disimpan, lewat header Cache-Control. Header adalah baris info tambahan yang dikirim bersama response.

Cache-Control: max-age=86400

Detail cara mengecek ulang (ETag dan 304) dibahas di materi HTTP Caching.

CDN: salinan di dekat pengguna

CDN (Content Delivery Network) adalah jaringan server yang tersebar di banyak kota di dunia, contohnya Cloudflare, Amazon CloudFront, dan Fastly. Keuntungan utamanya: file dikirim dari server yang paling dekat secara geografis dengan pengguna, jadi latency (waktu tunggu perjalanan data) jauh lebih kecil. Pengguna di Jakarta mendapat file dari edge di Singapura dalam sekitar 20 ms, bukan dari Amerika dalam sekitar 200 ms. Itu jawaban tebakannya. Bonusnya, server asal menerima jauh lebih sedikit request.

⚠️ Jebakan yang sering ketemu

💡 Satu tempat lagi: service worker. Script khusus di browser ini bisa menyimpan file sendiri supaya situs tetap jalan saat offline. Dibahas di materi PWA.

TL;DR: Salinan bisa disimpan di tiga tempat: cache browser (paling dekat, cuma buat satu pengguna), CDN edge (dekat pengguna, dipakai bersama), dan server asal. Request berhenti di tempat pertama yang punya salinan yang masih boleh dipakai. Server mengaturnya lewat Cache-Control: max-age=86400 boleh dipakai 1 hari, no-cache simpan tapi tanya dulu, no-store jangan simpan, private cuma browser. CDN mempercepat situs karena file dikirim dari server terdekat.

Yang akan kamu pelajari