ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 08-05-2016

Setting HTTP Cache Untuk Mempercepat Load Website

Setelah sebelumnya kita membahas HTTP Request dan HTTP Response, kali ini kita akan membahas mengenai HTTP Cache yang bermanfaat untuk mempercepat waktu load website atau blog.

Daftar isi:

  1. HTTP Header
  2. HTTP Header Untuk Pengaturan Cache
  3. Validasi: Last-Modified dan Etag
  4. Working Code (Contoh code)

1. HTTP Header

Untuk dapat menerapkan HTTP Cache, kita perlu mengetahui HTTP Header. Apa itu HTTP Header?

Ketika membuka website, browser akan mengirim HTTP Request ke Web Server dan Web Server menjawabnya dengan  mengirim HTTP Response, Request/Response ini  SELALU disertai dengan yang namanya HTTP Header yang berisi segala informasi terkait request/response.

Dari HTTP Header inilah browser menentukan langkah yang akan diambil, apakah mendownload file atau mengambilnya dari cache, penggunaan cache akan secara signifikan meningkatkan kecepatan akses website, karena browser tidak perlu mendownload file dari web server.

HTTP Header ini dapat dilihat menggunakan Developer Tools pada Chrome (Tekan F12) atau Web Developer Tools pada Firefox (Tekan F12) kemudian pilih bagian Network

Contoh HTTP Header

2. HTTP Header Untuk Pengaturan Cache

Secara default pengaturan pada HTTP Header dilakukan oleh administrator web server (hosting) kita, namun kita juga dapat mengubah pengaturan tersebut sesuai dengan keperluan kita.

Berikut ini beberapa field Header yang penting untuk kita ketahui agar dapat melakukan pengaturan cache dengan benar.

1 Expires Header

Expires Header yang diperkenalkan pada HTTP 1.0, berfungsi untuk melakukan batasan umur cache secara spesifik berdasarkan tanggal dan waktu sesuai dengan format yang telah ditentukan (GMT), contoh: Expires: Wed, 11 Jan 2017 05:00:00 GMT, setelah melewati waktu tersebut, cache dianggap expired.

Untuk selalu mendapatkan “fresh content”, biasanya diatur agar browser selalu menganggap cache expired, untuk itu dapat dilakukan dengan memberi nilai -1 pada Expires Header.

Kelemahan dari header ini disamping besarnya kemungkinan perbedaan waktu antara browser dengan server, juga batas waktu yang ditentukan tidak fleksibel, karena strict pada tanggal dan waktu tertentu.

2 Cache-control Header

Untuk mengatasi berbagai kekurangan pengaturan cache pada HTTP 1.0, maka pada HTTP 1.1 (1997), diperkenalkan Cache-control Header. Salah satu contoh yang sering kita lihat adalah:

Cache-control: no-cache, no-store,  max-age=0, must-revalidate, public

Agar lebih jelas, mari kita bahas satu persatu:

a Cache-control: max-age=0, must-revalidate, public

max-age directive ditujukan untuk menggantikan Expires, jika Expires menggunakan tanggal dan waktu, maka max-age menggunakan satuan detik, sehingga jauh lebih fleksibel.

max-age sendiri artinya cache akan “expire” setelah sekian detik dari waktu terakhir file diakses dari server, menurut spesifikasi RFC 2616, nilai maksimal dari max-age adalah satu tahun kedepan atau 31536000 detik.

Contoh jika kita menggunakan Cache-control: max-age=3600, artinya cache akan bertahan selama 1 jam, maka jika dalam waktu satu jam terjadi request file yang sama, maka browser akan mengambilnya dari cache, jika melebihi 1 jam, maka browser akan mengirim informasi file cache ke server untuk dilakukan validasi, jika hasil validasi:

  1. File cache tersebut masih yang terbaru, maka browser akan menggunakan cache.
  2. File cache tersebut telah expired, maka browser akan mendownload file dari server kemudian menyimpannya sebagai file cache yang baru.

