What caching actually means and how it works

Like many other technicaly keywords, the word cache is loaned from standard english, and traditionally is used to describe a secure hiding place for one's supplies. In a technical context, caching is used to describe the process of saving the result of a computation for later, to avoid having to redo it multiple times.

More specifically, in web development there are several layers of caching applied, to ensure the best possible performance. If you are working with websites, you should be familiar with these two caching methods, to boost your site's performance:

Browser Cache

Whenever you open a website and your browser starts downloading all assets required to properly display it, these assets (including HTML, CSS, JavaScript, Image and Video files) will be saved locally on your device.

This ensures subsequent loads of the same page will load much faster, since most of the required files don't need to be downloaded from the website's server to your device again. This also applies to page loads triggered by going i.e. from the homepage to a subpage of the site: Most assets like CSS and JavaScript files, as well as commonly used images like the site's logo or header graphics will already be cached in your browser.

For you, as a website maintainer, you both want to make sure that your website tells your visitors browser to cache as many assets as possible for as long as it makes sense and also that content that you update or change is re-downloaded by the browser so everyone can see the latest version of your website.

Enabling browser caching

All that is required to allow the browser to cache assets and responses for your website, is setting a cache duration or expiry for these requests. It sounds complicated, but this is usually done automatically with most performance optimizations measures, like using a CDN (for those assets served by it) or a caching plugin for your Content Management System (CMS).

You can verify that your website is enabling browser caching effectively, by running it through Goole Pagespeed Insights, which will show you which resources of your website are not optimized yet.

Clearing your browser cache

On your own device you can clear the entire browser cache for all sites and pages, by a specific option in the browsers settings.

If you're just interested in the current page your are on, you can use a much quicker option called a "hard refresh". Depending on your operating system and browser, you can use these shortcuts to trigger a hard refresh:

Hard refresh on Windows / any browser:
Ctrl + F5

Hard refresh on Mac / Safari:
Cmd + R

Hard refresh on Mac / Chrome & Firefox:
Cmd + Shift + R

You can try out any of these options on this browser cache testing site.

iPhone & iPad / Mobile Safari:

This one is a bit trickier, since the historically unreliable mobile download speeds have caused iPhones to hold onto the browser cache for as long as possible. Your best bet, to open a site without using the browser cache, is opening a website in a new Private Tab, and close and re-open any private tabs of a site to reload without cache repeatedly.

Clearing your visitor's cache?

The cache in your website visitors' browsers, can only be cleared by themselves, never by you directly. All you can do there is make sure your caching durations are setup with sensible defaults, and have some patience until updated assets are loaded for all your visitors.

The most common pitfall is replacing an image, while keeping the filename the same. If you switch out your logo.jpg with an updated file, also called logo.jpg, most browsers will assume the image has not changed, and use their locally cached version instead of your new one, until the end of the caching duration.

By renaming the image to something else (i.e. logo-new.jpg) before upload, any browser will immediately load this new version on page load, because it doesn't have an image with this name in it's cache yet. Note that browsers compare assets by their full URL, not just the file name at the end, but in many systems files with the same name will have the same URL as well.

Server-side Cache

While the browser cache makes sure a site loads fast for any user that repeatedly accesses your site, after the first load. You still want to make sure that the first request to your site is fast as well, which arguably has the most impact on a users impressium of the quality of your web presence.

If your website consists of more than static html files, there is some time that the server requires to pull your content out of the database and assemble an html file to send to your visitors on each request.

For most pages on a regular website, this result will be the same for all of your visitors, so there is no point in generating it again on every single request. Instead, the resulting html should be cached for as long until you make changes to that specific page in your CMS again.

This is also called a "page cache", and will make requests to your website (after the first load any user makes to a specfific page) lightning fast, even if you are on a budget hosting plan with little resources.

Note that server caching is usually skipped, as soon as the resulting html contains any content personalized to the visitor, this could be private information after logging in, or products added to the shopping cart in an online shop. This is part of why ecommerce websites need higher tier hosting plans, with more server resources available to them.

Enabling server-side page caching

The excact steps to enable caching of html responses on your server, will vary depending on your exact setup to deliver your website. If you are using a common CMS solution, there will very likely be caching extensions available, to cache the response of any page within the CMS.

For a more general and more performant solution, look for specialized hosting providers that already support server caching out of the box, directly at the server level. This will skip the entire CMS for cached pages, and return an optimized response for cached pages even faster.

If your setup, CMS or hosting provider doesn't offer any of these options without significant effort, another approach could be placing a caching server in front of your entire website. This is basically the same method described in the paragraph above, but on another server or even through a third party service like Cloudflare or similar.

Clearing the server-side cache

Since this cache is stored on the server of your website, you have full control over it, including being able to delete all of it at any point. While this rudimentary approach does work, it will cause the first request to a page by any user to be slow again.

A more optimized approach, offen available with caching solutions integrated into a CMS, is to only clear the cache for pages that have been changed. For more complex caching setups, this might require custom development, to make sure the right pages are cached throughout the entire setup (clearing both blog overview and detail pages, if a post title has changed, for example).

Cache Warming

To make sure your "real" visitors, are never the ones to receive a slow page load, you can try to warm the cache up yourself, by generating the response for each page, and saving it to the cache right after clearing it.

In the most basic implementation, this could be you, clearing the entire cache, and opening every page — or at least the most important ones — in a private tab or window (caching will be skipped if you are logged in).

More sophisticated caching setups, can handle this process automatically, either because they are connected with your CMS, or are using the sitemap, containing all URLs of your page, to know which pages to request.

Conclusion

Caching is mainly about getting the same result for repeated tasks with less effort by the server powering your website. By setting smart default values, and warming up your caching layers, you actually get much better performance for most visitors, while significantly reducing the load on your server.