Home » Optimasi Wordpress » Cara Setting Expired Header

Cara Setting Expired Header

18 Des. 201096 comments
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.

Mudah-mudahan artikel tentang Cara Setting Expired Header ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Optimasi Link Komentator WordPress
  2. Cara Mengganti Username Dan Password WordPress
  3. Cara Mengurangi Jumlah Queri Pada Tampilan Categori WordPress
  4. Mempercepat Loading WordPress dengan Zlib Compression
  5. Membuat Tombol Facebook Like Tanpa Plugin
  6. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  7. Redirect WordPress RSS feeds Ke Feedburner Dengan .htaccess
  8. Cara Mudah Menuliskan Karakter Khusus
  9. Cara Menghapus Logo WP Dan Menu Di Admin Bar
  10. Cara Mencegah atau Menghalau Spambot
  1. 24-12-2010 at 09:35 | #1

    mas, mau nanya ni blognya kan gunta-ganti background terus ya…bisa kasih tutorialnya ga? soalnya menarik and ga bikin jenuh pemandangan…

    Reply

    Jual Barcode Reply:

    Kang Alwi kan suhunya blogger :) disina gudangnya tips dan triks ngeblog buanyak sekali

    Reply

  2. 25-12-2010 at 14:34 | #2

    sepertinya sangat berguna bagi kita sebagai pemilik dan pengunjung blog.
    namun sebelumnya apakah ada dapat negatifnya terhadap pemasangan kode ini, atau kekurangan dari kode ini.
    Btw, saya sangat sekali untuk memasang kode ini sob, tapi kemarin pernah kutak2 atik .htaccess malah error blog.

    Mohon pencerahan lebih lanjut ..

    Reply

    Jual Barcode Reply:

    tak ada salahnya bila kita coba itung2 untuk nambah ilmu :D

    Reply

  3. 25-12-2010 at 19:55 | #3

    setelah saya coba, kok sebagian error gak bisa buka gambar padahal set time expired cuma saya ubah jadi 172800, ada solusi mas?

    Reply

    Alwi Reply:

    Mungkin belum mengaktifkan define cache yang di file wp-config.php seperti ini : define('WP_CACHE', true);

    Reply

  4. 27-12-2010 at 08:41 | #4

    Hemm bisa dijajal mas alwi, saya suka cara ini :D hhehe

    Reply

    Jual Barcode Reply:

    dicoba lebih baik supaya lebih faham dan praktek

    Reply

  5. 27-12-2010 at 13:33 | #5

    saya salut dengan speed loading blognya, mas alwi. iseng2 saya test di gtmetrix.com ternyata nilai speed-nya sempurna: A. bener2 mantab!

    Reply

    mesin kasir Reply:

    iya cepat bagai kilat flashh :D

    Reply

    Berpikir Positif Reply:

    itulah yang mesti kita pelajari Pak caranya

    Reply

    Alwi Reply:

    Sebagian udah saya posting

    Reply

    Bang Iwan Reply:

    Saya harus lebih banyak belajar kang..

    Reply

  6. 27-12-2010 at 17:38 | #6

    kapan atuh mas nulis tutorial tentang cara membuat CDN dengan subdomainnya..?ditguin ni..

    Reply

    Hybrid car Reply:

    Hehehe…sudah nggak sabar juga nih…

    Reply

  7. 11-1-2011 at 17:40 | #7

    tips yang ruarrr biasa nih, trims sharenya kang

    Reply

  8. 13-1-2011 at 17:13 | #8

    Terimakasih banyak, sangat bermanfaat neh Mas Alwi…

    Reply

  9. 23-1-2011 at 15:48 | #9

    bingung juga settingnya spt apa yah

    Reply

  10. 23-1-2011 at 23:50 | #10

    mas, klo uda instal plugin wp super chace, apa harus ditambah kode ini jg ga?

    Reply

    Alwi Reply:

    Untuk wp super cache setting cachenya belum selengkap w3 total cache terutama untuk gambar, css, javascript dll, kurang tau kalau untuk versi terbaru (dah lama gak pakai wp super cache).
    bisa saja kalau mau dicoba ditambahkan beberapa jenis type file ke dalam file .htaccess tapi jangan lupa diback up dulu file .htaccess-nya

    Reply

    Rohim Reply:

    uda aq coba mas,tp error.
    naro nya dibaris keberapa ya?pertama atau paling akhir.

    Reply

    Alwi Reply:

    Kalau di blog ini kebetulan saya tempatkan di paling atas, dicek lagi Kang atau bisa dicoba diserver lokal dulu

    Reply

    rohim Reply:

    stlah saya cb2, yg menybabkan eror diblog sy, itu krna ada mod_deflate mas. kayanya ga suport deh.tp klo yg tidak diikutsertakan mah bisa.tp tidak signifikan mas.
    mohon pencerahannya.

    Reply

    Alwi Reply:

    Coba pakai ZLIB … sebagai alternatif kalau gzip module deflate tidak aktif diserver yg digunakan, kebetulan hosting blog ini juga tidak mengaktifkannya tapi kalau gzip saya sertakan tidak error cuman gak ngaruh di kompressi, baru kalau pakai ZLIB sangat efisien terhadap kompresi terutama untuk file HTML, CSS, javascript dan PHP

    Reply

Comment pages
5+6=? (Wajib diisi)