max-age=0 berarti bahwa cache selalu DIANGGAP expired sehingga browser HARUS melakukan validasi.

Agar compatibel baik pada HTTP 1.0 dan 1.1, maka sebaiknya Cache-control: max-age digunakan bersama dengan Expires, ketika digunakan bersamaan, maka browser harus mendahulukan max-age.

must-revalidate 

Artinya sama seperti penjelasan diatas, jika setelah satu jam, maka permintaan file yang sama harus divalidasi ke server, bukannya sama saja ya?  iya sama saja: Cache-control: max-age=3600 akan sama dengan Cache-control: max-age=3600, must-revalidate.

Directive ini berguna ketika tidak ada pendefinisian umur dari cache sehingga diserahkan pada masing-masing browser, yang terkadang ketika terjadi request, browser langsung mengambilnya dari cache, dengan adanya must-revalidate, maka browser harus melakukan validasi ke server.

public atau private

Public berarti bahwa respon dari server dapat di simpan sebagai file cache meskipun sebenarnya tidak diperbolehkan untuk disimpan sebagai file cache. public ini cocok digunakan pada file statis seperti pada gambar, css, dan javascript.

Directive public sebenarnya tidak diperlukan ketika header telah memuat informasi bahwa respon dapat di cache seperti penggunaan directive max-age.

private berarti respon (file dari server) dapat disimpan sebagai private (non-shared) cache, respon tersebut ditujukan untuk user tertentu, sehingga tidak dapat disimpan oleh intermediate cache seperti proxy server dan CDN.

private juga berarti respon ditujukan untuk END user bukan yang lain seperti proxy server tadi, disamping itu, private juga TIDAK terkait dengan security, hanya untuk menampilkan content yang pas untuk user tertentu.

Bagi browser, user tertentu ini bisa bermacam macam, bisa user OS, user browser (seperti di chrome), dll, tergantung browser mendefinisikannya seperti apa.

b Cache-control: no-cache

Perlu diperhatikan bahwa no-cache TIDAK sama dengan do-not-cache (tidak boleh disimpan sebagai cache) . no-cache artinya browser tidak boleh menggunakan informasi dari cache, melainkan harus selalu melakukan validasi ke server, sehingga no-cache ini dapat dipersamakan dengan max-age=0.

no-cache tidak terpengaruh dengan max-age, sehingga jika kita menuliskan Cache-control: no-cache, max-age 3600, maka setiap kali terjadi request maka browser akan tetap melakukan validasi ke server, tidak menunggu 3600 detik, sehingga penggunaan no-cache SEBAIKNYA tidak digabungkan dengan max-age.

  • penggunaan directive no-cache sebaiknya disertai Pragma: no-cache agar kompatibel dengan HTTP 1.0
  • no-cache tidak berlaku pada Internet Explorer, karena IE menterjemahkan no-cache dengan no-store (tidak boleh menggunakan cache) sehingga tidak ada validasi yang dilakukan, melainkan langsung mendownload content dari server. lebih lengkapnya silakan mengunjungi: Blog Internet Explorer

c Cache-control: no-store

Seperti namanya, berarti bahwa respon dari server sama sekali tidak boleh disimpan sebagai cache, meskipun hanya sekedar digunakan untuk mempermudah back button, forward button atau view source.

Dengan no-store, maka setiap permintaan file langsung didownload dari server, tidak ada validasi dan tidak peduli dengan umur cache, sehingga jika menuliskan Cache-control: no-store, max-age=3600, no-cache, maka no-cache akan mengalahkan lainnya.

HTTP Cache - Ilustrasi Cache Control max-age, no-store, dan no-cache

d Reset Cache

