HTTP caching: memahami Cache-Control dan ETag agar situs cepat
Header Cache-Control memberi tahu browser dan CDN berapa lama sebuah respons boleh disimpan. Untuk file statis yang namanya memuat hash, pakai masa simpan panjang. Untuk halaman HTML dinamis, pakai masa pendek atau validasi ulang dengan ETag agar pengunjung selalu melihat konten terbaru.
Apa fungsi Cache-Control?
Cache-Control adalah header respons yang mengatur perilaku cache. Direktif yang paling sering dipakai menentukan lama simpan dan siapa yang boleh menyimpan.
- max-age: lama simpan dalam detik.
- public dan private: apakah CDN boleh menyimpan atau hanya browser pengguna.
- no-cache: simpan, tetapi wajib validasi ulang sebelum dipakai.
- no-store: jangan simpan sama sekali, untuk data sensitif.
- immutable: berkas tidak akan berubah selama masa simpan.
Bagaimana ETag bekerja?
ETag adalah sidik jari isi respons. Saat cache kedaluwarsa, browser mengirim ETag lama lewat header If-None-Match. Jika isi tidak berubah, server membalas 304 Not Modified tanpa mengirim ulang isi, sehingga hemat bandwidth.
Dampaknya terasa pada pengunjung yang kembali. Berkas CSS, JavaScript, dan gambar tidak diunduh lagi, sehingga halaman kedua dan seterusnya terbuka jauh lebih cepat, terutama di jaringan seluler yang tidak stabil.
Validasi lebih murah daripada unduh ulang
Respons 304 hanya berisi header, jadi ukurannya jauh lebih kecil daripada mengirim ulang berkas penuh.
Pola yang aman untuk dipakai
- Aset statis dengan hash pada nama berkas: max-age satu tahun dan immutable.
- Halaman HTML: no-cache dengan ETag, atau max-age pendek.
- Respons API yang dipersonalisasi: private atau no-store.
- Gunakan stale-while-revalidate agar pengunjung mendapat respons cepat sambil cache diperbarui di belakang layar.
Ringkasan dan langkah berikutnya
Periksa header situs Anda lewat tab Network di browser, lalu perbaiki berkas yang belum punya masa simpan.
- Satu tahun dalam detik: 31.536.000.
- Kode validasi berhasil: 304.
- Alat cek: tab Network dan PageSpeed Insights.
- Rujukan: panduan HTTP caching di developer.mozilla.org.
Topik terkait yang bisa Anda baca berikutnya: caching WordPress lapisan demi lapisan, CDN dan Cloudflare, Core Web Vitals di WordPress, dan caching Redis.
Kesalahan yang perlu dihindari
Jangan menyimpan halaman yang berisi data pengguna di cache bersama, karena data dapat bocor ke orang lain. Jangan pula memberi masa simpan panjang pada berkas yang namanya tidak berubah saat isinya berubah, sehingga pengunjung terjebak melihat versi lama.
Pertanyaan singkat seputar topik ini
Berapa masa simpan untuk berkas statis?
Jika nama berkas memuat hash versi, pakai max-age satu tahun dan immutable. Jika tidak, pakai masa simpan pendek.
Apa arti respons 304?
Not Modified. Server memberi tahu bahwa isi tidak berubah sehingga browser memakai salinan cache tanpa mengunduh ulang.
Pertanyaan yang sering muncul
Ya, tanpa komitmen. Kami balas dalam 1×24 jam kerja.
Tentang Tim AnabisolutionsStudio digital dari Pekanbaru yang mengerjakan website, aplikasi, dan sistem untuk klien di Riau dan sekitarnya.
Anabisolutions

