The Right way to use Cloudflare Cache Everything with WordPress

dailydose

#1

Today, you will learn how to use Cloudflare for …

  • Speeding up WordPress globally without changing your current hosting (In most cases)

  • Improving TTFB easily

  • handling traffic spike on event blog or viral content without scaling hosting resources

  • making HTML load faster like static content

  • scaling website availability

All this is possible in very low budget. Maybe under 0 to $30 a month. It’s all depend on the website and the stategy of proper implementation.

2 years ago, I discovered a wonderful feature called Cache Everything via newsletter of Cloudflare.

Speeding up WordPress in low budget can be tricky.

With deep interest, I started a serious experiment on this subject to understand how the whole concept works, how this can be used in better way for WordPress.

  • I will be sharing complete method for using Cache Everything page rule with WordPress, its PRO and CONS, possible problem, workaround everything what you need to know.

The Cloudflare Cache Everything is a special page rule allow to do Full Page Cache over CDN. Isn’t amazing? Yes! It ensures that your origin server will hit less amount of resources.

What is Cloudflare Cache Everything Page Rule?

  • Generally, when we setup Cloudflare it cache only the static files like Stylesheet, JavaScripts, Images, etc. but sadly no HTML.

  • As a result, our static content load quickly but HTML always suffer. I have seen many user even complaint that after using Cloudflare, their TTFB has increased. And, here’s one prime example…


The question arise in our mind, why this happens?

  • Your website TTFB depends on your Performance testing location, your website server location, server load, cache status, etc.

  • For example, if your website sever is located is USA and you are also testing from USA, the TTFB would be usually faster compared to other region. This is one the top reason why I always recommend “Always choose server location as per your target audience country”.


If you author a blog which audience is worldwide, you may like to speed up WordPress performance globally.

The solution

Full Site Delivery with Cloudflare, an approach to serve majority of website content especially HTML from CDN. It is possible via Cloudflare Cache Everything Page rule which is especially for allowing caching of HTML that would be great for web performance.


History of Cloudflare Cache Everything


Prerequisite knowledge to setup FSD with Cloudflare


:warning: Accidently enabling just page rule will cause severe problem in your WordPress. Please read this before you proceed. As it requires some logical settings to make things work properly.

  1. This is only for normal blog. You should only implement if you are able to understand what are you doing.

  2. I have successfully followed this guide for many blogs, however there is chances of error and may not be suitable for every WordPress with dynamic frontend, especially I don’t recommend for WooCommerce or Forum.

  3. Except responsive theme, this guide shouldn’t be practiced where desktop and mobile theme is different. Also, you shouldn’t serve WebP images using .htaccess coding while this method.

  4. Much better with Disqus. Native WordPress comment is also support, but requires some additonal steps to make things better.

  5. This may not work with some web hosting which deliver own cache. You must first disable it before implementing.

  6. Not recommended for 3Z0IC users. They set no-cache header. :unamused:


Steps to Enable Cloudflare HTML caching Properly

Step 1: Handling Page cache with W3TC with real-time purge Control

  • Pro: Easier for frequently updating blog.
  • It is the best for performance when combined with a CDN. I recommend BunnyCDN. If you don’t use CDN, static resouces performance will suffer due to less HIT ratio, and full purge done by W3TC Cloudflare extentions.

  1. Setup W3TC plugin as exactly explained in this guide. Please do not make any changes in the Browser settings part.
    [Guide] How to Setup W3 Total Cache Plugin?

  2. Go to Extentions > Enable Cloudflare (Highly Recommended as per this usage case)

  3. You need Cloudflare API key

  4. Make these important settings

Your W3 Total Cache plugin is ready to do automatic purge of Cloudflare page cache on the Post Modifications.


Step 2: Configure Cloudflare Settings.

Goal: Configuring cache in a way it doesn’t affect other part.

I will share tested method, that I use and works successfully.

  1. Keep Respect Existing Headers. Please don’t override. This is important in order to comply with W3TC Browser cache settings.

  2. Setup Cloudflare Page rule. You need only these two for best performance.