PENTING diperhatikan bahwa kita harus hati-hati dalam menentukan umur dari cache, karena sekali di set, maka akan sulit merubahnya, terlebih jika telah diload oleh ribuan user, misal: setelah kita set 3 bulan (max-age: 7776000), maka untuk merubahnya kita harus merubah nama file atau mendefinisikan Cache-control: no-store untuk beberapa saat lamanya.

3. Validasi: Last Modified dan Etags

Validasi disini berarti bahwa ketika browser mengirim informasi file cache yang akan digunakan, informasi tersebut divalidasi oleh server dengan tujuan memastikan browser mendapatkan versi terbaru dari file yang diminta.

Jika hasil validasi menunjukkan bahwa file cache sama dengan yang ada di server, maka browser dapat menggunakan file cache tersebut, jika tidak, maka browser akan mendownload file tersebut dari server.

Pada HTTP, ada dua jenis validasi yang digunakan server, yaitu Last Modified, dan Etag.

a Last Modified

Header Last Modified didefinisikan pada HTTP versi 1.0

Header ini berfungsi untuk membandingkan waktu modifikasi terakhir antara file cache dan file server, jika Last Modified date pada file server > Last modified pada file cache berarti file cache sudah expired, maka browser akan mendownload file tersebut.

Tanggal Last Modified sendiri harus menggunakan zona GMT dan format baku yang telah ditentukan contoh:

Last-Modified: Fri, 29 Apr 2016 14:20:10 GMT

Dalam prakteknya ternyata metode ini memiliki kelemahan yaitu jika waktu pada client tidak sama dengan server, maka bisa jadi sistem cache tidak berfungsi sebagaimana mestinya. Namun hingga saat ini, header ini masih menjadi andalan utama untuk melakukan validasi cache, dan seharusnya disertakan oleh server.

Secara singkat, cara kerja Header Last Modified adalah sebagai berikut:

  1. Browser melakukan permintaan halaman “A” ke web server.
  2. Web server menjawab dengan menyertakan attribute Last Modified pada HTTP Response Header
  3. Browser menyimpan halaman tersebut sebagai cache beserta informasi Last Modified nya.
  4. Ketika Browser kembali melakukan permintaan halaman “A” ke server, browser akan menyertakan attribute if-Modified-Since pada HTTP Request header.
  5. Server kemudian melakukan validasi apakah nilai if-Modified-Since yang dikirim browser lebih lama dari nilai Last Modified pada file server, jika ya, maka Server akan mengirim HTTP Response Header dengan status 304 Not Modified, yang artinya tidak ada modifikasi pada file sehingga server tidak mengirim data file yang diminta (hanya mengirim header tidak ada body), jika tidak sama, maka proses kembali ke nomor 3.

b Etag

Selanjutnya untuk mengatasi kelemahan tersebut, pada HTTP versi 1.1 (1997) dibuat standar baru untuk memvalidasi file cache, yaitu menggunakan Header Etag yang merupakan kependekan dari Entity-Tag, contoh seperti pada gambar berikut:

Contoh Header Etag

Etag ini memiliki format INode-Mtime-Size, dimana:

  1. INode – Kode unik server yang biasanya digenerate oleh sistem operasi.
  2. MTime – Modified Time – waktu modifikasi terakhir dari file.
  3. Size – Ukuran file dalam byte.

untuk penjelasan lebih lengkap dapat dilihat pada halaman Apache

Adapun cara kerja Etag ini mirip dengan Last Modified yaitu:

  1. Browser melakukan permintaan file ke web server.
  2. Web server menjawab dengan menyertakan atribut Etag.
  3. Browser menyimpan file tersebut sebagai cache beserta informasi Etag nya.
  4. Browser kembali melakukan permintaan file yang sama ke server, namun kali ini dengan menyertakan attribute if-None-Match (yang berisi nilai Etag) pada HTTP Request Header.
  5. Server kemudian melakukan validasi apakah nilai if-None-Match sama dengan nilai Etag pada file server, jika sama, maka Server akan mengirim HTTP Response Header dengan status 304-Not Modified, yang artinya file masih sama dan tidak ada data yang dikirim oleh server (hanya header saja tidak diikuti body), jika Etag tidak sama, maka proses kembali ke nomor 3.

