We use caching on most websites to help the user experience.
Caching saves a copy of images, css etc so it doesn't need to be fetched every time.
It's great when everything is running normally, but can be annoying when you're trying to change the design.
For someone who works in IT, the default first step when something isn't working is "have you turned it off and on again?"
For those of us in web design and development, the default first step if things aren't working is "have you cleared the cache?"
I'm going to cover the following in this tutorial. Click the appropriate link to skip to the part that's relevant for your setup.
- Browser refresh hotkey
- WP Rocket
- WP Super Cache
- WP Fastest Cache
- W3 Total Cache
- SiteGround Optimizer
- SiteGround Hosting Cache
- Cloudflare Cache
After clearing the cache in the plugin or server, go to the page you're working on and force refresh.
How to force refresh your browser
F5 reloads a web page in Windows, but to force refresh the browser, use:
- Windows: CTRL + F5
- Mac: ⌘ R
- Linux: F5
This will clear the cache and refresh the webpage. If you don't have a WordPress caching plugin or server-side caching, this may be all you need to do.
How to clear the cache in WP Rocket
To clear the cache in WP Rocket, either hover over WP Rocket in the Admin Bar on any page and click "Clear cache", or navigate to Settings -> WP Rocket and click the "Clear Cache" button in the right sidebar.
How to delete the cache in WP Super Cache
To delete the cache in WP Super Cache, either click "Delete Cache" in the Admin Bar from any page, or navigate to Settings -> WP Super Cache and click "Delete Cache" on the Easy tab.
How to clear the cache in WP Fastest Cache
To clear all the cached files in WP Fastest Cache, hover over Delete Cache in the Admin Bar on any page and click "Clear All Cache", or navigate to WP Fastest Cache in the Admin Sidebar and click "Delete Cache" on the Delete Cache tab.
If you only want to clear the CSS and JavaScript files (for example if you're just customizing the design rather than changing images or text), then choose "Delete Cache and Minified CSS/JS" instead.
If in doubt, just use "Clear All Cache".
How to clear the cache in W3 Total Cache
To clear the cache in W3 Total Cache, hover over Performance in the Admin Bar on any page and click "Purge All Caches".
The other way is to go to Performance -> Dashboard and click the "empty all caches" button.
How to purge the cache in SG Optimizer
SG Optimizer is used on SiteGround hosting to enable dynamic caching. You might need to try both the dynamic cache and the static cache, depending on what you're working on.
To clear the dynamic cache using SG Optimizer, click "Purge SG Cache" in the Admin Bar from any page or go to SG Optimizer and click "Purge Cache" next to the Manual Cache Purge.
How to clear the Static Cache in SiteGround
To clear the static cache in SiteGround, login to your SiteGround cPanel.
Click "SuperCacher" under Site Improvement Tools.
You should see a list of your domains. Next to the domain whose cache you want to clear, click "Flush Cache".
How to clear the cache in Cloudflare
To clear the cache in Cloudflare, login to your Cloudflare account.
Find the site you want to clear.
Navigate to the Caching tab and click "Purge Everything".
You'll get a confirmation prompt. Click "Purge Everything".
