The truth of a theory is in your mind, not in your eyes.

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.

Your rating: None Average: 4 (2 votes)