Mengaktifkan Etag

Jika HTTP Response Header belum menyertakan Etag, kita dapat mengaktifkannya dengan cara:

  1. Jika Anda Administrator, pastikan module mod_headers aktif, buka file httpd.conf yang berada pada  apache/conf/ kemudian cari (Ctrl+F) mod_headers, kemudian hilangkan tanda pagar (#) di awal baris. Jika berada pada server hosting, dapat langsung mencoba step 2, jika tidak berhasil, coba hubungi admin web server.
  2. Tambahkan FileETag beserta parameter yang diinginkan, misal FileETag MTime Size pada file .htaccess, jika ingin menggunakan semua parameter maka dapat menuliskan FileETag INode MTime Size atau cukup ditulis dengan FileETag All.

c Last Modified atau Etag?

Berdasarkan RFC Standard, Etag dan Last Modified digunakan secara bersama sama, sehingga jika salah satu terpenuhi, misal: Etag tidak sama tapi Last Modified sama maka validasi bernilai true.

Etag ini memiliki kelemahan yaitu jika file ditempatkan di server berbeda, maka nilai Etag akan berbeda (INode), namun kelemahan ini dapat diatasi dengan membuat Etag dengan format: MTime-Size.

4. HTTP Cache – Working Code

Pengaturan untuk HTTP Cache dapat dilakukan dengan berbagai cara, namun paling pas dilakukan melalui konfigurasi server, pada apache, pengaturan dapat dilakukan melalui file .htaccess, adapun kode yang dapat digunakan adalah:

  1. Meningkatkan SPEED website. Untuk meningkatkan kecepatan akses website/blog selalu gunakan cache, dengan demikian akan meminimalisir jumlah dan ukuran request, berikut ini contoh yang saya gunakan:
    #Reformat ETAG
    FileETag MTime Size
    
    #Cache-control Header - HTTP 1.1
    <IfModule mod_headers.c>
    	#Cache 1 Minggu
    	<FilesMatch "\.(html|htm)$">
    		Header set Cache-control "max-age:604800"
    	</FilesMatch>
    
    	#Cache 3 Bulan
    	<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    		Header set Cache-Control "max-age=5184000"
    	</FilesMatch>
    
    	#Cache 1 Bulan
    	<FilesMatch "\.(js|css)$">
    		Header set Cache-Control "max-age=2592000"
    	</FilesMatch>
    </IfModule>
    
    #Expires Header - HTTP 1.0
    <IfModule mod_expires.c>
    	ExpiresActive on
    	ExpiresDefault "access"
    	ExpiresByType image/gif "access plus 3 month"
    	ExpiresByType image/png "access plus 3 month"
    	ExpiresByType image/jpg "access plus 3 month"
    	ExpiresByType image/jpeg "access plus 3 month"
    	ExpiresByType video/mp4 "access plus 3 month"
    	ExpiresByType video/webm "access plus 3 month"
    
    	ExpiresByType text/html "modification plus 1 weeks"
    
    	ExpiresByType text/css "access plus 1 month"
    	ExpiresByType text/javascript "access plus 1 month"
    	ExpiresByType application/javascript "access plus 1 month"
    </IfModule>
    

    Pada Expires Header, batas waktu yang dapat digunakan adalah seconds, minutes, hours, days, weeks, months, dan years, selain itu kita juga dapat menggunakan acuan waktu access atau modification untuk lebih jelasnya dapat mengunjungi halaman mod_expires – Apache HTTP Server

    Seperti sebelumnya telah disampaikan, selalu gunakan max-age bersama dengan Expires header agar kompatibel di semua versi HTTP yang ada di server kita.

    Aktifkan Module

    Untuk dapat menggunakan module expires, pastikan module mod_expires.so telah aktif, sedangkan untuk dapat menggunakan module header, pastikan module mod_headers.so  telah aktif.

    Jika anda administrator, untuk mengaktifkannya buka file httpd.conf yang berada di dalam direktori apache/conf, cari baris yang mengandung kata mod_expires.so dan mod_headers.so, kemudian hilangkan tanda pagar di depannya, restart apache.

    Module HTTP Pada Apache

    Jika berada pada server hosting, bisa langsung mencoba script diatas, jika tidak berhasil, silakan hubungi administrator hosting anda.

  2. Lainnya 1: Jika ingin menggunakan cache dan ingin memastikan content yang ada selalu yang terbaru (selalu ada request ke web server namun hanya HTTP header saja – sekitar 49 byte), terutama untuk file php, htm, dan html, maka dapat menggunakan kode berikut:
    <IfModule mod_headers.c>
    	Header set Cache-control "no-cache, max-age:0"
    	Header set Pragma "no-cache"
    	Header set Expires "-1"
    </IfModule>
    
  3. Lainnya 2: Jika ingin setiap request selalu mengambil file dari server, maka kita cegah browser untuk menyimpan dan menggunakan cache, gunakan kode berikut:
    <IfModule mod_headers.c>
    	Header set Cache-control "no-store"
    	Header set Pragma "no-cache"
    	Header set Expires "-1"
    </IfModule>

Selanjutnya pastikan bahwa cache telah berjalan, buka developer tools (tekan F12) kemudian pilih bagian network. Berikut ini contoh dengan menggunakan browser chrome:

Pastikan HTTP Cache Telah Berjalan

Demikian pembahasan mengenai HTTP Cache semoga bermanfaat.

Recomended Post

6 Feedback dari pembaca

    • Varvy sepertinya ngambil dari google page speed insight juga mas, dan saya tidak terlalu menghiraukan score disana.

      Yang menjadi perhatian adalah SPEED web nya mas, karena google sendiri tidak menggunakan score grade tapi SPEED. Untuk tes kecepatan website bisa menggunakan tool seperti pada pingdom.com.

      Perbaiki error yang bisa kita handle, jangan terlalu pusing dengan yang diluar jangkauan kita seperti script dari cdn, facebook, google-analytics, dll yang tidak mungkin kita mampu mengatur cache nya

      Yang bisa kita lakukan:

      1. Gabungkan file javascript dan css menjadi 1 file dan kompres.
      2. Gunakan lossy image compression seperti jpeg, saya sendiri tidak terlalu menerapkannya, karena pakai lossless seperti png (khusus untuk graphic dan vector) ukuran file menjadi lebih kecil.
      3. Cache & Compress static file
      4. Deffer image load
      5. Deffer Javascript Load
      6. Tempatkan javascript di bottom untuk menghindari render blocking. Bagi pengguna wordpress point ini hampir mustahil dilakukan (jika webnya kompleks)
      7. dll

        Saya sendiri belum sempat menerapkannya secara penuh 😀

  • Gan, sy pke type http 1.0 di speed insight google 67 scorenya, trus sy pake setingan manual chache control not work gan..
    Daftartulip.blogspot[dot]]com

    • Coba dicek pakai developer tools di browser mas, bagian Network, lihat request yang ada, sudah mengambil data dari cache belum….

      Dan untuk asset dari luar domain kita, tidak bisa kita atur mas

    • Untuk yang terkait cache masih sama mas, masih menggunakan cache control, date, etags.

      Bisa dicoba melihat http response header pada web yang menggunakan http2

      Dan selama masih menggunakan apache, konfigurasinya tetap sama

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP
  2. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP
  3. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL
  4. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  5. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  6. Memahami Fungsi Date Pada PHP
  7. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  8. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  9. Setting ODBC MySQL Untuk Gammu
  10. Cara Install dan Menggunakan Gammu di Windows