Leverage Browser Caching To Improve Site Speed
Written by Pradeep Kumar in Tips and tricks - Print This Post
The phrase “Leverage Browser Caching” actually means that different items on your site should have different expire times set. This is recommended by Google, and it will improve your overall Google Page Speed Score. If you have installed W3 Total Cache then you can check your site’s Page Speed score on your dashboard itself. We have shared lots of tips to improve website loading speed, and this is one of the simplest one.
Some tips to tweak your site’s speed
- Use PHP Flush To Improve Site Loading Speed
- HOW TO: Setup Google Analytics To Check Site Speed
- HOW TO: Get Google Page Speed Report Via W3 Total Cache
- 7 Free Best Tools To Check Website Loading Speed
How to Leverage Browser Caching
Find your .htaccess file, open it with any text editor (Notepad for instance) and add these codes below. Then save it.
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
## EXPIRES CACHING ##
[Code Updated. If you still get an error, check this post]
What This Code Actually Does?
It will instruct the browser to cache different static resources like images, flash, PDF, JavaScript and icons for some specified period of time. You can also increase or decrease the values depending on your specific requirements. By configuring your web server to set caching headers for cacheable static resources, your site will appear to load much faster.
Do you know any other simple tips to improve site loading speed? Kindly share them in comments below.
More posts on Tips and tricks
Want to share or tweet this post? Please use our short URL : http://hbb.me/wt
From few months my blog load speed decreased and i was searching some trick to speed up the blog. will sure try to know how it works.
If i use cache plugin then still do i need to add these piece of code to .htaccess ?
Not really necessary, but it doesn't matter if you add it.
Great invention!! I too going to implement this code on my site to improve site speed.
My site speed is bit low, I hope this way I can increase the speed. thanks for nice sharing.
i pasted this code. It shows 500 internal error
so i removed it 
Fortunately it worked for us and some others, mind if you can share the code so that I can have a look.
# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240×320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP_user_agent} !^(w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-).* [NC]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz" [L]
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240×320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP_user_agent} !^(w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-).* [NC]
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html" [L]
</IfModule>
# END WPSuperCache
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
i tried pasting ur code at 2-3 diff locations but everytime it failed.plz help me .i m not gud at this
thanks 
Deepanshu, I'll test this on my demo blog, and message you soon. Thanks.
S. Pradeep Kumar
Sir I installed the code to my access file also, can you help me I received the following 500 error. Here is the code. Thanks
[Tue Oct 04 07:52:56 2011] [error] [client 70.138.87.183] File does not exist: /usr/local/apache/htdocs/405.shtml
[Tue Oct 04 07:52:57 2011] [error] [client 70.138.87.183] File does not exist: /usr/local/apache/htdocs/405.shtml
[Tue Oct 04 07:52:57 2011] [error] [client 70.138.87.183] File does not exist: /usr/local/apache/htdocs/405.shtml
[Tue Oct 04 07:52:59 2011] [error] [client 70.138.87.183] File does not exist: /usr/local/apache/htdocs/405.shtml
[Tue Oct 04 07:52:59 2011] [error] [client 70.138.87.183] File does not exist: /usr/local/apache/htdocs/405.shtml
[Tue Oct 04 07:53:00 2011] [error] [client 70.138.87.183] File does not exist: /usr/local/apache/htdocs/405.shtml
[Tue Oct 04 07:53:00 2011] [error] [client 70.138.87.183] File does not exist: /usr/local/apache/htdocs/405.shtml
[Tue Oct 04 07:53:03 2011] [warn] RewriteCond: NoCase option for non-regex pattern '-f' is not supported and will be ignored.
[Tue Oct 04 07:53:03 2011] [warn] RewriteCond: NoCase option for non-regex pattern '-f' is not supported and will be ignored.
[Tue Oct 04 07:53:03 2011] [warn] RewriteCond: NoCase option for non-regex pattern '-f' is not supported and will be ignored.
[Tue Oct 04 07:53:06 2011] [warn] RewriteCond: NoCase option for non-regex pattern '-f' is not supported and will be ignored.
[Tue Oct 04 07:53:07 2011] [warn] RewriteCond: NoCase option for non-regex pattern '-f' is not supported and will be ignored.
[Tue Oct 04 07:53:07 2011] [warn] RewriteCond: NoCase option for non-regex pattern '-f' is not supported and will be ignored.
Hi,
If you just copied and pasted it you have to re-edit the code because there is some missing closing double quotation in line one.
Also try to make sure you have placed the right opening and closing double quotations like " and "
this looks like a good technique to reduce server loads..will try it..
Dude, this is really great man, it decreased my blog speed from 0.70 to 0.50
Thanks man 
How can I access .htacces file. I am using blogger CMS. Is there anyway I can leverage my blog on Blogspot
Unfortunately, Blogger platform has no .htaccess.
I'm having the same issue as Deepanshu, any luck?
Do you suggest me how to change the W3 total cache Leverage browser caching via its plugin settings?
I am really confused in this regard. Will you please help me?
Chris, I think you don't need to mess W3 Total Cache plugin for this.
I am using W3 Total Cache and i am on host gator. I used the code and i got Same 500 Internal error so i have to delete the code. How to remove the Leverage Browsing issue? https://developers.google.com/pagespeed/#url=http_3A_2F_2Fwww.snakebytez.com_2F&mobile=false
How to fix this issue?
If you set an expiry date or a maximum age in the HTTP headers for static resources, modern browsers will load previously downloaded static resources like images, css, javascript, pdf, swf etc. from local disks rather than over the network.
didn't work for me, any other easier method to do these?
Are you getting any error mate?
I actually kind of figured out why this won't work on HostGator which is my Current ISP. I am using a shared Hosting and both "mod_headers" and "mod_expires" are disabled they said, so this won't work for me. http://www.ardamis.com/2010/07/17/sending-headers-to-leverage-browser-caching/ Tried both codes from this link in .htaccess and still not working.
If you are using WP SuperCache then the above code in post will surely work for you.
Even i got the "500 Internal error" when i tried using, then after i have to delete the .htaccess file and had to create a new one. Maybe W3TC will fix this in next update
Thanks Pradeep bro. I was looking for this. BTW can you tell me How to get RANDOM Post thing same as WPBeginner having
Use this instead if you are Hostgator:
# Set Cache-Control and Expires headers
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
Header set Cache-Control "max-age=2592000, private"
Header set Expires "Sun, 17 July 2011 20:00:00 GMT"
</filesMatch>
<filesMatch "\\.(css|css.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, private, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</filesMatch>
# Turn off ETags
FileETag None
Header unset ETag
Still experience this same issue for the past 3 months. Here is the forum post
http://wordpress.org/support/topic/change-the-leverage-browser-caching
Anyone can help this?
What's the issue? and which plugin you using W3TC or Super Cache? I managed to adjust the W3TC setting that too on Host gator and though my theme is not so good managed to get Google Pagespeed 95 and mobile 92
https://developers.google.com/pagespeed/#url=http_3A_2F_2Fwww.snakebytez.com_2F&mobile=false NO High or Medium priority Jobs 
I have tried this one for wp and it does work. but do you have any idea how to leverage browser cache for image in blogger/ picasa? since theys only let the files cached for only one day. thanks before.
Are you using 3rd-party (like Blogger/Picasa) for storing your images mate?
Thanks. This is working for me. Thanks Pradeep bro
How can we do this in blogger?
Not possible in Blogger platform mate. We can’t tweak Google’s server unfortunately.