What Is A Cache?

What in the world is caching and why should I care?

Let’s start with a story.

Imagine you go to a restaurant. It’s your first time, so you sit down at your table and look through the menu. You’re reading the instructions of this restaurant.

You learn the names of the foods, the categories, you even see pictures and learn about Happy Hour deals. You pick the Chicken Cacciatore with tomatoes, bell pepper and capers. It’s divine. You’ve never had chicken so tender and flavorful.

You tell your waiter, “I couldn’t stand it. Which is why you don’t see it on my plate anymore.” He laughs politely, pretending he’s never heard that joke before. “Would you like a refund?” he jests. You both chuckle a bit and you depart the restaurant contentedly.

Next week, you go to the same restaurant at the same time and you get the same waiter. He remembers you, too, and says, “the usual?”

Ten minutes later, you’re eating that delicious Chicken Cacciatore with tomatoes, bell pepper and capers again. So fast. So delicious. #blessed

That’s a great story, but what does this have to do with my site?

In this story, you are the reader of a site. You go to https://thegreatestblogever.com (obviously your site) for the first time and have to wait a little while as it loads. What’s happening here?

Your internet browser sends a request to the website’s host (server) asking for the specific page you’re visiting. The server performs a lot of logic and responds with a bunch of information. It gives your browser the outline (HTML) of the site, fills in the data from the database (the post title and content, the recipe card, comments, author information, links to images, style information — CSS — and JavaScript for the interactive bits — ads, share buttons, post ratings, videos).

That’s a lot of work for both the server and the browser. And this request-response cycle happens every single time you visit a page.

But this isn’t very efficient, which is pretty contradictory to the concept of computers and the internet. Something needs to speed this up. Along comes caching. There are many methods for caching and many places it can happen, but there are generally two types that concern your site.

Browser caching

The first is browser caching. This technically has very little to do with your site and everything to do with your reader’s internet browser.

Recall our story — the one with the menu and the waiter with the great memory and delightful sense of humor. The first time your reader visits your site, their browser has to tell the host (web server) that it wants to see the page. The web server sits the browser down at a table, gives it a menu (the HTML and other data) and all the information the browser needs to make its decisions.

The browser looks through all the information and starts gathering all of the information: It uses the links to the images, CSS and JavaScript, and begins downloading each file. As your reader waits for the page to load, the website shows them a loading animation (the familiar joke you share with the waiter). In an ideal situation, this should all happen in less than 10 seconds on a 4G mobile internet connection.

Browser-side caching

The browser is built to assume the reader will visit the site again, so it uses browser-side caching. All this means is that the browser saves the HTML, images, CSS, JavaScript and other resources it downloaded the first time on the reader’s computer. The next time your reader visits the site, their browser sends the same request to the web server and gets a similar response.

This time, the browser looks at the response and determines what information has changed. It then only downloads the new information and uses the saved (cached) data for the rest of the page. Now it only takes 5 seconds to load on a 4G mobile internet connection. Much better.

But 5 seconds is too long. And 10 seconds is way too long!

You’re right! 10 seconds is most of the time you have to capture your reader’s attention. Not good. Not good at all. How can you fix this? What can you do to make your site load faster? You can do a lot, actually! But this post is about caching, so we’ll start there.

We’ve talked about browser caching, which is fantastic, but it only helps the second time a reader visits a page on your site. What about the first? If they don’t come back after the first, what good is caching at all?

Excellent questions! Thank you for asking.

Server-side caching

Browser caching is the first type of cache we talked about. Luckily for you, there’s another type that you can control: server-side caching.

You’re familiar with the server. It’s where your website lives — the database, the WordPress installation, the images; all of these reside on your host’s web server. Remember, when a reader visits your site, their browser makes a request to your web server and asks for all the information it needs to show the web page.

When your server receives that request, it has to go through a lot of steps and perform a lot of tasks to return a response to the browser. It starts by reading the request and determining what page the browser wants to see; it looks for the HTML outline, collects all of the database information about the page/post (title, content, metadata, related posts, etc.), grabs all the links to the images, JavaScript and CSS. This can take several seconds, depending on your host and the plan you’re on.

Server-side caching can speed this process along by allowing your server to store (cache) the response (the HTML, database information, post metadata, etc) and send that to the browser when the page is requested. This can drastically reduce the time it takes for your server to respond to your reader’s browser. Now what took 10 seconds to load might only take 5 the first time, and only 2-3 seconds the second time. A great improvement!

So far, caching seems awesome. But if you’ve been around a while, I’m willing to bet you’ve run into some issues with caching. What causes these issues? What can we do to prevent these issues from occurring? Find out in part two of this post!

NOTE: Server-side caching can be managed by a caching plugin or through your server portal (sometimes this can only be managed by your host). You only need one method of server-side caching, so, if you’re using a caching plugin, check with your host to make sure the server isn’t performing extra caching.

NOTE 2: Page load times are generalized for simplicity’s sake and are loosely based on the standards set out by Google for page load speed requirements. Your results will vary depending on the complexity of your site and what hosting plan you use.