What is Caching?

If you run a website, it’s likely that you’ll come across the terms cache or caching at some point. If you have worked with a web designer or developer, they have probably asked you to “clear your browser cache” at some point. So what exactly is a cache and how does it affect your website?

What is a cache? #

Caching is the process of temporarily storing data so that it can be accessed quicker when it that data is requested again. It is one of the most effective methods of speeding up a website, especially if the site uses a database, and can seriously improve a site’s performance.

There are lots of different types, or levels, of cache. A typical website may have a browser cache, a website or server-level cache and possibly a database cache. It’s important to know that although these elements are independent of each other, they are all working to achieve the same goal: a faster website.

What can be cached? #

Almost anything you see on your website can be cached: page content and images would be prime examples of commonly cached elements.

If your site runs on a database, which includes almost all sites that run on a content management system like WordPress, Expression Engine or Perch, queries to the database can also be cached. This reduces pressure on the database and further helps to improve performance.

How does a cache work? #

When configuring a cache, a user can set the period of time that an asset, such as an image, will be stored for. This will depend on the type of content: an image, which is unlikely to change frequently, if at all, may have a cached life of a month or longer. Page content may have a much shorter cache life that’s specified in hours.

Using the example of an image, the first time a user visits a page that contains that image, their browser will have to download the entire image from the server. If a cache has been enabled and the user visits the same page within the specific cache life of that image, the user’s browser will request the locally stored version of that image, rather than downloading the image again from the server.

Blimey.

This improves the load time of a page because the user’s browser doesn’t have to request the image from the server or wait for the image to be downloaded. If you multiply this effect across several page assets, perhaps several site images and a logo, it can have a dramatic impact on a site’s performance.

This is the underlying principle that’s replicated at each level of the cache. Each level of cache will store different types of data, roughly broken down as follows:

Browser cache: stores files locally, such as an image or favicon.
Server cache: stores the latest versions of files that the browser accesses.
Database cache: stores common database queries.

In practice #

At some point, usually towards the end of a site build though possibly before this point, a website cache will often be set up. Once a website goes live, it will usually be cached to improve performance for all users. This is more common than ever now that website performance is factored into search engine rankings.

Website caches can be set up in various ways. If a website has a lot of traffic or is on a particularly poor server, you may hear a developer say that a site has been aggressively cached. All this means is that the site has been set to load as quickly as possible. This usually means that assets have been set to have extended expiry dates and it may mean end users don’t see the latest versions of a page immediately.

How aggressively a site is cached will depend on lots of factors including the site’s functionality, the site’s performance and any limitations of the site. For instance, membership sites can be notoriously tricky to cache as the displayed page content has to change depending on whether a user is logged in or not.

How does this affect me? #

Caching a site should lead to improved site performance, but it can create a couple of issues along the way. For example, you may update a page and then have users say they can’t see changes, or you may experience this yourself after a web developer updates your website.

On some dynamic websites, the cache may only be active for end users. This means that while logged in as an admin you will see the most recent version of a page, while ordinary users may temporarily continue to see a cached version of the page.

In each of these cases, the ability to clear your cache should solve the issue.

Clearing and managing the caches #

If you notice a mismatch between the content you can see on a webpage and the content you know to be on that page, the first port of call will be to clear your browser’s cache. Instructions for this depend on both the browser or operating system you’re using – use a search engine for clear instructions if you’re unsure.

If your website uses a database, you may come across an issue where you’ve cleared your browser cache and still can’t see the updated webpage. In this case, it’s likely that the server or website cache needs to be cleared as well. Your developer will be able to demonstrate how to do this or do this for you.

For dynamic sites, it’s recommended that you do this every time you update the site. Once this has been done, you’ll need to clear your browser cache, and you should see the changes reflected on the page.

I can’t ask my visitors to clear their cache! #

Of course not, and this is why clearing your site’s cache can be helpful in managing the content that users see.

It’s worth remembering that the cache will clear of its own accord at some point. Cached web pages are often set to expire in as little as 10 hours. If a user happens to be viewing a cached version of a page, they won’t need to wait long to see the updated version.

Ultimately, this is a balancing act. Leveraging caching could knock several seconds off a dynamic page’s load time, so the overall performance benefit often outweighs the occasional issues that a cache can create. A well-maintained site will tend to experience fewer problems as the cache setup can be tweaked over time to ensure maximum performance for both the users and the website.