Leverage Browser Caching To Improve Site Speed

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.

Loading Time

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.

40 thoughts on “Leverage Browser Caching To Improve Site Speed”

  1. Hello,

    Thanks for sharing this amazing tutorial. Buddy I’m facing lot of error and trying to fix everyday.

    Can you please give some quick suggestions. Here is my blog and it is hosted on blogspot platform (www.solvemyhow.com)

    Some common errors are,
    Optimized images, leverage catching problem, blocked js and css files etc.

    I tried to fix some but there are many. Can you please check.

    I want green color speed 😉

    Thanks,
    Piyush

    Reply
  2. ADD THIS

    ExpiresActive On
    ExpiresDefault A600
    ExpiresByType image/x-icon A2592000
    ExpiresByType application/x-javascript A604800
    ExpiresByType text/css A604800
    ExpiresByType image/gif A2592000
    ExpiresByType image/png A2592000
    ExpiresByType image/jpeg A2592000
    ExpiresByType image/jpg A2592000
    ExpiresByType text/plain A86400
    ExpiresByType application/x-shockwave-flash A2592000
    ExpiresByType video/x-flv A2592000
    ExpiresByType application/pdf A2592000
    ExpiresByType text/html A600

    Reply
  3. Pingback: 15 Ways to Speed Up Wordpress And Reduce Page Load Time | daPazze
  4. 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.

    Reply
  5. 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

    Reply
  6. Thanks Pradeep bro. I was looking for this. BTW can you tell me How to get RANDOM Post thing same as WPBeginner having

    Reply
  7. 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 🙂

    Reply
  8. 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.

    Reply
  9. 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?

    Reply
  10. How can I access .htacces file. I am using blogger CMS. Is there anyway I can leverage my blog on Blogspot

    Reply
      • # 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 🙂

        Reply
      • 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.

        Reply
    • 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 "

      Reply

Leave a Comment