How to use CloudFlare Cache Everything Page Rules to Reduce Cloudflare TTFB and Speed Up WordPress Site

Fast websites are a must-have way to attract more users, improve SEO results and the overall user experience. We all know, no one likes a slow website. In this guide, I will teach you how to speed up WordPress site with Cloudflare cache everything page rules, also reduce Cloudflare TTFB, no additional costs are required.

Demo domain: blogwp.ovh

Demo Theme: Divi Theme

Cloudflare is a web performance & security company, one of most important and useful features of Cloudflare is CDN (Content Delivery Network). By default Cloudflare CDN only cache the static files like images, CSS, JavaScript etc, it doesn’t cache HTML pages. If you want Cloudflare to cache all site contents, including HTML web pages, you need to set up cache everything page rules.

But set up cache everything page rules can cause several problems. Here are some bugs you may experience:

issue 1: Admin top bar will be cached to your visitors if you visit your site while you are log in.

Solution 1: Install the plugin that allows you to bypass the cache for logged in users even on free plan.

Solution 2: Upgrade to Cloudflare Business plan to use the Cache Bypass On Cookie feature, but the Cloudflare Business plan is $200 per month, This is a HUGE expense.

issue 2: The new comments will not be visible unless you purge cache.

Solution 1: Install the plugin that can automatically clean up the cache.

Solution 2: Use 3rd party commenting plugins like Disqus or Facebook Comments.

Solution 3: Upgrade to Cloudflare Business plan to use the Cache Bypass On Cookie feature.

issue 3: The WordPress comment area will caches your blog’s WordPress login user name.

Solution 1: Install the plugin that allows you to bypass the cache for comment visitors even on free plan.

Solution 2: Use 3rd party commenting plugins like Disqus or Facebook Comments.

issue 4: Whenever you post an article or edit the blog style, you need to manually clear the cache.

Don’t worry, the following part will teach you how to resolve these issues!

Method 1: Use WP Cloudflare Cache plugin. This plugin allows you to use Cloudflare full page cache without affect logged in users and comment visitors. WP Cloudflare Cache plugin will also automatically purge the cache after publish post or update post.

Make sure the ‘Browser Cache TTL’ in the ‘Caching’ section is set to ‘Respect Existing Headers’.

WP Cloudflare Cache Plugin Settings:

Enter your E-mail Address and Cloudflare Global API Key
Add Expires Header Value

Note: After setup this plugin, you will need to create “Cache everything” page rule on Cloudflare.

My Cloudflare page rule settings

https://blogwp.ovh/*

Browser Cache TTL: an hour, Cache Level: Cache Everything, Edge Cache TTL: 2 hours

When you correctly set up WP Cloudflare Cache plugin, the above annoying problems will be solved.

The TTFB before settings

The TTFB after settings

Method 2: Use WP Cloudflare Super Page Cache plugin. This plugin allows you to bypass the cache for logged in users even on free plan, this means that WP admin bar will not be cached. It can also automatically clean up the cache on website changes.

Make sure the ‘Browser Cache TTL’ in the ‘Caching’ section is set to ‘Respect Existing Headers’.

How to verify that everything is working properly?

Check the HTTP response headers of the displayed page in Incognito mode (browse in private). WP Cloudflare Super Page Cache returns two headers:

x-wp-cf-super-cache

If its value is cache, WP Cloudflare Super Page Cache is active on the displayed page and the page cache is enabled. If no-cache, WP Cloudflare Super Page Cache is active but the page cache is disabled for the displayed page.

x-wp-cf-super-cache-active

This header is present only if the previous header has the value cache.

If its value is 1, the displayed page should have been placed in the Cloudflare cache.

To find out if the page is returned from the cache, Cloudflare sets its header called cf-cache-status.

If its value is HIT, the page has been returned from cache.

If MISS, the page was not found in cache. Refresh the page.

If BYPASS, the page was excluded from WP Cloudflare Super Page Cache.

If EXPIRED, the page was cached but the cache has expired.

WP Cloudflare Super Page Cache Plugin Settings:

1、Enter your Cloudflare’s API key and e-mail

2、Select from the dropdown menu the domain for which you want to enable the cache

3、Enable Page Caching

4、Test Cache

When the settings are complete, WP Cloudflare Super Page Cache Plugin will automatically adds a cache everything page rule under Page Rules section.

When you correctly set up WP Cloudflare Super Page Cache plugin, the above annoying problems will be solved.

Method 3: Use CloudFlare Cache Purger for WordPress plugin.

Make sure the ‘Browser Cache TTL’ in the ‘Caching’ section is set to ‘Respect Existing Headers’.

CloudFlare Cache Purger for WordPress Plugin Settings:

Enter your E-mail Address and Cloudflare Global API Key
Choose which content to be cleared

Note: After setup this plugin, you will need to create “Cache everything” page rule on Cloudflare.

My Cloudflare page rule settings

https://blogwp.ovh/*

Browser Cache TTL: an hour, Cache Level: Cache Everything, Edge Cache TTL: 2 hours

When you correctly set up CloudFlare Cache Purger for WordPress plugin, the above annoying problems will be solved.

The TTFB before settings

The TTFB after settings

Method 4: Use Cloudflare Plugin.

Make sure the ‘Browser Cache TTL’ in the ‘Caching’ section is set to ‘Respect Existing Headers’.

1、Disable WordPress admin bar for all users, go to Users >> Your Profile, uncheck the option ‘Show Toolbar when viewing site’.

2、Go to ‘Page Rules’ section of the Cloudflare and add 3 page rules:

2-1、https://blogwp.ovh/*&preview=true

Cache Level: Bypass

2-2、https://blogwp.ovh/wp-*

Security Level: High, Cache Level: Bypass, Disable Apps, Disable Performance

2-3、https://blogwp.ovh/*

Browser Cache TTL: an hour, Cache Level: Cache Everything, Edge Cache TTL: 2 hours

Rule 1 – Bypass caching the preview of post/page.

Rule 2 – Bypass caching for every request to the admin panel (wp-admin and wp-login).

Rule 3 – Cache everything (including HTML, css, js, images etc)

3、Install Cloudflare plugin

Click the ‘Settings’ section, toggle the Auto Purge Content On Update switch to On.

If you forget to perform Step 1, and the WordPress admin bar appears, don’t worry, perform Step 1, then make sure you purge the cache from Cloudflare.

When I’ve completed all the steps above, i still need to manually clean up the cache to see the comments. And the WordPress comment area also still caches your blog’s WordPress login user name.

It seems that Cloudflare official plugin does not auto purge content, even if I have enabled this feature.

4、Install Disqus Conditional Load plugin, this plugin can Lazy load Disqus comments

Disqus Conditional Load plugin settings:

When you correctly set up the two plugins of Cloudflare and Disqus Conditional Load, the above annoying problems should have been solved.

Conclusion

I tried 4 methods to set up Cloudflare full page cache. Method 1、2、3 is the simplest and most effective. Method 4 is the most cumbersome and ineffective. Which method do you think is the easiest to use? Please comment below if you’ve any queries or feedback.