Cache Control & Filename Fingerprinting

Whether browsing the internet on a computer, phone or tablet; caching is something we have all heard of and most of us have at some stage come across the advice to clear our browser's cookies and cache. But for web developers a deeper understanding of how caching works and how to control it is often required.

So what is browser caching?

Caching happens when the computer or mobile device visiting a website downloads the files used to display the web page such as image files, css files and javascript files and it stores them locally on the computer/mobile device. Then when the web page is visited again on the same browser it can load the page faster because the files don’t have to be downloaded from the server, instead they can be loaded much quicker from local storage or memory aka the browser’s cache.

Web Page Speed & Optimal Caching

If you’ve ever run your website through one of the many page speed test tools that are available online you might have got a report back that recommends setting up optimal file caching for your website. By default most web browsers will cache automatically to a degree however it is usually a much shorter time than what is generally recommend and often the cached files are discarded when the session ends by closing the browser.

Google’s page insights is a good tool to check website performance for both mobile and desktop and their recommendation is to set caching for web page assets such as images, css files and javascript files to a year. This means if someone visits your website today and revisits within 12 months their browser will still load files from it’s local cache instead of downloading the files each time. That is if the storage space for the browser cache hasn’t filled in the mean time because when it fills it will automatically discard older files for newer ones. Also remember that cached files can also be reset by the user manually by clearing the cache in their browser settings or by simply pressing CTRL+F5 on a computer for a full reload of the web page.

Setting up Cache Control on your server

So now we know how caching works and how it can speed up a website but how do we let the browser know how long you want it to cache your website’s resources? Well this can vary depending on your web server setup and the hosting control panel you are using. Some hosting control panels will give you the ability to set this and sometimes you will have to use a htaccess file to create caching rules with expiry times for specific file types. You will need to look into which cache control method is best suited to your particular setup.

Web Design, updating website and refreshing the page

Once cache policies are setup on your website server; web page resources will be cached by the browser for longer, web pages will load faster and the page speed tools, search engines and visitors will all be a little bit happier. Yay!

But what happens when you make changes your website? For example you make some style changes to a css file but the website is still using the old styles because it’s loading the old css file from the browser cache and not the file you‘ve just uploaded. Well as the web designer you know the problem so you can just clear the cache in your browser settings or do a full page reload but what about visitors to your website? They might not necessarily know to do this and could end up seeing a broken page with a mix of new and old file resources. Well the best way to ensure the newest version of a file is used is to change the filename. The browser will see that this new file does not already exist in the cache and will download the new version from the server. This is called cache busting and the method of naming files uniquely to bust the cache is called fingerprinting.

Automatic Filename Fingerprinting in XT CMS

The next version of XT CMS will include automatic filename fingerprinting so you won’t have to worry about manually changing filenames on web page assets every time you make a change. The CMS will import any uploaded theme files including images, css files and javascript files and will fingerprint each filename so every time you upload changes it’s all taken care of automatically. The CMS will even minify imported css files to reduce file size. So all you have to do is setup cache control on your website and the CMS will look after the rest.