Caches are fantastic and help “speed up the internet” while reducing bandwidth. For most people, “clearing the cache” is a magical solution that fixes most problems with page loads. However, this only works half the time. That’s because there are different types of caches and you may have cleared the wrong one.
What is a cache anyway?
Basically, a cache (pronounced “cash”; plural “cashes”) is a place that stores a copy of some data that was pulled from the original source, in order to deliver it faster to the user.
As a simple example, imagine ordering a burger through a food delivery app. You place an order, it gets sent to the burger joint’s kitchen. The chefs have to grill the buns and patty, assemble the burger, pack it, and pass it to the rider, who then sends it to you. The process takes 45 mins. This is a “cache-less” scenario.
Now compare this to McDelivery. You place an order, the server passes a pre-assembled burger from the kitchen counter to the rider, who delivers it to you in 20 mins. The kitchen counter is an example of a cache.
Now imagine if I opened a McDonald’s booth next to your house, pre-stocked with burgers. You place an order and I send it to you in 10 seconds. There are two caches here – the McDonald’s kitchen counter, and my booth. Get the idea?
PS: *Now* you understand why there’s a picture of a burger… haha. McDonald’s is fast, but for a truly delicious burger, check out myburgerlab. The Waterballoon (pic) is my favourite burger that’s no longer on the menu, sadly. Due to Covid-19, they and other local businesses need your support now more than ever – check out their amazing range of burgers and place an order if you ever itch for a burger. They’re the best in the country!
Why do I need to clear the cache?
When you update your website (e.g with a new picture or blog post), you would obviously want your website visitors to see the updated content. However, the caches are still holding the old version of your website, so you need to clear them so it loads a fresh version to serve to website visitors.
Caches usually timeout within 12 hours and will auto-reload after that period, so if you forget to clear the cache, don’t worry, just wait. Usually, updating your website will trigger automatic cache clears across all levels as well. However if that didn’t happen for whatever reason, you’ll have to clear the cache manually.
There are 4 common caches that work together to serve web pages faster:
Server-level cache
Not all websites use server-level caches (often just referred to as the “server cache”) as it is more difficult to set up. However, server-level caches work faster (and are delivered faster) than application-level caches, which is why experienced website managers (e.g. Pixl, cough cough) prefer using server caches instead. Technically, there are different types of caches on this level (e.g. static file cache, object cache) but I’ll spare you the details. Example caches on this level are:
- Redis (used in Pixl hosted sites)
- NGINX
- Varnish
- Litespeed
- FastCGI
- Memcached
- OPcache
- SiteGround SuperCacher
Clearing the server cache may or may not be possible via the WordPress admin (or whichever other CMS you’re using). Check with your server team or web developer regarding this.
For Pixl-hosted sites, flushing the server cache is as simple as clicking the Purge Cache and Flush Object Cache menu items at the top of your admin bar within WordPress.
Application-level (WordPress) cache
Just like with your phone, a server can host many Applications, though best practice is to limit it to one app per server. WordPress is an example of an app, as is Joomla, Magento, BBpress forum, Wiki, and more.
Within WordPress, there are various plugins used to generate a cache, and these are delivered to the user via the WordPress framework. This type of cache is most commonly used in websites with cheap/shared hosting, as it is super simple to set up and works with any hosting plan. Examples are:
- WP Rocket
- Swift Performance
- WP Fastest Cache
- W3 Total Cache
- WP Super Cache
- Comet Cache
Clearing the cache for these plugins is very straightforward and can often be done via a quick link in the top admin menu.
Websites using a server-level cache do not need another application-level cache as it is redundant. Using both at the same time will actually slow down the website and might cause errors, so don’t.
Browser-level (Chrome) cache
Unlike the server- and application-level caches, the browser-level cache sits on the user end and cannot be cleared by the website admin. Typically when a server/application-level cache is cleared, this will trigger the browser to pull a fresh version from said cache.
The browser-level cache sits within your device itself, and is different from device to device. For example, Chrome in your laptop has a different cache from Chrome in your phone. If you use multiple browsers, they each have different caches. Clearing one cache does not clear the other.
The browser cache exists so that your browser does not have to pull 100% of the content from the website when you return for a 2nd visit. For instance, if a website is updated with new text while keeping the same images, your browser will only need to load the text from the server, and reuse the images within the browser cache. If nothing was updated, the browser just reloads everything from the cache (well… not technically everything, but you get the picture). This can speed up page load time by 10x or more.
To clear the Chrome browser cache for a specific page, hit Ctrl+F5 on Windows, or Cmd+Shift+R on Mac. As far as I can tell, there is no equivalent for mobile.
To clear the entire Chrome browser cache, hit Ctrl+Shift+Del on Windows, or Cmd+Shift+Del on Mac. This will bring up the Clear Browsing Data window. You can just clear the “Cached images and files” portion of the cache, or everything else should you so choose. For mobile, tap the 3-dot icon to open the Chrome menu, go to “History”, then “Clear browsing data”.
Local DNS Cache
This cache is different from the 3 aforementioned caches. Those caches store files, whereas the DNS cache stores addresses. “Local” in this case refers to your device (as opposed to the server).
Going back to the McDonald’s analogy, the DNS cache is similar to to your phone’s Contacts app. Your device maintains a DNS cache so it doesn’t have to request for the server IP of a domain every single time.
It is extremely unlikely that you will need to manually clear the local DNS cache. However if you need to, there are a few options:
- Clear the Chrome DNS cache
- In your Chrome address bar, type “chrome://net-internals/#dns”
- Click on “Clear host cache”
- On the left bar, click on “Sockets”
- Click “Close idle sockets”, then “Flush socket pools”
- Flush your computer’s DNS resolver (Windows only)
- Right-click your Windows Start icon, and select “Windows PowerShell”
- Type “ipconfig /flushdns”, then hit Enter
For Mac & Linux, see further instructions here: How to clear DNS cache on your computer
If the above doesn’t work (DNS can be stubborn), you can try switching to a different DNS altogether – see here for a guide. Note that this is for Local DNS (your device) and not your website’s DNS server, which is entirely different matter. Yes, the internet is complicated.
Thanks for reading, and I hope this helps you understand caches better!
Michael
