Friday February 4, 2022
How to Clear the Pesky Browser Cache
As a developer, I am constantly having to clear the cache either in my browser or through a content delivery service in order to immediately see the changes I have made. Even more, a day doesn’t seem to go where a client doesn’t contact me saying they haven’t seen the changes or updates I have made to their site. The culprit? It’s almost always the cache.
What is a cache?
While it may sound like a handful of money, a cache is simply a way that web browsers (and other systems) help to speed up things by keeping local copies of files. So, instead of your browser having to download files from the web server each time, your computer will pull up the local copy. It can make websites load much more quickly.
Why would you need to clear the cache?
The cache needs to be cleared (or flushed) when you make changes to a website and you want the changes to be available right away. Developers will often either disable a cache or clear it after making substantial changes to code. If you make updates yourself or have a web developer update your site for you, flushing the cache is often needed to see the changes that have been made.
What are the different type of caches?
The most common is your local browser’s cache. This is where files are stored on your computer when you visit a web site. Those files can remain on your computer for an extended period of time.
Another type of cache is a server or service cache. These are caches that reside either on the web server or through an internet service. For example, many WordPress site will utilize a cacheing plugin that will help to decrease page load time by creating static copies of pages that don’t have to hit the database to be created. In addition, there are cacheing services called content delivery networks, or CDNs. While technically not a cache, it operates in a similar fashion by placing copies of code and assets on a speedy server on the internet that can delivery the content to visitors of your site more quickly than the web server itself. Cloudflare is a common content delivery network.
Ok, all that is great. So how do I clear the cache?
I’ve put together a list with links to support pages and articles for the major browsers and services. This is far from comprehensive, but covers some of the most-used apps and services.
- Google Chrome or Brave Browser (Mac, Windows, iOS, Android)
- Google Chrome Developer Tools with Disabled Cache
- Safari Browser (Mac, iOS)
- Firefox Browser (Mac, Windows)
- WordPress Cache Plugins: WPRocket, WP Fastest Cache, WP Super Cache, WP-Optimize
(Note: there are tons of WordPress cacheing plugins. Your web hosting provider may also include cacheing plugins. While different, most all of them provide a quick way to clear/flush the cache usually from the admin toolbar in the WordPress admin.)
- Cloudflare Cache and Development Mode
Tips and Tricks
There are always little tricks for browsers and cacheing services. Here are a few…
- In Chrome (and Chromium browsers like Brave), holding down the Command (Mac) or CTRL (Windows) key while clicking the reload button will often force the browser to grab the latest copy from the server.
- Switch on developer tools in Chrome with the option to disable to cache set to ‘on’. You’ll then not have to worry about clearing the cache to see changes.
- Cloudflare has a ‘developer mode’ allowing you to temporarily disable their cache. Nice thing about developer mode is it will automatically turn off after a set amount of time (usually a few hours). Keep in mind that your local browser cache will still be operational.
- Depending on how your website is configured, it may require you to clear caches in multiple places. For example, you may need to clear your browser’s local cache, a WordPress cache and also a CDN cache such as Cloudflare. (This is why the tip above about Cloudflare’s developer mode is helpful!)