Please click the [ Mark Complete ] button at the bottom of this page when you’ve completed the lesson topics and met these goals:
- Understand that although caching provides a faster viewing experience, it shows some historical content rather than the latest Live content, which can be frustrating when you want to view your latest changes.
- Be able to Clear the Cache in WordPress to force display of Live rather than historical content.
By default, your browser “caches” data locally and then fetches it to provide a speedier browsing experience.
This is great for improving the customer web experience but can be a handbrake on your web development in these ways:
- Because you are not looking at the latest version of your website, you cannot see what you have done or whether it worked, so you waste time and don’t make effective progress.
- To make it worse, you may sometimes see changes and other times not see them. Refreshing the page / pressing CTRL-F5 doesn’t work and your changes still aren’t showing.
- You then start distrusting the process and you think that WordPress is broken!
Cause of caching issues
You may also have Network caching: If you work on a network be aware that components such as routers can store cached DNS information, and you will notice this when caching problems are common to all computers on a specific network.
Why clear the cache when you work in WordPress?
While you work in WordPress, your web browser, your server, and the caching plugins installed on your website may all display locally-cached content to you as a well-intentioned means of speeding your viewing.
But… when you make changes to your site you specifically want to view those latest changes rather than the historically cached content… and even when you press CTRL-F5 in your browser you often still cannot see it!
So you need a means of side-stepping the caching function to view only Live content.
“Clearing the cache” deletes the locally-cached content, forcing software to fetch Live content, including your latest changes.
Working with caching disabled
While working on your website, it helps to bypass caching so that you are always looking at the latest version of a page.
To bypass caching in Chrome:
Press CTRL-SHIFT-I (i) to open the Developer Tools pane.
Then work with this pane continuously open when you are making changes.
> Chrome understands by this that you are developing the website and shows you the latest version of all page data.
Manually clearing the Chrome cache
There are two ways to manually clear the Chrome cache.
To clear the Chrome cache
- Open Chrome.
- Then either
- Click CTRL-SHIFT-DEL > tick checkbox options > click Clear Data, or
- Click the Settings button > More tools > Clear browsing data > tick checkbox options > click Clear Data.
Using the WP ROCKET WordPress plugin
WP Rocket clears two types of cache:
- The server cache, which creates a static HTML page to avoid any PHP processing.
NOTE: After clicking “Clear cache”, also press CTRL-F5 in your web browser to refresh the displayed content.
Using the WP Rocket cache-clearing menu to clear your WordPress cache
Watch: 79 – Manually clearing your website cache
Sometimes you can make changes on a website and they don’t show, so to optimise our websites we use WP Rocket, which is “a caching and performance optimization plugin to improve the loading speed of WordPress websites.” |
WP Rocket adds a cache-clearing menu to the top bar of your Dashboard – all of these menu functions are safe to use | After any significant changes to your site it is worth clearing the cache | From your Dashboard, click the WP Rocket link at the top of the screen, and select Clear cache > All languages | Click WP Rocket > Purge CPcache | Click WP Rocket > Clear Cloudflare cache | Then press CTRL-F5 to refresh the website |