Are you currently using Cloudflare for your WordPress website? If so, you’re in luck! Cloudflare offers an incredibly useful, free feature called edge caching that can significantly speed up your website’s performance. This feature allows you to store your website’s content in Cloudflare’s content delivery network around the world, making it easily accessible to users regardless of their location.
In this post, I’ll show you how to effectively set up Cloudflare’s edge caching feature for your WordPress site, so you can optimize your site’s speed and performance. By the end of this post, you’ll have a better understanding of how to use Cloudflare’s edge caching feature to optimize your WordPress site’s speed and performance.
What is Edge Caching?
Edge caching can help speed up your website’s performance by storing your site’s static content in Cloudflare’s data centers around the world. This allows the content to be easily accessible to users regardless of their location, leveraging Cloudflare’s massive Content Delivery Network. By reducing the distance that data must travel between the user and the server, edge caching can help improve your site’s overall performance and enhance the user experience.
Cloudflare already does this for all of your static assets, but you can also tell it to do the same for your website content/HTML.
How do I Set up Edge Caching?
Edge caching for WordPress content is easy to set up, but there is one big caveat you need to be mindful of. Edge caching will cache the entire page content, and by default, it will do this for all users, even users who are logged into wp-admin. This will entirely prevent you from editing your site, as even when logged in, you will be shown the cached version of the site, like all other users.
To work around this, we will need to add some additional settings to prevent caching under certain circumstances. The way we do this is via the use of Cloudflare Page Rules. There are a few we will need, and I will explain each of them:
First of all, you will need a page rule to enable edge caching for dynamic content. This is not default in Cloudflare, so we have to configure a few Cache Rules like so:
First of all we need to prevent edge caching for anything wp-admin related. We do so with a rule like this:
Then, we need to ensure that logged-in users never get edge-cached content. We can detect logged in users by checking for the WordPress logged in user cookies, which is how it manages authentication. So by adding bypass rules for these cookies, we can ensure that logged in users never get cached content, like so:
We also need to make sure the wp-admin / login pages are not cached, which we do using a rule like so:
Finally, we want to ensure that all of our uploads, images, etc. are always cached. This is easy to do by adding another edge-cache rule like so:
Outside of edge caching, I recommend enabling tiered caching. Tiered caching instructs Cloudflare to request cached pages/files from its own edge node servers, rather than requesting them from the origin server every time. This will prevent a lot of redundant traffic to you origin servers, as each page is only requested once. This is a free feature which reduces server load, egress and improves cached response time, so it is a no brainer to enable.
One other optional suggestion I have is to disable caching based on query strings. By default, Cloudflare will create a different cache state for each query string. Just note, this can break things, as query strings are often used for cache invalidation (e.g. you add a ?version=123 to some assets).
You can disable query string caching via a setting under Caching > Configuration:
In conclusion, Cloudflare’s edge caching feature can be an incredibly powerful tool for optimizing the speed and performance of your WordPress site. With edge caching, you can reduce the distance that data must travel between the user and the server, which can improve your site’s overall performance and enhance the user experience. Try setting it up for your website today and see the difference it can make!
I have built a free plugin which will automatically flush the cache when a post or page is updated. This ensures that changes made to posts are immediately reflected on your website. The plugin is quite smart and will only update URLs associated with the post (the post permalink, any category pages it appears on etc.), so the entire site cache is not invalidated each time.
You can download it from Github. Unfortunately I am still waiting on this to be accepted to the WordPress.org plugin repository, which has an absurdly long waitlist.
Read next – Have a look at this article where I explore how WordPress can be scaled to the Enterprise level.
