Having a performant website will be the top of most clients' lists of things to do and one technique that you can employ to speed your website up is cache busting on the Episerver assets on your website.
Getting the balance of what to cache and how long you cache everything is tricky. If you cache things for too long and the asset is updated, you have an issue. On the other hand, if you have really low cache times, then your website might run really slowly. If you want to learn a good technique to help overcome this, then read on.
Why Use Cache Busting?
To get good performance on your website, you will need to enable caching on all your Episerver pages and assets, e.g. CSS files, JS files, images. To get the best performance you want to add long expiry timeout on your items. Images and assets, unlike content, once uploaded into the CMS will probably never be updated again.
It doesn't make a lot of sense to only cache these items for 30 minutes. We want to cache these assets for as long as possible, ideally forever if they will never change, however, if we set really high cache times we face an issue.
When an Episerver asset is requested by a site visitor's browser (not Non-Episerver static files) that has a cache expiration header set, the asset will be returned to the visitor's browser and the browser will cache it.
As the browser has cached the asset, whenever that user looks at that page, the browser will never attempt to get a new version of that asset from the server and will display that cached image until either a) the expiration period is reached, or, b) the user clears their cache.
If you have a client who wants to run a sales campaign, say black Friday sale and they want all their users to see all the sales images at the same time, you have an issue. As the cached version of the file is stored in your visitor's browsers, you won't be able to invalidate their cache so their page will only display the old non-black Friday images.
They will only see the updated black Friday images when the images cache time expires, or, they clear the browser cache, as the browser locally stores a cached copy of your static assets and won't look on your server again until the cache period has been met. This is where cache-busting comes into play...
What Is Cache Busting?
Cache busting is a strategy, whereby you add a unique identifier usually a hash based on the published date to the assets URL that the Episerver page HTML generates. Adding this unique identifier, allows you to get around the issue of people having assets cached locally. When an asset changes you update the Url's to it within your page HTML so the user's browser will look back on the server to find the new image. For example, say you have this URL:
When this asset gets browser cached, if you updated the image on the server the local browser cache would call the server again to load the image until the year 3000.
With cache-busting enabled, our Url could look like this:
Imagine, this asset is now cached in the user's browser, we update the image in Episerver which generates a new hash. The next time the page HTML is called, this Url will be returned:
How To Add Cache Busting On Your Website
Luckily, adding cache busting into an Episerver website is easy, as someone else has done all the hard work. If you head on over to, https://github.com/bjuris/EPiServer.CdnSupport you can download the project. Unfortunately, I don't think it has been created in a Nuget package, so you'll have to manually add the code to the project.
Next, you need to add an app setting, Episerver:CdnExpirationTime, episerver:CdnExternalMediaUrl. Episerver:CdnExternalMediaUrl can be left empty if you just want it to run on the current domain.
When you run your website, you should now see a unique identifier add to any Episerver asset Url, like so:
The plug-in takes the published date and as you can see above generates a unique hash that is appended to my images Url. With the code installed, you can set your static files to infinity if you really want to. If a content editor ever updates the asset within Episerver, a new one will be generated, the link in the page HTML will be different and the user will now see the updated asset, simple!