Increase performance of your website using caching
Why Caching?
One of the best ways to improve performance of your website is to employ caching. Caching can be used to cache the whole page or a specific portion of your web page into memory. Caching can also be used to store the data where the data can be the records of your database. Caching helps us in avoiding the unnecessary database calls since the cached data can be used to display the retrieved results instead of calling the database for each user request.
Because of caching, when the visitor request for the same page again then the Asp.Net worker process shows the cached result rather than the normal way of executing the code again to generate the HTML response and then send it back to the user. Caching not only helps in efficient utilization of our resources but also speedy and quick response to the user request.
In this article, we will see the basic methods of output caching. Asp.net also allows some advanced caching technique but that would be unnecessary for small or medium sized websites. However, I would be covering those in my future articles.
Location attribute
One of the most important attribute in caching is location. This attribute let you define where you would like to store your cached results. Various options are
1) Client: Output cache will be stored on client browser
2) Server: Output client will be stored on web server.
3) ServerAndClient: Asp.net worker process will decide where to store the result. It will either store the result on the client browser or on the web server.
4) Downstream: Output cache will be stored on only HTTP 1.1 cache-capable devices. This includes proxy servers and the client machine that made the request.
5) None: Disable caching for a particular control or the whole page
6) Any: ASP.net worker process will decide where to cache the result. It can be either stored on the user browser or on the server or on the proxy server participating in the request.
How to implement Caching
Depending upon the functionality, there are various ways of implementing output caching in our application. We can cache our page based on the control, querystring, param, or our own custom implementation. Let us go through each one of them one by one:
Simplest way of caching
Simplest way to implement caching is to use the following chunk of code. Adding the below line on top of your aspx page will cache the entire content for 10 seconds. This means the ASP.net worker process will generate the HTML response once every 10 seconds and for the requests within these 10 seconds, it will show the cached results. Let us see it in action
<% @ OutputCache Duration="10" VaryByParam="none" %>
As you see in the above screenshot, I am refreshing my page continuously. For 10 seconds, I always see the cached result and only when ten seconds have passed, I see the new result on my browser.
Cache by VaryByParam method
In the first approach, we have set the VaryByParam parameter to none which means no parameter is used to determine the cached result. In this approach we will set the VaryByParam Parameter to some value like ‘ID’. So, now for each varying Id, my HTML result will be cached in memory for the specified interval of time.
For example, if my id in my querystring is set to 1, then a HTML response is generated for id equal to 1. Now if a new user comes and query with id equal to 1, then this generated HTML response will be displayed to the user but if the new user arrives and query with id equal to 2, then a new HTML response will be generated for this user. Now we have two cached pages in our memory. If a new user arrives with id equal to 1 or 2 then the cached result would be displayed to the user else a new HTML response is generated for this visitor and this response would be again cached into memory for duration specified in the duration property. Check it in action below
<% @ OutputCache Duration="1000" VaryByParam="id" %>
As you see above, output is generated whenever I enter a new id. If I enter an id already entered before, then my cached result shows up.
Cache by VaryByControl method
In this approach, Asp.net tracks the change in a particular control to cache page. For example, in the below piece of code, my page is cached whenever the value is changed in the dropdown control named ‘ddlOption’. If I select the previously selected value in my dropdown, then my cached results show up. Check it in action below
<% @ OutputCache Duration="1000" VaryByControl="ddlOption" %>
Cache by VaryByCustom method
This is the last technique of caching page using outputcache directive. By this approach, you can define your own custom logic to cache your page. Instead of defining my own logic, I have set the value to ‘browser’ which means the result will be cached based on the client browser. For each browser, a separate result will be cached.
<% @ OutputCache Duration="1000" VaryByCustom="browser" VaryByParam="none" %>
Conclusion:
In this article, we saw the basic methods of output caching. In my next article, we will see some advanced methods of implementing caching on our websites.