Browser Cache
Browser cache adalah salinan aset yang disimpan di perangkat pengunjung. Saat pengunjung kembali, browser bisa memakai salinan itu tanpa mengunduh ulang. Cache yang tepat mengurangi request, menghemat bandwidth, dan mempercepat kunjungan berikutnya.
Header yang mengatur
| Header | Fungsi |
|---|---|
Cache-Control | Menentukan berapa lama dan oleh siapa respons boleh di-cache |
ETag | Memberi identitas versi file untuk validasi |
Last-Modified | Menunjukkan waktu perubahan terakhir |
Expires | Waktu kedaluwarsa lama, masih dipakai sebagian server |
Untuk aset statis yang namanya mengandung hash, `Cache
- Control: public, max-age=31536000, immutable
masuk akal. Untuk HTML, gunakanno-cacheataumax-age=0, must-revalidate` agar browser selalu memeriksa versi terbaru. Jangan memberi HTML cache satu tahun karena pengunjung bisa melihat tautan ke aset yang sudah tidak ada.
Cache busting
Setiap deploy sebaiknya menghasilkan nama file aset baru, misalnya app.8f3c2.js. Perubahan nama memaksa browser mengunduh versi baru tanpa harus menghapus cache. Framework modern biasanya menambahkan hash otomatis. Kalau Anda memakai WordPress, plugin optimasi biasanya menangani versi aset.
Jangan mengandalkan query string seperti ?v=1 kalau CDN atau proxy mengabaikannya. Hash pada nama file lebih aman.
Yang perlu diperhatikan
Cache publik dan privat tidak boleh dicampur. Respons yang berisi data pengguna harus memakai `Cache
- Control: private
atauno-store`. Kalau CDN menyimpan respons privat, pengguna lain bisa melihat data yang salah.
Uji setelah deploy dengan Incognito dan DevTools. Lihat apakah dokumen HTML memuat aset versi baru. Untuk aset, cek status 200 atau 304. 304 berarti browser memakai cache dan server mengonfirmasi file belum berubah.
Untuk strategi cache server, lihat Web Cache. Untuk distribusi aset, lihat CDN. Untuk gambar, lihat Optimasi Gambar. Untuk kompresi, lihat Gzip dan Brotli.
stale-while-revalidate memungkinkan browser menyajikan salinan lama sementara versi baru diambil di latar belakang. Ini cocok untuk aset yang tidak harus langsung berubah, tetapi kurang tepat untuk data harga atau stok. Kalau memakai CDN, pastikan aturan cache origin dan CDN tidak bertentangan. Uji dengan curl -I setelah deploy dan lihat apakah cache-control serta age sesuai harapan.
Untuk HTML yang sering berubah, no-cache lebih aman daripada max-age panjang. Kalau ragu, mulai dari max-age=0, must-revalidate dan naikkan setelah yakin. Uji di staging dan periksa apakah browser benar-benar mengambil aset baru setelah deploy.
FAQ
Apakah browser cache memperlambat update konten?
Bisa, kalau HTML di-cache terlalu lama. Gunakan no-cache untuk HTML dan hash pada nama aset supaya update langsung terlihat.
Apa beda max-age dan s-maxage?
max-age berlaku untuk browser dan cache bersama. s-maxage khusus untuk cache bersama seperti CDN, dan menimpa max-age di lapisan itu.
Apakah 304 berarti file tidak ada?
Tidak. 304 berarti file belum berubah sejak versi yang dipegang browser. Browser memakai salinan lokal.
Disclaimer: Artikel WikiHosting disusun untuk tujuan edukasi dan referensi. Teknologi hosting terus berkembang, sehingga beberapa informasi teknis mungkin berubah seiring waktu.
