Web Site Optimization - Leverage browser caching

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.

So if you configure your web server to set caching headers and apply them to all cacheable static resources, your site will appear to load much faster.

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.

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.

You can enable browser caching through web server params or .htaccess file in the root of your domain (for Apache based web server). Let's get an example with .htaccess entry as follows:

<IfModule mod_expires.c>
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"

This basically instructs the browser to cache different static resources like images, javascript, flash, pdf, and icons for the specified period of time. You can increase or decrease the values depending on your specific requirements. The more static or unchangeable your resource, longer the period you can enable browser caching. You can read more about the Apache Module mod_expires and how generation of Expires and Cache-Control HTTP headers instruct the client about the document’s validity and persistence.

Please publish modules in offcanvas position.