Mod Expires Max Age Terbaik untuk Performa Website Optimal

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.1 atau 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-Control dan Expires sudah terkirim dengan benar oleh server Apache.
  • Modul Apache: Pastikan modul mod_expires dan mod_headers sudah aktif di server Anda dengan menjalankan perintah a2enmod expires headers pada sistem operasi berbasis Ubuntu/Debian.