Caching Explained

Quick Background

Before digging into caching, it’s important to briefly cover the core principles of how the Internet works. Within the context of caching, all you really need to know is that loading a webpage involves a series of requests between a client (you/your browser) and the website (the server).

To summarize, the requests look something like the following:

  1. Your browser (the client) requests a webpage from the server
  2. The server receives the request
  3. The server builds the HTML response
  4. The server sends the HTML to the client 
  5. The client receives and reads the HTML
  6. The client sends additional requests to get any other content the HTML indicates is necessary

What is Caching?

Simply put, caching is storing and saving previously retrieved and/or calculated data. Doing so can not only reduce the load on the servers but also significantly improve the speed of your website.

Types of Caching

The concept of caching is used across various technology but, in the context of the web, there are two primary places that caching occurs.

Server Side (#3 from "Quick Background" above)

A lot of websites (including ones built with WordPress) are generated dynamically. That is to say, when a client makes a request to load a webpage, the server has to run a series of calculations and lookups. Some common examples for a WordPress site would be:

  • What’s the logo for this website?
  • What’s the menu that should be displayed?
  • What’s the title of this page?
  • What’s the featured image of this page?
  • What’s the content of this page?
  • What’s the content of the footer for this page?
  • And much, much more

For these reasons, servers often cache the results of all of those calculations/lookups. The server will compute the page once and then save it in storage (cache) to use in future webpage requests.

Client Side (#6 from "Quick Background" above)

While it’s easy to think that loading a webpage would consist of just loading the entire webpage at once, that’s rarely ever the case in the modern web. There are CSS (post coming) files, Javascript files (post coming), images, and other assets that are retrieved in subsequent requests from your browser.

As such, browsers will automatically cache some of these resources. Websites often have core elements across each page (logo, header, footer, etc.) so, when the browser saves those resources locally to use in future requests, it can greatly improve loading speeds.

Caching Issues

Caching is critical in the modern web but that doesn’t mean it doesn’t come with its own set of potential issues. If you manage a website, you’ve probably run into a problem where your edits aren’t being displayed on the public side of your website. This is where “clearing the cache” can be useful.

Clearing the Server's Cache

As an admin of a website, the first thing to try is clearing the server’s cache. How to clear your site’s cache will depend on how your website is setup and what caching solution it’s using. But, for websites managed within the Division of Student Affairs, you’ll be able to clear the server’s cache by hovering over “WP Rocket” in the WordPress top admin bar and then selecting “Clear cache.”

Clearing cache in WP Rocket
How to clear the cache of your DSA website.

Clearing a Browser's Cache

One important thing to note is that you, as a website administrator, cannot directly force another user’s browser to clear its cache. Furthermore, the process to clear your browser’s cache will vary from browser to browser. PCMag has a well-written article describing how to clear the cache for all of the major browsers.

Tip: One of the easiest ways to test if your issue is related to a browser’s cache, have the user try loading the webpage using a browser they don’t normally use as it, most likely, won’t have assets cached yet. If the page loads just fine in the other browser, it’s a strong indication that the cause is the browser’s cache.

✝ While we cannot force someone else’s browser to clear all of its cache, we can use some tricks to have their browser reload assets individually. Learn more about cache busting.