The quest for a perfect YSlow score is always on my mind (when I am coding that is) and I am happy to report that I am getting closer and closer to that elusive score of 100.
Not that I am disappointed with what I am getting on the current project which has most pages being graded A with the occasional B and an overall performance score that is between 90-95 for 98% of the pages. So overall I am pretty happy
One of the things that makes a huge difference to the score is setting the Cache-Control header. Now this is something I have known about for many years now but it is only recently that I have fully got a grip on it with IIS7+ and Azure Blob Store.
Setting it for your site, if you are developing in ASP.NET MVC or just plain old ASP.NET is a no brainer. Setting it for your Azure Blob Storage is a little more involved.
So first off let’s look at MVC and the web.config file.
To set the Cache-Control header in your web.config for Static Content you just need to add the section shown below.
There are 4 different settings available for CacheControlMode but the 2 most useful are ‘UseMaxAge’ and ‘UseExpires’.
I prefer to use ‘UseMaxAge’ as ‘UseExpires’ requires a specific date in the future. ‘UseMaxAge’ on the other had allows you to set a length of time. When a page of your site is loaded, static content with the Cache-Control header is checked to see when was the last time it was downloaded. If it is less than the period you specify with the ‘cacheControlMaxAge’ attribute then the file does not need to be downloaded and hence your page will load faster.
The example above sets the Cache Control Max Age setting to 7 days and if you inspect the network traffic using the NET Panel of Firebug you should see a Response Header like the one shown below:
Ok on to Azure Blob Storage.
If you are writing your own CMS then you will need to add code to set the Response Headers for content that you are uploading such as images. This post is not however about doing it in code but about managing your content with a 3rd party tool.
My personal favourite is CloudBerry Explorer for Azure Blob Storage Pro. There is a free version but the Pro version ($39.99 US) offers more advanced features such as setting headers and compression when uploading content.
Applying Http Headers is as simple as right-clicking on your container and selecting ‘Set HTTP Headers”. The following dialog is displayed from which you can add headers and select from the list of available headers:
You can also create Upload Rules and apply to all containers or specific containers, although they call them buckets.
From that point forward when you upload content to the container (via CloudBerry Explorer) your header settings or compression settings will be applied.
For a large site that manages content through a custom CMS you will want to write the appropriate code to set the headers during the upload to Azure. However, for a site where you manage the content manually, like the one I am working on at the moment, CloudBerry Explorer is a great tool for setting HTTP Headers.