Pengaturan mod_expires terbaik untuk caching browser pada web server Apache bergantung pada tipe file (aset statis vs dinamis). Untuk performa maksimal dan skor PageSpeed Insights yang tinggi, aset statis seperti gambar, CSS, dan JavaScript memerlukan durasi max-age yang panjang (biasanya 1 tahun atau 1 bulan), sementara file HTML atau konten yang sering berubah harus diset tanpa cache atau dalam waktu singkat.
Modul mod_expires mengontrol header HTTP Expires dan Cache-Control: max-age yang memberitahu browser berapa lama file dapat disimpan secara lokal sebelum harus meminta ulang ke server. Penerapan yang tepat secara drastis mengurangi beban bandwidth server dan mempercepat waktu muat halaman bagi pengunjung berulang.
Konfigurasi Standar Mod Expires Terbaik
Berikut adalah blok kode konfigurasi yang dapat disematkan di dalam file .htaccess atau blok konfigurasi VirtualHost pada server web Apache Anda:
<IfModule mod_expires.c>
ExpiresActive On
# Default expiration
ExpiresDefault "access plus 2 days"
# CSS dan JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
# Media: gambar, ikon, video
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
# Webfonts
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
# HTML dan Data
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
</IfModule>
Tabel Durasi Max Age Berdasarkan Tipe Aset
Pemilihan durasi waktu cache harus disesuaikan dengan seberapa sering file tersebut mengalami pembaruan di lingkungan produksi.
| Tipe Aset / Konten | Durasi Max Age Terbaik | Alasan Teknis |
|---|---|---|
| HTML / Dokumen Utama | 0 seconds (No Cache) |
Memastikan pengunjung selalu menerima struktur halaman dan konten terbaru. |
| CSS & JavaScript | 1 bulan (30 Hari) |
Menyeimbangkan performa dengan pembaruan gaya/skrip (gunakan teknik cache busting seperti query string versi). |
| Gambar (PNG, JPG, WebP, SVG) | 1 tahun |
Aset visual jarang sekali berubah. Durasi panjang menghemat transfer data secara signifikan. |
| Web Fonts (WOFF2) | 1 tahun |
File font bersifat statis dan jarang mengalami modifikasi setelah diunggah. |
| Favicon & Manifest | 1 bulan - 1 tahun |
Ikon situs jarang berganti, aman menggunakan durasi panjang. |
Tips Implementasi dan Troubleshooting Lapangan
Penerapan durasi max-age yang panjang terkadang menimbulkan masalah ketika Anda memperbarui file CSS atau JavaScript tetapi pengunjung masih melihat versi lama di browser mereka.
- Cache Busting: Tambahkan parameter versi pada pemanggilan file di HTML, contohnya
style.css?v=2.1atau gunakan pengubahan nama file otomatis berbasis hash melalui alat build seperti Webpack atau Vite. - Verifikasi Header: Gunakan fitur Inspect Element di browser (Tab Network) untuk memastikan header
Cache-ControldanExpiressudah terkirim dengan benar oleh server Apache. - Modul Apache: Pastikan modul
mod_expiresdanmod_headerssudah aktif di server Anda dengan menjalankan perintaha2enmod expires headerspada sistem operasi berbasis Ubuntu/Debian.