First is for Login page security. Second is for doing Full page cache, while following origin header. :sunglasses:

:warning: Avoid use of Edge Cache rule in Cloudflare otherwise it will override the origin header badly and may serve internal page even to anonymous visitor. Not cool.

Below settings is written as per careful test on various sites.

Tip: When you want to skip Page cache for certain URL, just set Cache Level: Standard.


Highly recommended things to do after following this guide

  1. You may not want to cache WordPress.com toolbar. It’s better to hide it for the anonymous visitors.

example
(Screenshot only for example)

add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
  show_admin_bar(false);
}
}
  1. Redirect the first time comment author to Thank you page because Cloudflare doesn’t repect cookie and cannot showing ‘Your comment is awaiting in moderation’.
// First comment redirection
function redirect_first_time_commenters( $url, $comment ) {
 
// get count of user comment
$comment_count = get_comments( array( 'author_email' => $comment->comment_author_email, 'count' => true ) );
 
// if this is the user first comment, redirect to the "Thank You" Page
if ( 1 == $comment_count ) {
$url = 'https://gulshankumar.net/thank-you-for-commenting/';
}
 
return $url;
}

add_filter( 'comment_post_redirect', 'redirect_first_time_commenters', 10, 2 );
  1. Exclude Admin Traffic from Google Analytics (Recommended)

  2. Configure BunnyCDN for better static content HIT cache ratio and awesome balance of performance.

  3. Hide frontend Login/Sign up stuff, or do not use this approach in this case.


FAQs

Can I use Cloudflare FSD (Full Site Delivery) with any other plugin except for W3TC?

  • Strongly not recommended for WP Rocket, WP Super Cache, WP Fastest cache and many, mostly may result to cf-cache-status: MISS due to restrictive Cache Control header for the Document. So, I wouldn’t recommend anything else than W3TC for this purpose at the moment.

Help! My site is broken while purging cache

How to debug things are working properly?

  • The Chrome Developer tool is your best friend. Utilize its Networking tab to monitor HTTP response.

Is Cloudflare free plan sufficient?

  • In most cases, I think yes. For WooCommerce or any cookie support, you may need its Business plan that cost $200/mo. If you want cheapest option, you may go with Sucuri WAF that provides similar features in little easy way.

Conclusion

Following this guide carefully can surely improve performance. You can reduce server load greatly.


Source: Report from an anonymous client site. Shared as per permission.

Speed test


(Disclaimer: This is the old video when I was using this approach no way relevant to current status. Since, I have changed my CDN provider.)

When we use Cloudflare Cache Everything, the challenging thing are

  • Purging cache on the right time
  • Handling Cache Control header to properly serve web page
  • Maintaining better HIT ratio

The above method is mostly dependent on W3 Total Cache Plugin, which has some ironic fact…

  • When you purge Cloudflare HTML cache, it purges Cloudflare whole cache (HTML, CSS, JS, images) like using “Purge everything” button. Is it fair? No.
  • That’s why, I suggested above to use BunnyCDN in order to maintain a seperate hostname for caching static content of WordPress.

I believe, above method with CDN is great for a news site who need real time purge feature.

but, there are many bloggers or kind of blog like event whom may not need to update that much…

So, here’s the alternative deal …

  • Keep Cloudflare configuration and rest function code as is.
  • Avoid using BunnyCDN
  • However, configure Browser cache for the static resources in long term (like 1 year)
  • Avoid using W3TC completely (You may be thinking, then how I will purge cache?, wait…)
  • Set Cache Control plugin as per below screenshot. All configuration is only for Document (HTML) web page. This is essential in order to setup purge rule based on the TTL. This goes like this. Ref: screenshot

max-age: Means browser cache: I believe blog is dynamic thing, I wouldn’t recommend doing Browser cache.
s-max-age: This is in our hand (almost), as per TTL, content will expire automatically and CDN will have to revalidate and serve new version automatically.

