Improve Your Website’s Loading Time by Leveraging Browser Caching

Improve Your Website’s Loading Time by Leveraging Browser Caching

To improve the speed of website load times and decrease the bandwidth that is required to load web pages, it is important to leverage browser caching to prevent unnecessary, multiple downloads of static files, such as images and CSS documents, when a visitor is browsing through a website.

How to Add an Expires or a Cache-Control Header

By using Expires or Cache-Control headers, a web server can tell web browsers which files they should cache and for how long. The caching duration can be specified by file type. For instance, we recommend caching HTML documents for a shorter period than CSS files, as HTML documents might change more often.

To enable browser caching, create or edit a file named .htaccess that will be located in the root folder of your website.

To enable Cache-Control headers, add the following instructions to the .htaccess file:

AddType image/x-icon .ico
# YEAR
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
 Header set Cache-Control "max-age=29030400"
</FilesMatch>
# WEEK
<FilesMatch "\.(js|css|swf)$">
 Header set Cache-Control "max-age=604800"
</FilesMatch>
# 24 HOURS
<FilesMatch "\.(html|htm|txt|php)$">
 Header set Cache-Control "max-age=86400"
</FilesMatch>

To use a different caching duration, change the max-age value to the number of seconds that you want browsers to cache the specified file type.

If you wish to enable Expires headers, add the following code:

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/gif A29030400
ExpiresByType image/png A29030400
ExpiresByType image/jpeg A29030400
ExpiresByType image/x-icon A29030400
ExpiresByType application/pdf A29030400
ExpiresByType application/x-javascript A604800
ExpiresByType text/plain A86400
ExpiresByType text/css A604800

To specify a different caching duration, edit the numeric value at the end of each line starting by ExpiresByType. Please note that it is probably not necessary to enable both Expires and Cache-Control headers at the same time.

In order to show you how this affects the behavior of your web browser, let’s have a look at the HTTP headers sent by the web server prior to enabling browser caching:

http://lab.webhostinghero.com/myimage.png

GET /myimage.png HTTP/1.1
Host: lab.webhostinghero.com
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Cookie: __utma=216006995.28042969.1365089844.1365794148.1365947439.10; 
__utmz=216006995.1365089844.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive

HTTP/1.1 200 OK
Date: Mon, 15 Apr 2013 14:17:19 GMT
Server: Apache
Last-Modified: Mon, 15 Apr 2013 14:07:22 GMT
Accept-Ranges: bytes
Content-Length: 94742
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: image/png

Here are the headers that are sent when browser caching is enabled:

http://lab.webhostinghero.com/myimage.png

GET /myimage.png HTTP/1.1
Host: lab.webhostinghero.com
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:20.0) Gecko/20100101 Firefox/20.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Cookie: __utma=216006995.28042969.1365089844.1365794148.1365947439.10; 
__utmz=216006995.1365089844.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: keep-alive

HTTP/1.1 200 OK
Date: Mon, 15 Apr 2013 14:18:41 GMT
Server: Apache
Last-Modified: Mon, 15 Apr 2013 14:07:22 GMT
Accept-Ranges: bytes
Content-Length: 94742
Cache-Control: max-age=29030400
Expires: Mon, 17 Mar 2014 14:18:41 GMT
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: image/png

For more information, see the documentation on Apache’s mod_expires and mod_headers.

10 Comments on “Improve Your Website’s Loading Time by Leveraging Browser Caching”!

  1. Avatar

    Hello Stephane!

    I was curious about how this works with a blog. I post almost daily, so if I am telling it to cache images for an extended time, will that mean that my new posts not load? Or does it just keep the old posts chached per the file paramaters and simply cache the new stuff?

    I guess what I’m also getting at is are there downsides to this in a wordpress platform?

    • Avatar

      Hi Ryan,

      The short answer is no, it will not prevent your new posts from loading, no worries here.

      I suggest you install the “Live HTTP headers” extension for Firefox so you see what happens behind the scenes.

      When a browser requests a web page, it will send out an header like this:

      ————————————————–
      If-Modified-Since: Tue, 27 Aug 2013 14:36:51 GMT
      ————————————————–

      If the requested document has not been modified since the date specified by the browser, the web server will respond with a “304 Not Modified” response, in which case the browser will load the document from its local cache.

      When you publish a new post, WordPress refreshes the homepage’s last modification date.

      There are no downsides specifically related to WordPress that I know of.

      That doesn’t mean that the examples above will fit everyone’s need. You might need to adjust a few things. For instance, if you have Javascript files dynamically generated by PHP, you don’t want to have those cached.

      If you want a PHP page to bypass the htaccess settings, you can always send an expiration header with a date in the past:

      < ?php header("Cache-Control: no-cache, must-revalidate"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); ?>

      Does that answer your question?

  2. HI Stephane. Thanks for posting this. I’m having trouble with caching, or at least think I am. I have implemented the changes above to my .htaccess file and am using the W3 Total Cache plugin on my wordpress site. I have tried both together and each separate; however, I still get a 0/100 on the YSLOW “Add an Expires or Cache-Control Header” portion. I am also using CloudFlare CDN and receive a score of 0/100 on the “Use a CDN” portion. Any wisdom you can provide would be greatly appreciated.

    Dk

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.