Leverage Browser Caching

Leverage browser caching atau dalam bahasa indonesia (bingung menjelaskannya) adalah situasi ketika web browser me-load sebuah halaman web dan menampilkan beberapa hal seperti logo, file CSS, dan resources lainnya, dimana browser “mengingat” bahwa resources tersebut telah dimuat di browser. Ini berarti bahwa ketika pengunjung masuk ke halaman lain, maka browser tidak harus memanggil logo atau file CSS itu lagi, karena sudah “diingat” atau di-caching. Tujuan dari ini adalah tentu saja bahwa halaman web akan dimuat lebih cepat.

Jika anda telah menguji halaman web anda dan kurang puas dengan kecepatan loadnya, maka anda perlu menggunakan browser caching, dan saya akan mencoba berbagi cara penggunaanya.

Bagaimana mengubah browser caching pada situs anda?

Cukup mudah untuk melakukannya, hanya dengan menambahkan beberapa kode untuk sebuah file yang biasa disebut .htaccess pada host / server web Anda. Oh iya, jika anda tidak familiar dengan file .htaccess, anda akan sedikit bingung mencari letak file ini. Biasanya file ini tersembunyi, jadi anda harus men-checklist kotak “Show Hidden Files” pada bagian file manger direktori host anda.

Edit file .htaccess anda anda salin kode dibawah ini ke bagian atas file .htaccess anda.

EXPIRES CACHING ##

ExpiresActive On ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

EXPIRES CACHING ##

Simpan file, kemudian refresh halaman web anda. Cek perubahan kecepatan sebelum dan sesudah penggunaan metode ini menggunakan beberapa layanan seperti GTmetrix atau Google PageSpeed Insights. Tapi favorit saya secara pribadi adalah GTmetrix karena fitur Optimization nya cukup bagus dan simple.

Catatan: Anda bisa lihat di kode di atas bahwa ada periode waktu seperti “1 year” atau “1 month”. Ini berhubungan dengan jenis file, sebagai contoh kode di atas menyatakan bahwa file *.jpg (image) harus di-cache selama satu tahun. Jika anda hanya ingin cache selama satu bulan, anda cukup menggantikan “1 year” dengan “1 month”. Nilai-nilai di atas secara default sangat optimal untuk kebanyakan halaman web.

Referensi: Patrick Sexton Page Speed Guidelines and Issues.