We all are using ASP.NET Caching features to improve the performance of our site and we all know about very widely used caching terms like 'Output caching','Fragment Caching' etc. For those who are not familiar Google is your friend.

Today I am not going to show how caching can be used rather I will describe a hidden gem in the cache infrastructure of ASP.NET. I am calling it hidden and Gem at the same time as I did not encounter any scenario before where this could be used (or I did not even think about caching…) and where applicable it could be very handy. It’s called ‘Donut caching’ and as the name implies, it is like a hole in the cached output where you can programmatically set value.

Let me tell you the scenario that I encounter today at work. We have a fairly large application and we are in the process of optimizing the performance of that application. It has got a Header User Control and a couple of controls in the header are populated based on logged in user roles. The logged in user name also displayed in the header. For some database operation heavy page (search result page), we want to implement output caching, but the barrier was the header control. We do not want to redesign the page and encapsulate the search result grid into another User control and implement fragment caching there. Here comes the ASP.NET Substitution control in our rescue.

To start with, let us look at the mark-up of the Substitution control first.

<asp:substitution methodname="GetUserName" runat="Server" id="subUserName"></asp:substitution>

The html rendered by this control is the hole in the donut. The only important and useful bit is the MethodName property. It should reference a static method and should return a string. So whatever string you return from the GetUserName method will be rendered in the output. For displaying the logged name user name we have used the following method. For populating other controls we create the markup as necessary in the similar fashion.

 Public static string GetUserName(HttpContext context){  	       
         return Session["UserDisplayName"].ToString();   
 }  

So far, everything was easy, but I am pretty sure you will run into issue soon, as most of the developer depends on Session for keeping some user specific information, like Display Name, etc. The above mentioned code will work fine on the first instance but you will encounter a NullReference exception when you come back to the page later. It is because, for the cache version of the page, the page was never created and hence no session. Despite this limitation, asp:Substitution is a very handy control, that could save you some of your time and headache.

I have attached a very simple website project here. Download it and see the asp:substitution control in action. I hope that helps and give you an idea when and how to use the substitution control.

Today I am going to show you how I have implemented Condition Get for my website tariqulazam.info. Those who are not familiar with conditional get can have a look at the definition of conditional Get below.

From Http1.1 spcification : The semantics of the GET method change to a "conditional GET" if the request message includes an If-Modified-Since, If-Unmodified-Since, If-Match, If-None-Match, or If-Range header field. A conditional GET method requests that the entity be transferred only under the circumstances described by the conditional header field(s). The conditional GET method is intended to reduce unnecessary network usage by allowing cached entities to be refreshed without requiring multiple requests or transferring data already held by the client.

To understand the scenario clearly, let’s have a look at the following two http response header of tariqulazam.info homepage, one for the initial request and the other is for when the user returns back to the home page later. I have used HttpFox to capture this headers. 

Figure 1: Response headers for two request for same page when Conditional Get is not used.

If you look at the (status-line) and Content-Length header, you will see that status-line and the content length is same for both request. That indicates even if the content of the home page is not modified during the time between this two visits, every request to the home page cost us almost the same amount of data transfer. Conditional Get comes in to action in this scenario by reducing the data transfer for the subsequent requests to the same page.

So, if you understand what conditional get is, it is now time to have a closer look at the request header. When a client visits a webpage for the first time, in short when the client does not have cached entities for this webpage, the request header does not have any of these request header fields

If-Modified-Since, If-Unmodified-Since, If-Match, If-None-Match

When the server receives the request and it does not find any of those header fields, it just process the request and send the response to the client with a status code 200(OK). Next time when the client request the same page, it sends If-Modified-Since and If-None-Match request header fields and based on this values the server decides whether it should process the request or just send an 304 (Not-Modified) status code to the client. Note that the content length will be 0 if a 304 response code is sent. How the server will decide is dependent on the developer and it may vary depending on individual situations. 

Figure 2: Request and Response headers for first request on tariqulazam.info homepage when conditional get is enabled.

