Konfigurasi atau menambahkan Expires headers (Browser Caching) pada website

Salah satu teknik yang sering dilakukan untuk optimasi kecepatan website adalah  dengan menambahkan Expires Headers atau dikenal juga dengan Browser Caching. Expires Headers juga merupakan salah satu parameter untuk pengukuran kecepatan website oleh Google PageSpeed Insights. Untuk itu kali ini kita akan membahas bagaimana caranya untuk konfigurasi atau menambahkan Expires Headers (Browser Caching)  pada website anda.

Apa itu Expires Headers

Expires Headers memberitahu browser apakah harus meminta file dari server atau harus mengambil dari cache browser.

Tujuan di balik Expires Headers tidak hanya untuk mengurangi beban download dari server (terus-menerus men-download file yang sama ketika  tidak ada modifikasi sehingga akan membuang-buang waktu) melainkan untuk mengurangi jumlah permintaan HTTP untuk server.

Ketika anda mengunjungi sebuah situs, web browser anda akan berkomunikasi dengan web server untuk men-download semua file yang dibutuhkan. Kemudian mengkompilasi file-file untuk menampilkannya pada halaman web. Karena halaman web kaya akan grafis dan konten, maka akan semakin banyak file yang ditransfer antara komputer anda dan server web.

Dahulu sebuah website biasanya hanya terdiri dari  file HTML dan beberapa file gambar, namun sekarang ini banyak situs modern yang memiliki lebih dari 50 file per halaman. Untuk setiap file yang ada maka akan ada request ke server dan juga dibutuhkan waktu sepersekian detik untuk mengolahnya, semakin banyak file yang ada maka akan semakin banyak request dan waktu yang diperlukan untuk memprosesnya.

Bagaimana Cara Kerjanya

Expires Headers memiliki cara kerja yang sederhana. Expires Headers memberitahu browser berapa lama untuk menyimpan file dalam cache browser sehingga pada kunjungan berikutnya mereka tidak perlu men-download file lagi. Expires Headers tidak akan meningkatkan kecepatan halaman pada waktu kunjungan yang pertama,  karena browser harus men-download semua file untuk pertama kalinya. Expires Headers akan membantu meningkatkan kecepatan website pada waktu kunjungan berikutnya.

Anda dapat mengatur Expires Headers pada file tertentu atau pada jenis file tertentu. Ketika browser mengunjungi website anda maka browser akan melihat kapan terakhir kali download jenis file tersebut. Jika proses download belum lama terjadi maka browser akan menampilkan file tersebut dari cache, jika anda belum mengunjungi situs dalam beberapa saat  maka browser akan men-download versi terbaru file tersebut dari web server.

Tujuannya adalah untuk mengatur waktu kadaluwarsa untuk item yang tidak berubah di website anda (logo, warna dll). Aturlah waktu kadaluwarsa yang singkat untuk file-fle yang berubah secara teratur.

Bagaimana cara menambahkan Expires Headers

Pertama anda perlu memutuskan jenis file apa yang sering anda perbaharui dan  jenis file apa yang tidak perlu sering diperbaharui. Berikut adalah daftar umum dari jenis file yang biasa kita lihat:

• Gambar: jpg, gif, png
• Favicon/ico
• Javascript
• CSS

Pada jenis file diatas anda dapat melihat seberapa sering ada melakukan perubahan pada jenis file tersebut. Umumnya gambar biasanya tidak berubah terlalu sering (perlu diingat kita berbicara tentang gambar yang ada) favicon hampir tidak pernah berubah, javascript kadang-kadang berubah dan CSS biasanya berubah lebih sering dari pada javascript.

Kita dapat mendefinisikan waktu kadaluwarsa Expires Header pada file .htaccess. File ini adalah file tersembunyi sering ditemukan pada root situs Anda (melalui FTP). Lakukan backup file .htaccess anda sebelum merubahnya.

Bukalah file htaccess anda dan copy script berikut:

[#Enable the mod_expires module ExpiresActive On #Set expiration date to 1 month for all style sheets and images ExpiresByType text/css "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" #Set expiration date to 1 week for all HTML pages ExpiresByType text/html "access plus 1 week" ExpiresByType application/xhtml+xml "access plus 1 week" # Javascript ExpiresByType application/javascript "access plus 1 year"]

 Waktu kadaluwarsa dapat disesuaikan dengan keperluan.