Using Caching To Improve Load Time

Caching is when data is stored so future requests for that data can be served up faster. For a website, caching lets a stored copy of a requested page to be served rather than having to retrieve that data from the server. This decreases the download time because the browser does not have to get the information from the server of origin.    

Two Main Types of Caching

There are several different types of caching, but we’ll look at the two that are most relevant to us. They work off the same concept, but there is a little difference between them. 

CDN Cache

A CDN cache (Content Delivery Network) is when the CDN stores the cache in proxy servers. CDNs are become more and more popular because of their ability to help deliver fast load speeds.

CDNs have proxy servers and data centers located all over the world. This allows them to store data in a location thats geographically close to the end user. By storing cached data in these servers, they are able to deliver that information to your end user much faster. 

CDNs are quickly becoming the standard rather than the exception. Google is going to start weighing user experience more in the year to come. Page load speed will play a big role in that. CDNs help you get those fast load speeds. 

Timeline for bringing page experience ranking to desktop – Google

Browser Cache

The second type of cache is what comes to most peoples mind when they think about caching. A browser cache is when the browser (Chrome, Safari, etc) saves a copy of a web pages data. This allows the browser to pull that data up next time you visit the site, rather than having the server send it over. This allows web pages you’ve previously visited to load faster. 

The data from a browser cache is stored locally (on your device). Since the data is stored on your device, you are able to delete it if you want. Doing this is generally not recommended because you could delete usernames, passwords, or other important information in the process. With that said, i’ll show you how to do it in Chrome. The process will be similar in most other browsers. 

Delete Browser Cache in Chrome

First, you click on Chrome in the top menu, scroll down to “Clear browsing data,” and click on it. 

That will bring up a screen like the one below. You have the option to clear browsing history, cookies, and cached images and files. If you click the blue “Clear data” button, those will be deleted. 

If you click on the “advanced” tab, you will have a couple more options. The first is setting the timeframe for data you want to delete. You can delete anything from an hour ago (Hello, 14 year old self) all the way to all time. All time deletes everything stored.

In this image I had selected all-time and you can see there is a lot of stuff saved. That makes sense. I’ve had this laptop for many years now. 

As you scroll down the advanced tab you see a couple more options. These are where it can be a little dangerous. I have “all-time” selected right now. I really don’t want to delete all the passwords or autofill data I have saved on here. If we’re being honest, I’ll probably never remember half the passwords, so that would lead to a lot of time spent trying to recover them. 

As I said, it is up to you if you want to delete data stored on your device or not. I would only recommend doing it under the rare circumstances when you are having problems and this seems like the only option. Just be careful.

Common Caching Terms

When you go to set up a caching plugin, you may run into a couple terms you don’t know. Let’s cover the basics. 

Cache Hit

A cache hit is when a user makes a request and the cache has the requested content saved.

Cache Miss

A cache miss is when a user makes a request and the cache does not have the requested content saved. 

Max-age

Max-age is the time (in seconds) that a response remains valid. 

Freshness

Freshness is a term used to describe whether an item within a cache can still be served to a client. Content will only be used if it is within the specified freshness time frame. 

Stale Content

Stale content is items in the cache that have expired. This is set in the caching policy settings. 

Validation

Validation is when stale items are checked with the original server to see if the cached content is still the most recent version. 

Expiration

Expiration is the time after which a cache should not return the response. Expired content can still be validated against the origin server and delivered.

Best Caching Plugins

I could show you the top 20 caching plugins, but that doesn’t really serve anyone. Here are the top 2. One is the best paid plugin, the other is the best free plugin. 

WP Rocket

WP Rocket lazy loading plugin

WP Rocket is the best on the market. This is a paid plugin that cost $49/YEAR. On top of cashing you will also get gzip compression and lazy loading, among many other benefits. 

WP Rocket is a lightweight plugin that’s easy to set up and use.  This plugin over delivers and is well worth the small yearly fee. It is the plugin that I use and I couldn’t be happier with it. 

WP Super Cache

WP Super Cache is a FREE Worpress caching plugin. It is one of the most popular caching plugins for WordPress. 

WP Super Cache works by creating a copy of every page on your site in the form of HTML static pages. . These copies are then displayed as static HTML files.

If you have a lot of posts, it could take a while for the plugin to get through all of your pages.