Webmove Blog

Content Expiration

In part one of this blogpost series on improving the performance of your website, we saw the three rules of web performance:

• Reduce http requests
• Send as little as possible
• Send it as infrequently as possible

In this blogpost we will discuss a technique to send data from the server to the browser as infrequently as possible.

This technique consist of setting content expiration headers on the folders of your website. Like with http compression it's also a measure that needs to be taken at the infrastructure level, which is your webserver.

Why Content Expiration?

If a visitor visits a page on a website, the browser stores files like images, css and Javascript in it's cache. So what one would expect is that on a next visit to the same page, the browser will show these files from it's cache. But this is not the case.

First the browser will sent a request to the server to check if the files in it's cache haven't changed. If they have, the server will sent the new content, if they haven't, the server will sent a 304 status code, saying that the files haven't changed and the browser can load the files from it's cache.

So without content expiration, lot's of unnecessary request and responses are sent over the wire for files that are already in the browser's cache.

What we will do next is leverage the brocher's cache, by setting content expiration headers on the folders of our website.

A test before enabling content expiration

To show the effect of setting the content expiration headers on the folders of my website, I run a Page Speed test for my website:

Figure 1 Page Speed test before setting content expiration on my folders

The Page Speed Score is 91/100 This is the same since I enable http compression for my website (read my blogpost article on http compression).

Setting Content Expiration on a web folder

Page Speed suggest to enable browser caching for the folders 'css' and 'scripts'. For the purposes of this demo, I will set content expiration headers for the 'css' folder:

1. I open IIS 7.5 and browse to my css folder in the tree structure of my website
2. In the features pane I double click the 'HTTP Response Headers' function
3. In the Actions Pane on the right, I click the link 'Set Common Headers'
4. The Set Common HTTP Response Headers dialog screen shows up and I check the 'expire web content' check box.
5. In the same dialog screen I choose the 'After' radio button and fill in a expiration period of 365 days (see figure 2) and click 'OK'.

Figure 2 setting the Content Expiration headers for the CSS folder to 365 days

A test after setting content expiration on a web folder

If I do run a new Page Speed test for the homepage of my test site, I see that my Page Speed score has improved from 91/100 to 96/100 . The indicator for browser caching has turned green now, and the suggestion to chache the css folder is gone (see figure 3)

Figure 3 After setting content expiration headers the Page Speed Score has improved to 96/100

A closer look with Fiddler

To get some more details about the web performance improvement, I use Fiddler. As I mentioned in my first blogpost on Improving the performance of your website , Fiddler is a great tool to see the data traffic between the browser and the server.

Before I set content expiration for the css folder, I could see in fiddler that there where lot's of 304 status codes for files in my css and scripts folder (see figure 4)

Figure 4 Fiddler shows the 304 status responses from the server

As I mentioned before, a 304 status code is the servers way of telling to the browser that the content of these files hasn't changed.

If I check back Fiddler after I set the content expiration headers on the css folder, I can see that all the files from that folder have a max-age header set to 31536000 seconds (see figure 5). If you do the math on this you will discover that this equals 365 days. The browser now shows the files directly from the cache without sending requests to the server. This is the reason for the Page Speed score improvement from 91/100 to 96/100

Figure 5 the files of the css folder are cached for 365 days (max-age=31536000)

What if my content has changed?

Now some readers may ask themselves, what happens if content does change, will the browser still show the old file from the cache? The answer is yes. The browser will continue to show the file from it's cache until the browser's cache has been emptied or the content expiration period is exceeded.

A way to make the browser receive the updated file when the content of this file has been changed is to use a version number in your files name. When the user goes to the page, the browser will notice that there is a new file and download it from the server.

It can be a bit tedious for a developer to give all it's files a version number, that's why the technique for combining files in one file is used and to give this 'combined file' a version number, but this is the subject of another blog post in this series.

Conclusion

By intelligently setting content expiration headers on our folders, files from these folders are now immediately shown from the browser's cache. This not only made the performance of our website much better, it also takes off lots of load from the server and saving lots of network bandwith usage.

In the next blogpost we'll have a look at another technique to take the load off the server, and that is the use of Content Delivery Networks.