How to Leverage browser caching

March 1st, 2011 by Manoj Chauhan Leave a reply »

Leverage browser caching

Overview

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Details

HTTP/S supports local caching of static resources by the browser. Some of the newest browsers (e.g. IE 7, Chrome) use a heuristic to decide how long to cache all resources that don’t have explicit caching headers. Other older browsers may require that caching headers be set before they will fetch a resource from the cache; and some may never cache any resources sent over SSL.

To take advantage of the full benefits of caching consistently across all browsers, we recommend that you configure your web server to explicitly set caching headers and apply them to all cacheable static resources, not just a small subset (such as images). Cacheable resources include JS and CSS files, image files, and other binary object files (media files, PDFs, Flash files, etc.). In general, HTML is not static, and shouldn’t be considered cacheable.

HTTP/1.1 provides the following caching response headers :

  • Expires and Cache-Control: max-age. These specify the “freshness lifetime” of a resource, that is, the time period during which the browser can use the cached resource without checking to see if a new version is available from the web server. They are “strong caching headers” that apply unconditionally; that is, once they’re set and the resource is downloaded, the browser will not issue any GET requests for the resource until the expiry date or maximum age is reached.
  • Last-Modified and ETag. These specify some characteristic about the resource that the browser checks to determine if the files are the same. In the Last-Modified header, this is always a date. In the ETag header, this can be any value that uniquely identifies a resource (file versions or content hashes are typical). Last-Modified is a “weak” caching header in that the browser applies a heuristic to determine whether to fetch the item from cache or not. (The heuristics are different among different browsers.) However, these headers allow the browser to efficiently update its cached resources by issuing conditional GET requests when the user explicitly reloads the page. Conditional GETs don’t return the full response unless the resource has changed at the server, and thus have lower latency than full GETs.

It is important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources. It is redundant to specify both Expires and Cache-Control: max-age, or to specify both Last-Modified and ETag.

Example

Add the following code to your .htaccess file to set your Cache-Control and Expires headers, adjusting the date to be one year from today. I tested and i got good performance.  ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4 all extensions  files are cached by the browser.

# 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 2012 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>

In my article I have recommend some methods on How Optimize and Tweak High-Traffic Servers. 

Advertisement
  • sandeep mishra

    500 server error

  • sandeep mishra

    500 server error

  • just a no pro

    you really should not post any code, without testing it, MR PROFESSIONAL

  • cherry mae trongco

    how can i set
    an expiry date or a maximum age in the HTTP headers

blog comments powered by Disqus

Warning: Unknown: write failed: Disk quota exceeded (122) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/tmp) in Unknown on line 0