.

Figure 3: Request and Response headers for subsequent request on tariqulazam.info homepage when conditional get is enabled.

If you have still difficulties understanding Conditional GET, read this article to have a more closer look at the headers and what they do.

Lets see some C# code now on how to implement this in our website. I have attached a complete website, so you can now download it and have a look.

Start by putting a Webhelper.cs class file in the APP_Code folder. It has got just 1 public static method and 2 private static methods. I want to keep the algorithm pretty simple to find out when the content of the website has changed. For tariqulazam.info website, when a resource link, article or comments is added or updated, I keep the modified time in a static field and used that value to generate E-Tag for the content being supplied by the IIS. Later when the same page is requested I just check the If-Modified-Since and If-None-Match request header value to determine whether I should process the request or just send response code 304 without processing the request. But it is totally upto you when you send the not modified response.

Note: If you find cached response for subsequent request try a hard refresh using F5 key to get the Not Modified Header. Also try to run this sample directly by creating application on your IIS. Casini (Visual Studio built-in webserver) does not handle some of these headers properly.

Please feel free to ask any question or leave any comment you may have about this article.

The idea behind reducing the number of Http Request is to optimize the total content download time and it could save up to several seconds based on the number of individual files are being requested by the browser. The end user experience could be unpleasant if a website takes a long time to download all the requested resources like JavaScript, css file and images. The experience could be even worse if the network latency is higher. In this article, I will try to figure out how to minimize the number of http request. Let's start with something very easy.

Combine JavaScript and Css file

I remember when I started working as a developer back in 2002, I used to have js file with one function inside it which was definitely not a good idea at all. Rather than creating many tiny JavaScript, it is advisable to merge them in to one JavaScript file. That not always possible but you should try to combine them in to as few files as possible. The same rule applies for css file as well. if your website has master page and you can separate the common JavaScript and css used by almost every pages of your site, its desirable to put the common JavaScript and css in to seperate files and reference them in the master page. For example, one of your website pages got some very tiny amount of javascript and css which is used only on that page, in that case i will suggest to include them in the page itself rather than on a different file.

Use CSS Sprites

Although CSS Sprites is not new but i think very few of us use them in our day to day development. In fact is not necessary or suitable in many scenarios but if you can use them wisely it can help you to reduce the number of Http Request to a great extent hence the server load. For those not aware about CSS Sprites, it is just combining multiple images into one single image, so that all the images can be downloaded in a single request rather than sending multiple request for individual images. I am not going to tell you details about CSS Sprites in this article, there are lots of articles you will find, Google is your friend.

Lets talk about some usage scenario now. First of all, it is very useful if your website has multiple background images For example, I have got several background images in my website and I have created one file for all of them later I use background-position in my css to show different background. Secondly, its very common to use different images to create a hover effect. This could be easily accomplished by using CSS Sprites as well. Recently I have come across an interesting article where they have used the CSS Sprites technique to position the image element. Have a look at this article here.

Embed image in to CSS file

Embedding image into css file is another very useful technique and it can be used in conjunction with CSS Sprites for best performance. The idea behind this is to convert the images into a base64 string and use the string as the image source rather than specifying the url of that image. You will find a lots of online tools to convert image to base64 string. Traditionally in our css file we reference the images like the following

background-image: url("images/bg.gif");

but once converted into a base64 string it will look like

background-image:url(data:image/gif;base64,R0lGODlhCAD0AdUAAP////7+/vn5+f39/fz8/Pj4..........);

I have discarded some of the base64 string here. you have to write the css in the following format

url(data:[Content-Type];base64,[base64 string]);

Here are the screen shots of Fiddler (Http debugging tool) when using this two different approaches. I have also attached a sample ASP.NET website project here. Download and try to run to see the effects on your own.

Figure 1: Three requests made when image is not embedded into css file.

Figure 2: Two requests when image is embedded into css file.

I hope that helps. Feel free to leave any comment or suggestion.