💡 ULASAN & REFERENSI • DIPERBARUI: 23 October 2026 • REDAKSI AZWINN

Konfigurasi Browser Caching .htaccess untuk Performa Website

Browser caching melalui file .htaccess adalah metode untuk menginstruksikan peramban web pengunjung agar menyimpan salinan file statis (seperti gambar, CSS, dan JavaScript) secara lokal dalam durasi tertentu. Hal ini membuat kunjungan halaman berikutnya menjadi jauh lebih cepat karena browser tidak perlu mengunduh ulang aset yang sama dari server.

Untuk mengimplementasikannya, Anda memerlukan akses ke direktori root website yang menggunakan web server Apache, serta hak untuk menyunting atau membuat file bernama .htaccess. Modul Apache yang wajib aktif di server adalah mod_expires dan mod_headers.

Kode Konfigurasi .htaccess untuk Browser Caching

Salin blok kode di bawah ini dan tempelkan ke dalam file .htaccess utama Anda. Pastikan modul Apache yang dibutuhkan telah diaktifkan oleh administrator hosting Anda.

<IfModule mod_expires.c>
  ExpiresActive On

  # Default expiration
  ExpiresDefault "access plus 1 month"

  # CSS dan JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"

  # Media: gambar, ikon, video, audio
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType audio/ogg "access plus 1 year"

  # Data Web Fonts
  ExpiresByType application/font-woff "access plus 1 year"
  ExpiresByType application/font-woff2 "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"

  # Dokumen
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

<IfModule mod_headers.c>
  # Mencegah caching pada file HTML agar pembaruan langsung terlihat
  <FilesMatch "\.(html|htm|php)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
  </FilesMatch>
</IfModule>

Tabel Durasi Cache Berdasarkan Jenis Berkas

Setiap tipe aset digital memerlukan durasi penyimpanan cache yang berbeda agar keseimbangan antara kecepatan akses dan pembaruan konten tetap terjaga.

Tipe Berkas / Ekstensi Durasi Rekomendasi Cache Alasan Teknis
HTML / PHP 0 Detik (No Cache) Memastikan pengunjung selalu menerima struktur halaman dan data dinamis terbaru.
CSS & JavaScript 1 Tahun File aset desain dan skrip jarang berubah; gunakan teknik versioning (query string) jika ada pembaruan.
Gambar (JPG, PNG, WebP, SVG) 1 Tahun Aset visual bersifat statis dan berukuran besar, sangat menghemat bandwidth jika disimpan lama.
Web Fonts (WOFF2, TTF) 1 Tahun Format huruf jarang mengalami modifikasi setelah situs diluncurkan.
PDF & Dokumen 1 Bulan Dokumen unduhan mungkin mengalami revisi berkala dalam rentang waktu berminggu-minggu.

Langkah-Langkah Penerapan Teknis

  1. Masuk ke control panel hosting (seperti cPanel, DirectAdmin) atau akses server via FTP/SSH.
  2. Buka direktori root website Anda (biasanya bernama public_html).
  3. Cari file bernama .htaccess. Jika tidak ada, buat file baru dengan nama tersebut (pastikan ada titik di depannya).
  4. Tempelkan kode konfigurasi mod_expires di bagian atas atau bawah file tanpa menghapus aturan yang sudah ada sebelumnya (seperti aturan permalink CMS).
  5. Simpan perubahan dan bersihkan cache pada aplikasi web, CDN (seperti Cloudflare), atau peramban Anda untuk menguji hasilnya.

Troubleshooting & Tips Lapangan

Kendala yang sering terjadi setelah menerapkan browser caching adalah perubahan desain CSS atau skrip JS tidak langsung terlihat oleh pengguna. Solusi terbaik adalah menerapkan teknik cache busting atau penambahan versi pada tautan file, contohnya style.css?v=1.1 setiap kali Anda melakukan pembaruan kode. Pastikan juga modul Apache mod_expires aktif dengan memeriksa log error server jika terjadi kesalahan internal server (HTTP 500).

🔍 Orang Lain Juga Mencari Ini