Konfigurasi atau menambahkan Expires headers (Browser Caching) pada website

Bagaimana cara konfigurasi atau menambahkan Expires Headers (Browser Caching) pada website untuk optimasi kecepatan website



Salah satu teknik yang sering dilakukan untuk optimasi kecepatan website adalah  dengan menambahkan Expires Headers atau dikenal juga dengan Browser Caching. Expires Headers juga merupakan salah satu parameter untuk pengukuran kecepatan website oleh Google PageSpeed Insights. Untuk itu kali ini kita akan membahas bagaimana caranya untuk konfigurasi atau menambahkan Expires Headers (Browser Caching)  pada website anda.

Apa itu Expires Headers

Expires Headers memberitahu browser apakah harus meminta file dari server atau harus mengambil dari cache browser.

Tujuan di balik Expires Headers tidak hanya untuk mengurangi beban download dari server (terus-menerus men-download file yang sama ketika  tidak ada modifikasi sehingga akan membuang-buang waktu) melainkan untuk mengurangi jumlah permintaan HTTP untuk server.

Ketika anda mengunjungi sebuah situs, web browser anda akan berkomunikasi dengan web server untuk men-download semua file yang dibutuhkan. Kemudian mengkompilasi file-file untuk menampilkannya pada halaman web. Karena halaman web kaya akan grafis dan konten, maka akan semakin banyak file yang ditransfer antara komputer anda dan server web.

Dahulu sebuah website biasanya hanya terdiri dari  file HTML dan beberapa file gambar, namun sekarang ini banyak situs modern yang memiliki lebih dari 50 file per halaman. Untuk setiap file yang ada maka akan ada request ke server dan juga dibutuhkan waktu sepersekian detik untuk mengolahnya, semakin banyak file yang ada maka akan semakin banyak request dan waktu yang diperlukan untuk memprosesnya.

Bagaimana Cara Kerjanya

Expires Headers memiliki cara kerja yang sederhana. Expires Headers memberitahu browser berapa lama untuk menyimpan file dalam cache browser sehingga pada kunjungan berikutnya mereka tidak perlu men-download file lagi. Expires Headers tidak akan meningkatkan kecepatan halaman pada waktu kunjungan yang pertama,  karena browser harus men-download semua file untuk pertama kalinya. Expires Headers akan membantu meningkatkan kecepatan website pada waktu kunjungan berikutnya.

Anda dapat mengatur Expires Headers pada file tertentu atau pada jenis file tertentu. Ketika browser mengunjungi website anda maka browser akan melihat kapan terakhir kali download jenis file tersebut. Jika proses download belum lama terjadi maka browser akan menampilkan file tersebut dari cache, jika anda belum mengunjungi situs dalam beberapa saat  maka browser akan men-download versi terbaru file tersebut dari web server.

Tujuannya adalah untuk mengatur waktu kadaluwarsa untuk item yang tidak berubah di website anda (logo, warna dll). Aturlah waktu kadaluwarsa yang singkat untuk file-fle yang berubah secara teratur.

Bagaimana cara menambahkan Expires Headers

Pertama anda perlu memutuskan jenis file apa yang sering anda perbaharui dan  jenis file apa yang tidak perlu sering diperbaharui. Berikut adalah daftar umum dari jenis file yang biasa kita lihat:
  • Gambar: jpg, gif, png
  • Favicon/ico
  • Javascript
  • CSS
Pada jenis file diatas anda dapat melihat seberapa sering ada melakukan perubahan pada jenis file tersebut. Umumnya gambar biasanya tidak berubah terlalu sering (perlu diingat kita berbicara tentang gambar yang ada) favicon hampir tidak pernah berubah, javascript kadang-kadang berubah dan CSS biasanya berubah lebih sering dari pada javascript.

Kita dapat mendefinisikan waktu kadaluwarsa Expires Header pada file .htaccess. File ini adalah file tersembunyi sering ditemukan pada root situs Anda (melalui FTP). Lakukan backup file .htaccess anda sebelum merubahnya.

Bukalah file htaccess anda dan copy script berikut:
[#Enable the mod_expires module ExpiresActive On #Set expiration date to 1 month for all style sheets and images ExpiresByType text/css "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" #Set expiration date to 1 week for all HTML pages ExpiresByType text/html "access plus 1 week" ExpiresByType application/xhtml+xml "access plus 1 week" # Javascript ExpiresByType application/javascript "access plus 1 year"]

 Waktu kadaluwarsa dapat disesuaikan dengan keperluan.

COMMENTS

Name

Apache,4,Bisnis Online,1,Blog,10,Blogger,6,Cpanel,1,CSS,1,Database,1,Framework,1,Hacking,3,HTML,1,HTML and CSS,2,Info,2,Javascript,2,Javascript and AJAX,5,Keamanan Web,1,linux,2,MySQL,3,Networking,1,Open GL,1,Optimasi Website,7,Pemrograman java,1,Pemrograman web,5,PHP,7,phpMyAdmin,1,SEO,4,SQL Injection,3,SQL Server,12,SQLMap,3,Website,1,Wordpress,4,Xampp,1,
ltr
item
Nanang Gunawan Blog: Konfigurasi atau menambahkan Expires headers (Browser Caching) pada website
Konfigurasi atau menambahkan Expires headers (Browser Caching) pada website
Bagaimana cara konfigurasi atau menambahkan Expires Headers (Browser Caching) pada website untuk optimasi kecepatan website
https://3.bp.blogspot.com/-TjBAyr1B-8E/WQv8aJ80mMI/AAAAAAAAA3Y/auu9ppF0sEc58vnTyIOjcldfJH_wKIPbQCLcB/s1600/expires%2Bheaders.jpg
https://3.bp.blogspot.com/-TjBAyr1B-8E/WQv8aJ80mMI/AAAAAAAAA3Y/auu9ppF0sEc58vnTyIOjcldfJH_wKIPbQCLcB/s72-c/expires%2Bheaders.jpg
Nanang Gunawan Blog
http://www.nananggunawan.com/2017/04/konfigurasi-expires-headers-browser.html
http://www.nananggunawan.com/
http://www.nananggunawan.com/
http://www.nananggunawan.com/2017/04/konfigurasi-expires-headers-browser.html
true
4195327445586723627
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy