When it comes to improving the performance of your website, performance optimisation is kind of a dark arts subject. One thing that is usually a given, is that if you try and need to do something custom then you're probably in for an interesting journey. Under the hood, Episerver uses a lof of the standard.NET caching.  In today's guide, I'm going to cover how to enable output caching in your Episerver website.  This post is the first in a series of applying output caching to your solution.

How Output Caching Works - For Dummys

Output caching is the .NET way of caching your pages and blocks HTML snippets to improve performance.  Output caching works in two flavours, full page caching and partial page output cache differently.  In Episerver, a page and a block can both use full page output cache.  Full page cache refers to anything that has a controller.

 In Episerver a block doesn't necessarily need to have a controller, so some blocks can also be classed as MVC partials.  So, depending on how you define your blocks, the way .NET will cache it behind the scenes may be different. In .NET terms a full output cache is managed by the output cache module and works with a controller.  The 'partial' output cache (no controller) uses MemoryCache out of the box which was introduced in .NET 4.  In theory you can change this to use Redis or a third party cache database.

Output Cache Profile

In case you are new to output caching, the concept is pretty simple.  In your web.config, you create a cache profile. The configuration might looks like this:

The enableOutputCache is useful in terms of deployment.  When you enable caching.. your pages cache.  Enabling output cache in your development environment creates a nightmare because the page caches prevents you from seeing new code changes. 

You can use this property to turn on and off caching between environments. In the cache profile configuration, the varyByParam is a very useful attribute to be aware of.  The varyByParam property is a semicolon-separated list of params that is used to uniquely identify a cache object. 

A cached object might be a whole page or a whole block for example.  In a 'normal' scenario queryByParams might relate to Url segments or query string parameters.  In Episerver, things like Visitor groups are stored within memory.Add in custom code to include these custom parameters.

Output Cache Attribute

To enable output caching on your page, you need to apply the 'ContentOutputCache' attribute to either the controller, or, the actions in your controller you want to cache, e.g.

The next part of the process is to enable the response headers on your page.  If you don't do this you will see a no-cache set in your HTML requests response header.  To do this is pretty simple.  At some point on a page load you need to add the following code:

On most of my projects I usually create a base controller.  This code would be good to live in there and get triggered on each page request. If you compile your website and load it in a browser, the page should cache.  In order to check this, if you look in the pages response header:


You will see the Cache-control attribute is now set. This means that your page is cached :) Also, if you look in the Request header you may see the no-cache attribute set.  You do not need to worry about this, this is fine and dandy. This is part of the process of your browser talking to the server.  This does not mean that your page is not cached server-side.

Caching can be a complex beast but getting the basics up and running is fairly trivial.  All you need to do is create a cache profile in your web.config, apply the output cache attribute on the page or block controller that you want to cache and then on every page request, set the cache expiration policies.  After that you're golden.