In our last post, we talked about how caching works and why it’s an important part of the viewing experience on your site. But sometimes there are caching issues that seem to break the site. What causes these issues? What can we do to prevent these issues from occurring?

If caching is so great, why does it sometimes break my site?

Another fantastic question. The answer is fairly simple.

First, we’ll talk about what happens when caching fails. It usually results in styling (CSS) conflicts or issues with the interactivity of your site (JavaScript). When your fonts or background colors suddenly stop displaying properly, or the mobile navigation menu won’t stay closed, but only for one (or a few) readers, this is very often a caching issue.

You’ve seen it yourself — you log into your WP admin dashboard and everything looks different! You contact support and they tell you to “clear your browser cache” and instruct you on how to do so. Everything looks right again!

What happened? In short, the information stored on your website didn’t match the information the cache told your browser to look for. This can happen with either type of caching — browser or server-side — and it’s a tough technical issue to solve.

There are so many pieces of the website that the browser and server cache, and any time an update is made to a plugin, theme, or WordPress itself, there’s a chance something in the update will be different than what’s stored in the cache. This is normal and, most of the time, developers are able to avoid this actual information/cached information collision by attaching extra bits of information to the CSS, JavaScript, and other files that tells your browser what changed.

Again, this is quite difficult and there are sometimes conflicts. This can cause panic because it might temporarily show an incorrect version of your site to your readers, which isn’t something we want.

What can I do to keep this from happening?

There’s no way to prevent this entirely. Even if you have no caching plugins and all caching is disabled on your server (which you wouldn’t want to do because that’s not very efficient at all), your reader’s browsers will still store a cached version of your site. However, there are a several ways to help minimize the conflicts.

1. Make sure your caching plugins or server settings are set to reset your cache at least every 24 hours.
2. Reset your cache after updating, activating, or deactivating plugins and themes. This is especially important for plugins that affect the visuals and interactivity of your site (sharing plugins, image optimizers, recipe cards).
3. Separate your mobile and desktop caches when possible.
4. If you have a caching plugin, ask your host to disable server-side caching to prevent cache conflicts.
5. If you’re not using a caching plugin, talk to your host to make sure your server caching has similar settings.
6. If you see the same issue over and over, contact support!

Glossary of cache terms:

• Browser caching – The information a browser stores about a particular page on a site after visiting it for the first time.
• Server caching – The information a server stores about a particular page.
• Request – the message a browser sends to a server asking to for a specific page or piece of data. This message includes the URL, information about your browser, and search terms (if applicable), as well as many other pieces of information.
• Response – the message a server sends back to the browser when it has gathered all of the necessary data. This includes the HTML and links to images, CSS, and JavaScript,.