How this works?

  • Your cache is suppose to expire on the given time period.

  • You are always welcome to purge even by doing manually, but why would you do it! Just start from 600 seconds TTL, and increase slowly as you become master :smiley:

  • Well, what’s about my static content? Cache Control, you must know that it’s subject to vary as per HTTP request. So, we can add additional Browser Cache header for the resources like /wp-content/ and /wp-includes/ in one go using a Page rule of Cloudflare, or you don’t need if you have done already with .htaccess and using respect existing header.

In case of page rule

*example.com/wp-*

  1. Create a rule where, browser cache TTL: You can keep 14 days or later or whatever you feel best. Long is better, since it’s static content.
  2. Create one more rule for Cache Level: Standard (Please avoid cache everything at this point.) Standard I used here because /wp-* is going to cover only static resources and nothing like HTML.

Sorry, if this is not clear enough. I couldn’t make more. :frowning:


Also read

Have a question? Please feel free to ask below.

Thanks & Regards,
Gulshan


#5

Any question?


(Serdar) #6

thank you for sharing. how do you exclude /wp-admin and /?p= (preview) pages from cache?


(Saksham Kumar) #7

Nice post!

One question, how to check if it’s working or not? :confused:


#8

We don’t need to add a seperate rule for that. Because, I have suggested Cloudflare settings in such way. It’s completely well tested and it should work fine.


#9

Chrome Developer Tool is your friend. :smiley: You need to look into HTTP header for the specific HTTP request (basically for the first one - Document)

If it is working, it will show cf-cache-status: HIT

If it is not working, it will always show cf-cache-status: MISS even for anonymous visitors.


(Serdar) #20

Bro Could you please clarify it? What do you mean?

  • We don’t set Edge Cache TTL as page rule, so what is its default value?

  • Second questions is that, this cache everything rules protect our web sites from all types of Ddos right?

#22

Edge cache page rule, we should avoid at all cost because it override even no-cache header and do caching. That’s really bad thing and goes against the WordPress rule for /wp-admin section hence, I avoided it.

  • By default, there is no certain time like for X your content will be cached. In Cloudflare, it’s all depends on frequency. If you get higher traffic or have peak hour, the most content will be in the HIT form, or you may notice some time MISS response. It’s unpredictable in case of Cloudflare…

  • In other CDN, it’s generally as long you define TTL in the max-age or s-max-age, but nothing is guaranteed… MISS is suppose to happen any time. It’s nature of CDN.

I think, with CF - Yes.


#23

How’s the web performance before and after following this guide?
I am damn sure, it would be a notable and suprising difference.


(Serdar) #24

We can hide the admin bar. However, the comment area is cached like below image:

no way to show email and name fields for visitors?


#25

Blog URL?


(Vishnu) #26

I think this is your own blog and you are logged in. That’s the reason why it’s showing only the comment field. Try from incognito mode or after logging out.


(Serdar) #28

It is under construction mode now.


(Serdar) #29

Yes bro I mean admin comment area. :slight_smile:

And thank you for information


#30
  • What is your Page rule?

(Serdar) #31

The same page rule with yours bro. I didn’t set edge cache TTL rule. The admin bar is hidden by me but comment field for admins and the edit button below title of the content are cache.

The only solution looks logging out of the site.


#32

Are you aware that WordPress doesn’t show Name, e-mail, website URL field while you are already logged in?

I believe, this is normal behavior for WordPress logged in user and has nothing to do with Cache.


(Serdar) #33

Yes we shouldn’t visit the blog without logging out in this situation.

Anyway, If we don’t use any cache plugin, what will happen? Is it good idea?

Because, offical Cloudflare plugin does below thing already;

I mean using offical Cloudflare plugin + Autoptimize plugin.


#34

Cloudflare features purge function, I agree, however in my experience W3TC one is better.


(Serdar) #35

You’re the best bro :slight_smile: