DEV Community

Cover image for What is web caching and how to clear cache in WordPress
Mari from WP Umbrella
Mari from WP Umbrella

Posted on • Originally published at wp-umbrella.com

What is web caching and how to clear cache in WordPress

Ever been in the middle of a frantic development sprint, making a crucial update to a WordPress site, only to hit refresh and… nothing? You check your code—everything seems perfect. You hit refresh again, and still, the old version of the site stares back at you. This is a scenario every WordPress developer has encountered at least once (or a hundred times) in their career. The culprit? Web caching (aka HTTP caching).

Web caching can be a developer’s best friend or worst enemy, depending on how well it’s managed.

In this article, we’re going to explain web caching, dive into why its importance, how it works and how and when should WordPress agencies and developers clear the cache.

What is caching?
At its core, web caching involves storing copies of your website’s files—like images, HTML, CSS, images, files—in a temporary storage location, known as a cache. This happens the first time a user visits your site.

Now, when a user visits your site the next time, instead of fetching these files from the origin server every time, which can be slow and resource-intensive, the cache delivers these pre-stored copies almost instantly.

A cache has limited capacity for storing files, and in the case of websites it’s mainly texts and images that are cached. However, cached data can be set to expire or update itself, for example when a specific time limit is reached or when the cache reaches it’s size limit.

how does web caching work

Types of web caching
Depending how detailed you want to go, there are several different types of caching out there. For the purpose of this article, we’re going to focus on the two larger caching types: browser caching and proxy server caching.

Browser caching:
Browser caching stores website assets like images, CSS, and JavaScript files directly in the user’s browser and can only be accessed by the specific user. This allows the browser to load the files directly from its cache instead of requesting them from the server each time the user revisits the same page or site, saving both bandwidth and time.

Content Delivery Networks (CDN):
CDN are a type of proxy servers that store resources on globally distributed servers, enabling the same cached content to be served to multiple users. They are located around the globe and act as local servers with the aim to bring your website’s content (originally stored in the origin server, which might be further from where the request was sent from) closer to all visitors.

CDN reversed proxy server

How does web caching work?
Web caches operate based on a set of rules that dictate when a cached version can be served. These rules are partly defined in the HTTP protocols and partly by the settings configured by either the user managing their browser cache or the administrator of a caching server.

As a WordPress site manager, you have some control over cache configuration for your sites via two crucial HTTP headers: ETags (ensure the freshness of the cached resource based on timestamps or version number) and Cache-Control (dictates the caching behaviour, like what should be cached, how and how often).

Here’s how the process looks like behind the scenes:

A user types in a website on their browser for the first time (say, they type in wp-umbrella.com), the browser first performs a DNS lookup to find the IP address associated with the web address. After locating the correct IP address, the browser makes an HTTP request to the server (origin or CDN), asking for the website’s content.

If the server approves the request, it responds with a HTTP “200 OK” successful status code. The server then begins sending the website’s files back to the browser in small pieces called data packets. As the browser receives these packets, it puts them together and displays the complete web page to the user, and stores them in the cache.

Now, when the user visits the same URL the next time, before sending the request to the origin server, the cache firsts checks if there’s a stored copy of the website and delivers the assets contained in the cache to the user directly. The latter process will continue until the cache is cleared (either from the client or server side) or the cache expires, based on the rules set to it.

Now, why is web caching important?
In a nutshell, by storing these files in a cache, you reduce the need for repeated requests to the server, significantly improving page load speed for your users. Additionally, this reduces the strain on your server, preventing it from becoming overwhelmed and ensuring that your website remains stable and accessible even during traffic spikes.

But let’s explore some of these benefits further:

  1. Faster page load times and better user experience:

Speed is the name of the game when it comes to the internet. Users today expect websites to load almost instantaneously. If your site takes more than a few seconds to appear, you risk losing visitors who are unwilling to wait. This is where caching comes into play.

By storing copies of your website’s files in a cache, caching dramatically speeds up content delivery. Instead of retrieving data from the server and rendering it again with each visit, the cached versions are served quickly to users. When users can access content faster, they are more likely to stay on your site, explore further, and engage with your content—leading to higher retention rates and improved user satisfaction.

  1. Reduced server load:

Without caching, every user request would require the server to generate the content dynamically, putting immense strain on server resources. This can be especially problematic during high-traffic periods when the number of requests skyrockets.

With caching, however, instead of processing every request from scratch, the content can be delivered directly to users from the cache, which drastically reduces the number of database queries and script executions. This, again, has an impact on the speed of content delivery, and helps maintain server stability and avoid crashes during traffic spikes.

  1. SEO benefits:

Search engines like Google prioritize user experience, and page speed is a significant factor in their ranking algorithms. Websites that load quickly are more likely to rank higher in search engine results, as they provide a better experience for users, signalling to search engines that your site is well-optimized and valuable, therefore also resulting in higher organic traffic. Slow websites, on the other hand, are penalized because they tend to have higher bounce rates—users leaving the site due to long load times.

When should you clear cache?
Sometimes, the cache may not detect changes to your WordPress site, causing you and your visitors to see an outdated version instead of the updated content. Therefore, clearing the cache is a crucial part of maintaining your clients’ WordPress sites. But knowing when to clear the cache is key to ensure users see the most up-to-date content, troubleshoot and guarantee site security, and maintain optimal site performance.

Below are some examples when clearing your cache is necessary:

  1. After plugin, theme or WordPress core updates:

Cache should be cleared whenever you update plugins, themes, or the WordPress core itself. Updates often include changes to code, design, or functionality.

If the cache isn’t cleared after these updates, not only will visitors continue to see the old cached version of your site but it might also cause conflicts between the new plugin and your site, and expose your site to vulnerabilities.

  1. During troubleshooting:

When debugging site issues, clearing the cache should be one of your first steps. Cached content can sometimes mask the changes you made or problems you’re trying to address. By clearing the cache first, you eliminate the possibility of viewing old, cached data and ensure you are working with the most current version of your site.

  1. Site redesigns or content changes:

Whether you’ve renewed your site’s layout, added new visuals, or published content, you want to ensure that visitors are seeing the latest and greatest. Failing to clear the cache can lead to inconsistencies between what you see and what your users experience, potentially undermining your hard work and creating a confusing for your visitors.

How to clear cache in WordPress
Now that we understand when to clear the cache, let’s look at how to do it effectively in WordPress. Depending on the type of cache and your specific setup, there are several methods for clearing your cache:

Manual clearing:
If you decide to opt for manual clearing, all three of the below caching types need to be cleared separately every time you execute a plugin update, for example:

Server cache: For server-side caching, the process varies depending on the hosting provider and caching software. It’s likely that you may need to clear the cache through your hosting control panel or by executing specific commands on the server.
Plugin cache: To clear the cache created by plugins, go to the plugin settings in the WordPress dashboard. These plugins typically provide a “clear cache” button, which you can click to remove all cached files.
CDN cache: If you use a CDN, you’ll need to clear the cache from the CDN provider’s dashboard. Each CDN has its own process for purging cached files, so refer to your CDN provider’s documentation for guidance.
Using WP Umbrella:
With WP Umbrella, the cache is automatically cleared whenever plugins are updated, ensuring that the latest version of your site is always served to users without any manual intervention, saving you time and reducing the risk of forgetting to clear the cache after an update.

Caching plugins:
For those looking for a hands-off approach to cache management, there are several caching plugins to automate the cache-clearing process, such as WP Rocket, W3 Total Cache, WP Super Cache, WP Fastest Cache, Hyper Cache, etc. Although, these tools can be configured to suit your workflow, ensuring that your caching is managed efficiently without requiring manual effort, they do need regular cache clearing. You’ll be able to clear the cache directly via the plugin in your WordPress dashboard.

To sum it up..
Web caching is a powerful tool that can significantly enhance the performance of your managed WordPress sites, but it requires careful configuration and maintenance to ensure that it serves its purpose effectively. But remember, regular maintenance, including clearing caches after updates or significant changes, is essential for keeping your website fast, secure, and up-to-date. Whether you’re handling these tasks manually or letting WP Umbrella do it for you, staying proactive with your cache management is key to delivering a seamless experience for your customers’ sites and maintaining their health.

Top comments (0)