Do you know that you cache HTML pages in Cloudflare too? This technique is called Edge level caching. Your entire WordPress site will be hosted in 155+ data centres (edge servers) all around the globe.
If you’re new to Cloudflare, read my post – 10 Benefits of Integrating Cloudflare
Table of Contents
- How does it Work?
- Why you should Cache HTML pages?
- How to Cache WordPress Pages in Cloudflare?
- Things that will BREAK and How to Fix Them
- Understanding Cloudflare Cache
- Clearing Cache after Updating Posts/Pages
How does it Work?
However, with ‘rules’, you can explicitly tell Cloudflare to cache your HTML pages (aka WP posts, pages, etc)
Cloudflare has 155+ edge servers all around the globe. So once you cache it and when a user visits your WordPress site, the pages will be delivered from the nearest edge server of Cloudflare, not from your origin server
Why you should Cache HTML pages?
Higher TTFB and TTLB
TTFB – Time to First Byte, TTLB – Time to Last Byte
If it’s too technical – The first impression is the best impression!
Basically, its the time required to load the web page. Check the screenshots below
In the first screenshot, Cloudflare is enabled but HTML cache is disabled. You can see the difference
Here is the result of testing TTFB from 14 locations
Less load to Server
By serving everything from Cloudflare, there will be very less load to the server. So you don’t need powerful servers and pay a lot of money to the hosting companies. The only load to the server is when you log in to the admin panel and when there is a new/updated post missing from Cloudflare cache
Here is how much Cloudflare saved me
How to Cache WordPress Pages in Cloudflare?
Before we begin, make sure the ‘Browser Cache Expiration’ in the ‘Caching’ tab is set to ‘Respect Existing Headers’. Otherwise, HTML pages will be also cached in the browser. So when you update something it won’t be seen by the user even if they reload
Ok, let’s do it!
Goto ‘Page Rules’ section of the Cloudflare and add the following rules
Rule 1 – Bypass caching for every request to the admin panel (wp-admin)
Rule 2 – Bypass caching if it’s a preview of post/page
Rule 3 – Cache everything (including HTML, css, js, images etc) in the edge servers for a TTL (time to live)
Things that will BREAK and How to Fix Them
As I mentioned before caching HTML pages are risky. Many dynamic features will not work as expected because it will be already cached by Cloudflare
Here are a few common problems and how to fix them
Admin Bar/ Tool Bar
WordPress shows an admin/toolbar to pages if the user is logged in. But Cloudflare will cache those pages and toolbar will be shown to unknown users too
Solution 1: Hide the toolbar for all users by going to Users -> Your Profile
Solution 2: Use the ‘Solution 2’ mentioned in ‘WordPress Default Comments’
WordPress Default Comments
Everyone can comment, but new comments will not be visible unless you clear the cache
Solution 1: Use 3rd party commenting plugins like Disqus or Facebook Comments
Solution 2: Upgrade to Cloudflare paid plan a set ‘Bypass Cache on Cookie‘ rule that will ignore cache, if someone has commented (or if the user is logged in)
Just like WordPress comments, search page is also very dynamic. Caching is not a good idea here.
Solution 1: Add an additional rule that will bypass cache on URL like
Solution 2: Use an Ajax powered search. Some themes come with ajax search by default
Solution 3: Disable search page. This is what I did. I haven’t seen anyone searching directly in my blog!
Woocommerce view cart page, order confirmation page everything will be messed if you cache those pages. Use the Solution 2 in ‘WordPress Default Comments’.
Understanding Cloudflare Cache
Cloudflare cache works just like any other CDN, using an HTTP proxy. Once there is a new request it checks whether the requested URL is present in the edge server. If it’s not present, the user will get the response from the origin server. Further requests will be cached by Cloudflare based on the TTL
Different Cache Status
Cloudflare returns a
cf-cache-status in every HTTP request. Here are the common status
MISS – Response is missing in the edge server, delivered from the origin server. Next response will be probably a HIT
HIT – Response delivered from Cloudflare edge server
EXPIRED – TTL(Time to Live) is over. Next response will be probably a HIT
Checking Cache Status
In order to test whether caching is working or not, go to https://cf-cache-status.net and enter your URL
If it’s working correctly you’ll see something like this:
Clearing Cache after Updating Posts/Pages
After integration, all your HTML pages will be cached by Cloudflare. If you add/update a new post/page or any other modifications, Cloudflare will not be aware of it
Luckily Cloudflare comes with an official WordPress plugin that will clear the cache of the corresponding URLs if there is an update
You can also clear cache manually without a plugin by going to ‘Cache’ setting in Cloudflare
I hope that covered everything to cache HTML pages in Cloudflare. I know it’s little hard to set up these. But once you’ve done these, you’re going to get the best performance that no cache plugin or hosting company can provide
Comment below if you’ve any queries or feedback. I read and reply back to each of them within 12 hours!