Cara Setting Expired Header
Kalau pada postingan sebelumnya cara mengoptimalkan penggunaan gambar saya pernah berjanji untuk membuatkan tutorial cara membuat CDN dengan subdomain. Namun mohon maaf saat ini belum bisa saya publish karena baru dapat setengahnya malah sudah banyak menanti tugas kantor yang harus saya selesaikan dan kebetulan anak kembar saya juga sedang kurang sehat dan sore ini saya juga harus ke Jogja kurang lebih selama satu minggu.
Sebagai gantinya saya posting terlebih dahulu tentang Cara Setting Expired Header baik untuk file HTML, CSS, javascript, gambar dll, kebetulan sudah cukup lama ngendon di daftar draft. Cara ini juga masih berkaitan dengan CDN (Content delivery network) yang akan saya selesaikan secepatnya.
Cache berasal dari kata cash. Dari istilah tersebut cache bisa diartikan sebagai tempat menyembunyikan atau tempat menyimpan data untuk sementara. Cara ini dimaksudkan untuk meningkatkan transfer data dengan menyimpan data yang pernah diakses pada cache tersebut, sehingga apabila ada data yang ingin diakses untuk kedua kalinya maka akses tersebut akan dapat dilakukan dengan lebih cepat.
Di bawah ini script yang saya gunakan untuk pengaturan Expired Header terhadap cache yang dihasilkan oleh browser. Sript ini saya adopsi dari plugin W3 Total Cache yang terkenal sangat baik dalam pengaturan cachenya. Caranya tambahkan script di bawah ini ke dalam file .htaccess yang ada di root direktori hosting anda (untuk pengguna plugin W3 Total Cache tolong abaikan cara ini), jika belum ada tambahkan kode ini terlebih dahulu ke dalam file wp-config.php : define('WP_CACHE', true);
# BEGIN Browser Cache <IfModule mod_mime.c> AddType text/css .css AddType application/x-javascript .js AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg .svgz AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A604800 ExpiresByType application/x-javascript A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> <IfModule mod_deflate.c> <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html </IfModule> <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon </IfModule> <FilesMatch "\.(css|js)$"> <IfModule mod_headers.c> Header set Pragma "public" Header set Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule> FileETag MTime Size <IfModule mod_headers.c> Header set X-Powered-By "Alwi" </IfModule> </FilesMatch> <FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$"> <IfModule mod_headers.c> Header set Pragma "public" Header set Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule> FileETag MTime Size <IfModule mod_headers.c> Header set X-Powered-By "Alwi" </IfModule> </FilesMatch> <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$"> <IfModule mod_headers.c> Header set Pragma "public" Header set Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule> FileETag MTime Size <IfModule mod_headers.c> Header set X-Powered-By "Alwi" </IfModule> </FilesMatch> # END Browser Cache
Script di atas akan memberitahu peramban/browser agar menyimpan berkas file yang diunduh berupa cache. Script di atas berguna untuk mengatur cache yang dihasilkan oleh peramban/browser yang digunakan oleh pengunjung, berapa lama waktunya cache tersebut harus divalidasi atau diganti dengan cache yang baru dll.
Ketika pengunjung membuka sebuah halaman dari website/blog, maka di browser pengunjung tersebut akan dihasilkan cache dari halaman tersebut, baik cache untuk file HTML, CSS, javascript, gambar dll. Dengan demikian ketika pengunjung tersebut membuka kembali halaman tersebut dalam rentang waktu yang sudah ditentukan dalam script tersebut sejak akses terakhir, maka peramban tidak akan mengakses file-file tersebut (HTML, CSS, javascript, gambar dll) dari server, tapi akan langsung mengakses dari cache yang telah disimpan sebelumnya (kecuali pengunjung menghapus cache yang ada di browsernya).
Dengan cara ini di samping akan meningkatkan kecepatan loading halaman tersebut juga akan menghemat bandwidth hosting website. Keuntungan dari sisi klien/pengunjung akan menghemat jatah bandwidth koneksi internet yang digunakan, apalagi jika file-file tersebut sudah dikompres sebelumnya, maka cache yang dihasilkan juga semakin kecil ukurannya.
Anda bisa saja mengganti pengaturan jangka waktunya, misalkan pada script di atas pengaturan masa expired untuk file CSS saya set ke angka 604800 (dalam detik) atau satu minggu. Jika anda cukup sering mengedit file css bisa saja diganti kurang dari itu. Atau kalau memang tidak pernah ganti theme, tidak pernah edit css bisa juga ditambah masa expirednya.
Kalaow aku bisa ketemu dengan mas Alwi Shihab nyang pinter ini, pasti ngelmunya tak colong kabeh. :D Hebat mas, kapan-kapan bisa membuwat buku pasti laku keras. Apalagi di footernya ada m-alwi.com.
Reply
Bang Iwan Reply:10-02-2011 at 19:22
kalau akau ketemu pasti bakalan nggak tidur 2 X 24 jam..
Reply
Alwi Reply:10-02-2011 at 22:58
@Kang Wandi : malu nih … la wong saya mingsih newbie heee .. cuman modal semangat, siapapun bisa asal ada kemauan dan keberanian untuk mencobanya …
@Bang Iwan : pas banget tuh bisa ngobrol 2 hari 2 malam soalnya saya hoby banget yg namanya ngobrol dan begadang maklum bekas anak nongkrong heee …
Reply
mas ..
mo nanya nii ..
klo saya gag pke w3 total cache tapi mo pake script itu bisa gag ..?
saia pke w3 total cache prasaan tambah berat amirr loading blognya >.<
Reply
Alwi Reply:27-02-2011 at 17:56
Bisa gan … tapi perlu dicek dulu spesifikasi server hosting yg digunakan, tiap hosting ada yg berbeda, karena kadang2 ada yg tidak mengaktifkan deflate kadang malah ada yg error, jadi perlu diseleksi script2 di atas disesuaikan dg spec server hosting masing2
Reply
Ya, ini yang bikin pusing. Saya lupa bahwa .htaccessnya masih ditambahkan kode di atas, waktu itu pake W3 Total Cache. Lha, sekarang pake Super Cache. Pasalnya W3 Total Cache pernah bikin posting saya cuma muncul judulnya doang.
Nice tutorial. :-)
Reply
Berarti mekanisme atau cara kerja script di atas mirip dengan kinerja browser dong kalau begitu mas? Bukankah tanpa menggunakan script di atas, browser tetap akan menyimpan cache halaman web yang pernah kita buka? Jadi, sepanjang kita tidak menghapus cache dan cookies pada browser yang kita gunakan, maka situs web yang pernah kita buka tetap akan cepat loadingnya saat kita buka kembali.
Dengan logika seperti itu, apakah pengaruh penggunaan script expired header di atas masih signifikan? Bukahkah sia-sia saja jika pengunjung menghapus cache pada browsernya? Atau gimana ya yang benarnya mas. Saya masih bingung.
Reply
Alwi Reply:5-04-2011 at 15:24
Yup mirip dg kinerja browser dan betul juga tanpa script tsb sebenarnya broweser akan tetap menghasilkan cache halaman web, tapi sependek yg saya tahu (hasil analysis dg pagespeed) hasil cachenya untuk file2 yg disimpan di server kita (html, css, javascript dll) akan sangat berbeda antara yg pakai script tsb dg yg tidak pakai, terutama di masa expirednya, validasi dll, misalnya untuk gambar krn gak pernah diedit2 expirednya diset 1 tahun, untuk css minimal 1 minggu (rekomendasi pagespeed) atau alternatif lainnya otomatis pakai Etag dll
terbukti untuk gambar avatar, javascript dari google analytics dari histats dan file2 external lainnya expirednya selalu kurang panjang masa expirednya (The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources)
dan dg script itu pula score pagespeed blog ini (halaman home) jadi 100 dan kecepatannya meningkat
Reply
mas klo saya pake blogspot bisa gk di buat kya gini…..makasih
Reply
thanks bgt kang alwi….
ilmunya sangat brmanfaat skali..
Mangstap dah pokok nya….
Reply
Mas, saya sudah lakukan metode yang mas tulis di atas.
Setelah saya cek menggunakan YSlow kok belum berfungsi ya?
Apa ada yang kurang dari langkah-langkah yang saya lakukan?
Mohon berkenan petunjuknya mas.
Sebelumnya makasih udah kasih tips yang bagus di atas.
Reply
wah saya akan coba mngganti wp super chace dengan ini., klo tidak berhasil akan balik lagi kesini untuk bertanya hehe.,
Reply
bang alwi saya mau tanya nih, sory sebelum-nya gak ada hungungan-nya denga artikel diatas, saya ada masalah dengan plugin W3TC di Spanel di Dashboard W3TC keluar notifikasi : It appears Page Cache URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration. , yang ingin saya tanyakan bagaimana mengatasi hal tersebut, mohon tanggapannya
Reply
dhenycahyoe Reply:21-12-2011 at 04:22
thank’s bang alwi, ternyata permasalhannya pada pengaturan General Setting di dashboard W3 Total Cache yg di Page Cache Method seharusnya menggunakan Disk:Basic notifikasi tersebut tidak muncul, sebelum-nya saya menggunakan setingan Disk:Enhancet sehingga plugin W3TC saya eror terus :D
Reply
dhenycahyoe Reply:21-12-2011 at 04:34
ralat bang alwi sebelumnya setelah saya cek .htaccess saya ternyata ada salah satu script yg dobel yaitu scrip permalink-nya setelah saya hapus dan saya edit kembali akhirnya W3TC saya meskipun pakai Disk:Basic maupun Disk:Enhancet notifikasi error itu tidak muncul lagi :D
Reply
Makasih banyak ilmunya mas. lg butuh bgt nih, trafik naik, bandwidth terbatas. langsung dicoba. makasih
Reply