Categories

HTTP Caching Headers

Posted on: December 5, 2015 by Dimitar Ivanov

Overview

An important part of building a top notch web app or website is its performance. Nowadays speed is everything. High performance websites ranks better at SERP and have a lower bounce rate. Using the browser cache to load static resources will boost the performance of your web page. Next benefits are easy measurable:

Reduce web page load time

Reduce HTTP requests on subsequent visits

Reduce web page size

Reduce server load

Reduce server bandwitch

Cache-Control Header

Dynamically driven content such as text/html documents usually is not cached. That's the default behavior of web servers.

But when it's about static resources as images, styles, scripts, etc. they should leverage browser caching using the cache-control header. Various directives of cache-control header are available:

Expires Header

Use an Expires header for static resources as images, styles and scripts. Adding a far feature expires headers in server response tells the browsers(web-proxies) to cache the resource for specific amount of time, and load it from the browser's cache if available, on subsequent loading of the web page. This technique leads to significantly reduce of the web page load time as well as server load reduce. If the browser cache is empty you can't expect the benefits of an expires headers yet.

If you use a far future expires headers do not forget that you must change the name of resource after a change in its content. Usually this is achievable by including the version/timestamp in the file name main-2.1.js. Depending of configuration web-proxies does not cache a resources with querystring in their filenames. So its better to avoid using querystring in the resource filename main.js?v=2.1.

Let's see how to configure expires headers for Apache web-server using a .htaccess file.

Enables generation of Expires headers

This directive enables the generation of the Expires and Cache-Control headers.

ExpiresActive On

Default algorithm for calculating expiration time

This directive defines the default algorithm for calculating the expiration time for all documents. Later you will see how to override it.

ExpiresDefault "access plus 10 days"

Value of the Expires header configured by MIME type

This directive defines the value of the Expires header and the max-age directive of the Cache-Control header generated for documents of the specified type (e.g., image/png).

ExpiresByType image/png "access plus 1 year"

All above together

It's a good idea to enclose the directives into an IfModule directive. Thus way you will avoid HTTP Status 500 in case the mod_expires module is not turned on.

ETag Header

Entity tags (ETags) are used by servers and browsers to determine whether the resource from browser's cache match the version on the server. The problem is that ETags won't match when the resource from browser's cache tries to validates on the server who is not the same one who gives the resource for first time. That's the case of large scale websites using clustered hosting solutions to provide high availability service. So if you prefer to use only cache-control and expires header, you should remove the ETag header.

<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None

Conclusion

At last when you know how important is http caching for high performance and you are in process of applying your preferred cache policy, use Chrome DevTools, Firebug or YSlow to analyze the HTTP headers of your web page.

For more thoughts about high performance stay tuned at @DimitarIvanov. If you have questions about the http caching headers, please leave a comment below. Thanks so much for reading!

Dimitar Ivanov

Dimitar Ivanov is a senior LAMP developer, javascript engineer, web performance-obsessed.
He is programming since 2003 and loves to build web applications.
You can find him on Twitter,
LinkedIn and
GitHub.

Subscribe to our newsletter

Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.