“Have you cleared your cache?”

This is a question we often ask our colleagues and our clients when they contact us in a panic after a site has been updated but it isn’t looking right. But what is a cache exactly? Why do I have one? Why does it sometimes cause issues? Is mine different than yours? Can I find it at the end of a rainbow?

Caching is as important as it is mysterious — it has the power to make your site faster, less resource-intensive, and more enjoyable to use. Let’s take a look at what caching is and how it is used.

A Bit of Background

The internet is amazing and complex. We often take for granted all the different operations that take place when we’re surfing the web. When we visit a website, we enter a URL or click a link and the site loads up in a few seconds. But behind the scenes there are many things that go into making that happen.

For dynamic sites (like WordPress sites), numerous files and data are brought together to create a page. Your internet browser and the server have instructions for how and when to bring together templates, styles, scripts, images, and database content to create the final page. This might sound like a lot, and for complex or file-heavy pages, it is. If you’ve ever been to a website that loads slowly, it’s probably because the site is requesting many files from the server. Downloading and assembling these files can take a very long time which makes the site load slowly and the experience less than ideal.

Enter Caching

One of the best ways to avoid the slowdown of request and assembly is to use caching. Caching is a technique which lets the server or browser serve a pre-built version of the page rather than going through the whole page-building process. Now when a user visits the site, they will be served a static version which will load much quicker!

Imagine a hungry customer visits a restaurant to order a sandwich. They want to see what the sandwich looks like so they ask the chef to make one. The chef puts together the bread, spread, and toppings and presents it. The customer decides they don’t want the sandwich, but instead another dish. So the chef throws the sandwich away and makes a different dish instead. After the chef presents this dish, the customer decides they’d actually like to see the sandwich again. The chef goes back and makes the sandwich all over again, but this time they take a photo of the sandwich before presenting it. The indecisive customer says they would rather have something else. So, the chef makes another dish. But — you guessed it — the customer again decides they’d rather have the sandwich. This time, the chef shows the customer the photo of the sandwich in an instant, rather than having to make a whole new sandwich.

In this imperfect metaphor, the customer is the web site visitor, the chef is the web server, the food ingredients are the files, images, data, etc., the final meal is the web page, and the photo of the meal is the cached version of the web page. It takes much less time and energy to present a static representation of the meal (web page) than having to rebuild it each time.

Caching Types

There are a couple different ways that web content can be cached:

Browser Caching

First, the user’s browser can cache files. When a user visits a site for the first time, the page will load slow-ish because the browser is requesting the files for the first time. But when the user revisits the page, the browser has stored a local version of those files and it will serve that to the user instead. This is especially wonderful for mobile users on expensive data plans and iffy connections.

Server Caching

Additionally, files can be cached on the server before they ever get to the browser. This is especially useful for website pages that are created using page templates and content from a database (like WordPress pages). So when the browser requests a page from the server, the server sends a pre-built version that it has saved in storage rather than going through the long process of building the page. Yay caching!

There are a handful of WordPress plugins that will do this for you. Our favorites that we use on our projects are WP Fastest Cache (free) and WP Rocket (paid). If content on the page or code in your site’s theme are updated, you will need to manually clear the server cache when using these plugins.

Besides page caching, the server can also cache database queries and data objects which makes the page-building process faster when it needs to assemble a new version of a page for a site user. We won’t get into the weeds on this caching, but just know that the system will try to minimize any work (like always doing the same database query) by saving repetitive or duplicate operations and reusing them.

When Caching Can Cause Issues

Every once in awhile you may run into issues with caching, and this usually happens when a site user is seeing old cached versions of files instead of the latest, updated versions. As we’ve seen, there are a few places where these old versions could be cached, and we need to clear our cache to see the right files. If it’s on the server-side, this would require the site administrator to manually clear the cache created by the caching plugin. If it’s the browser that has the old cache, the user will need to clear their cache. Once the cache has been cleared, the user will be served the latest files and the site will look right. Here’s a helpful link to see how to clear your browser’s cache.

One other potential issue to be aware of is that caching will not work properly on pages that have automatic or frequent dynamic page updates using server-side code instead of client-side code. Some caching plugins offer an easy fix to this by allowing you to exclude certain pages from being cached.

Final Takeaway

Caching is one of the easiest and best ways to improve your site’s performance. It’s a way to make your site more efficient, faster, and less resource-intensive. There are a few potential pitfalls, but the benefits far outweigh the costs, so we recommend it for any site. And remember, if you’re using caching on your site and things aren’t looking right after an update, try clearing your cache. 🙂