Three Ways To Improve Performance Using Caching In ASP.NET MVC Applications

Nowadays, visiting a website on a desktop or on mobile is our daily routine. Whenever we visit a website or a web application, then we expect that it will render very soon, within 5 to 10 seconds. But unfortunately, there are only a very few websites that take the minimum time to open and the reasons behind this are as following.

1. Huge content
2. Large and multiple images
3. Complex business logic
4. Too much server requests
5. Poor connection
6. Data Access Layer etc.

So, there are several reasons behind the slowness of a website. Now, what we can do to resolve these issues that hamper the performance of the website is, we can use Caching. Yes, using caching, we can cache the data and if the user makes another request for the same type of data, then we don’t need to go and get the same data again from the Server and we don’t need to execute the same logic again and again.

Caching is a technique which helps us to store our data somewhere we already have, and if we require the same data again, then we can get it from the stored data. Data can be saved at client side as well as server side. It totally depends on your requirements, not your choice.

Advantage of caching

If we define the advantage of caching in one word, that will be “Performance”; and it can be achieved to minimize the following things.

1. Minimize Server round trips [Hosting Server or Database Server or Any Other Server]
2. Minimize Network Traffic [Http Call to Server]
3. Avoid repeating same data binding logic

Tips and Tricks when using ASP.NET MVC caching

1. Don’t use caching with the data which changes frequently.
2. Don’t use caching with Authentication logic.
3. Don’t use caching with the data which is unique for the individual user.
4. Don’t use caching with data which use very rare like privacy policy page.
5. Don’t use caching for an Error page.
6. Use caching with data which is used very frequently and same data can be used by all user.
7. Always use caching with images or media files.

Generally, we can cache our data using 3 ways in ASP.NET MVC.

1. Caching Static Content
2. Caching whole or partial page response using OutputCache Attribute
3. Caching shared data

CACHING STATIC CONTENTS

While designing any website, we have to use static content. Static Content generally means a piece of content that does not change dynamically, like your images, CSS and JavaScript files etc. These are really heavy files and loading these from the server is a time-consuming task. Do you know how much time is taken to load this static content? It is probably more than 60% of the total time we are consuming. But that is normal. If we use more static content, then it will definitely take more time to load.

Now, the question arises, "Should it take time to download this content every time when we use the same page on the same browser again and again?"

Let's understand it from a demonstration of how we can achieve static contents caching in ASP.NET MVC.

Here, I have created one ASP.NET MVC 4 application. If you don't know how to create Asp.Net MVC application, just follow my previous articles. After creating an application, go to Index View for the HomeController which is auto-generated using the following codes. Here, you can see that I have just added three images. For this demonstration, I have downloaded these images from Google; you can test it with any images. So, when we run the application, these images will be downloaded from the server every time.

Here is the Index Action method which is responsible for rendering our Index View.

Now, it's time to run the application and see what happens. When we run the application and go to developer tools > Networks section, we find that each static content like images, CSS or JS file is being downloaded. But if we refresh the same page, again the same process repeats and same files are downloaded again.

To cache static contents, we have to define a few configurations in our application's Web.Config file as below. Here, you can see, we have defined the file extension with mime type which needs to be cache. To define an age of caching time, we use "cacheControlMaxAge" attribute from "clientCache" and define the time here. For this demonstration, we have used 1 minute.

Again, it is time to run the application after configuration of caching for static contents. When we run the application for the first time, we see the same screen as above where we will find that each component is being downloaded in a specific time. But if we run the application again within 1 minute, we will see the output as follows.

The following images show that each static component is being retrieved from memory cache rather than downloaded from the server. So, here, we have achieved static caching technique. Now, using this, we can cache static contents and we don't need to download these every time.

OUTPUT CACHING

In ASP.NET MVC, we can cache page response using "OutputCache" attribute. This type of caching is basically used to cache your content generated by an action method. "OutputCache" attribute can be used with activity level or controller level. In Output Caching, we can define the age of caching using duration in seconds. Here, we can also define the location for caching; it can be client side or server side. If we would like to cache the content using some parameter, then it can be defined using "VaryByParam".

So, let us understand it with an example. Now, we will create a new action method as "Index1" as follows. Here, we are creating a list for the blog post which contains 1000 records.