Improving Website Loading Speed using Client Cache
Browser-browser yang sering kita gunakan untuk menjelajah internet sekarang sudah beragam dan menawarkan banyak fitur fitur yang beragam. Tetapi pada dasarnya semua browser mempuyai suatu tunjuan yang paling penting, yaitu bagaimana menampilkan halaman website dengan cepat. Pendekatan pendekatan yang digunakan pun sangatlah beragam, dari segi logika merender script script html maupun men cache file file ataupun halaman website yang sudah pernah dikunjungi (di download) oleh user pada lokal komputer user sehingga untuk kedua kalinya user mengakses halaman website yang sama, browser mengambil data dari cache folder dari pada melakukan request kembali ke server.
Dengan mengetahui bahwa semua browser men cache semua hal yang sudah di download, muncul hal penting yang harus dicermati, yaitu page yang sudah di buka tidak di update lagi karena browser mengambil cache bukan melakukan request ke server.
Untuk menghindari kemungkinan pengunjung membuka halaman yang sudah "Kadaluarsa", hampir semua web developer menggunakan Meta Tag atau HTTP header untuk memberitahukan browser jangan pernah menggunakan cache . Tetapi hal ini memang lebih banyak negative-nya dari pada positive-nya. Karena barangkali isi yang di kirimkan oleh halaman dinamik ( yang di kirim langsung oleh server dengan proses proses server side) berubah 1 hari sekali. Atau 3 jam sekali, bankan bisa saja 1 minggu sekali. Sehingga ada keuntungan yang sangat besar yang bisa di dapat apabila browser dapat mengambil cache ketika tidak terjadi perubahan perubahan.
Ada 2 pendekatan yang dapat kita lakukan, yaitu dengan melakukan cache pada sisi server dan memaksimalkan cache pada sisi client. Pada kesempatan ini, akan dibahas secara mendalam mengenai cache pada sisi client.
Trick untuk mengatur cache pada sisi client
1. Menggunakan Meta Tags
<meta http-equiv="expires" content="Mon, 30 Jan 2010 02:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
Meta “expires” memberitahukan kepada browser bahwa informasi cache sebelumnya selalu kadaluarsa. Web Robot juga akan menghapus data dari Search Engine atau akan melakukan penjadwalan ulang untuk mengunjungi kembali halaman/alamat website tertentu.
Meta pragma no-cache mengindikasikan kepada browser bahwa informasi cache jangan di pakai, kemudian request harus di teruskan kepada server.
Meta cache-control sama kegunaannya dengan pragma no-cache, tetapi sebagai kompatibilitas kepada HTTP/1.1
2. Menggunakan HTTP Header
Pendekatan yang lebih baik adalah menggunakan HTTP Header. Menggunakan bantuan PHP untuk menciptakan HTML Meta Tag.
<?php
$expires = 100; //dalam detik
header('Expires: Mon'.gmdate('D, d M Y H:i:s', time()+$expires).'GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', FALSE);
header('Pragma: no-cache');
?>
atau
<?php
header('Expires: Mon, 30 Jan 2010 02:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', FALSE);
header('Pragma: no-cache');
?>
3. Dengan menggunakan APACHE .HTACCESS
Ada 2 module harus di aktifkan dan dilakukan setting pada beberapa module tersebut.
1.
mod_expires
Module ini mengontrol expires HTTP header dan max-age pada Cache-Control HTTP header pada respon server. Tangal kadaluarsa dapat di atur sedemikian rupa sesuai dengan waktu file terakhir kali di akses atau sesuai dengan waktu akses pada sisi klien.
Tambahkan script berikut sebagai contoh
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A300
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A3600
ExpiresByType text/css A3600
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A300
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A300
</IfModule>
2. mod_headers
Module ini mengontrol dan merubah HTTP request dan response header. Header dapat di gabungkan, digantikan, ataupun dihilangkan.
Tambahkan “script” berikut sebagai contoh:
ExpiresActive On
ExpiresDefault A259200
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|swf|mov|mp3|wmv|ppt)$">
ExpiresDefault A2419200
Header append Cache-Control "public"
</FilesMatch>
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A7200
Header append Cache-Control "private, must-revalidate"
</FilesMatch>
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresDefault A0
Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
Header set Pragma "no-cache"
</FilesMatch>
Untuk mengecek megetahui informasi cache, ada beberapa tools yang bisa digunakan. Salah satunya adalah Firebug. Download Firebug.
- X-C0d3C's blog
- Add new comment
- 126 reads