How to Set Up Cloudflare to Cache WordPress Pages

By default, Cloudflare caches static assets such as stylesheets, images and scripts.

But not everyone is aware that it can also cache your entire website if requested. That’s right: just like a regular caching plugin.

What’s more, pages that are cached in this way are then served from the Cloudflare network. This means your site could get a terrific response time, regardless of where visitors are located.

Take a look at this before (389ms) and after (207ms) test.

Pretty impressive results!

Some of you might argue that a 389 ms page speed is already fast enough. This isn’t untrue but it is missing the point.

Enabling page caching reduces the wait (TTFB) for a page to load. By decreasing the load time with every request, you can get an impressive reduction in the final page speed.

Just look at the 182 ms difference between the two above examples—and that’s for only six requests. Imagine what it can do on a bloated site with dozens of requests. Each request that’s delivered a bit faster reduces the global load time.

Quick Setup

Set a page rule, as shown below, and you’re ready to go.

Let’s take a closer look at the above screenshot.

  1. Add your site URL with an asterisk at the end. This tells Cloudflare to apply the rule to your entire site.
  2. Set the Browser Cache TTL to an hour. This will minimize the risk to your visitors of keeping an outdated version of your site in the cache.
  3. Set the Cache Level to “Cache Everything.”
  4. Finally, set the Edge Cache TTL to a month. Your page will then be cached on Cloudflare’s servers for a month.

But, there’s a catch:

While this could drastically speed up your pages, it might not fit your site’s needs.

Unless you’re paying for an Business Plan, there’s no way to exclude logged-in users. This means that everyone will see the same content.

If that just made you realize that Cloudflare page cache is not for you, don’t worry. You can still use it for specific purposes like a landing page, your homepage or even just your blog section.

Remember that you can control where rules apply, by specifying an URL. But you are restricted by your plan’s page rules limit. This is only 3 on the free plan, and 20 on the pro plan.

How many page rule left?

Testing Cloudflare page cache

To find out whether Cloudflare page cache is active, check your site’s headers. The easiest way to do this is to open your browser’s developer tool. Option + Command + i for Mac and F12 for Windows.

  1. Open the developer tool
  2. Navigate to the Network tab
  3. Refresh the page
  4. Click on the root request

Look for the header cf-cache-status. If it’s working correctly, the header should be set to HIT.

Install the Cloudflare plugin

Though I recommend that all Cloudflare-powered sites install the Cloudflare plugin, it’s especially useful when Cloudflare is caching HTML.

This is because the plugin allows you to activate the automatic cache management option. That way, every time you publish a new page or post, the plugin will clear the cache for you. Read the tutorial for more information.

Set the browser cache expiration

For best results, set the Cloudflare Browser Cache Expiration setting to Respecting Existing Headers. The setting is located under the Caching tab.

Cloudflare's Browser Cache Expiration option

Exclude the WordPress admin

By setting the Browser Cache Expiration to respect existing headers, you shouldn’t have a problem with the WordPress administration. However, I always set up the following rules when there are page rules left.

That way, you’re sure not to have backend issues.

Add these rules before the “Cache Everything” rule. Cloudflare’s page rules priority goes from bottom to top—the highest is the most important.

WordPress Admin Bar

This is where it might get frustrating.

If you don’t want the WordPress admin bar to be visible to everyone, I recommend disabling it completely in your user profile.

WordPress comments

Here’s another problem: the WordPress commenting system doesn’t work with Cloudflare page cache.

Well, it does work, but new comments will not display unless you clear the page cache.

Here are 2 solutions:

  1. You don’t need the comment module anyway.
  2. Set up a third-party commenting system like Disqus or Facebook comments.

Cloudflare Business Plan

Of course, you can always subscribe to the Cloudflare Business Plan to make sure you don’t have any trouble with connected users.

With the Business Plan, add a Bypass Cache on Cookie setting to the “Cache Everything” rule.

WordPress (native)wp-.*|wordpress.*|comment_.*
WordPress with WooCommerce
wp-.*|wordpress.*|comment_.*|woocommerce_.*
WordPress with Easy Digital Downloadwp-.*|wordpress.*|comment_.*|edd_*

Conclusion

Though caching your WordPress pages on Cloudflare is not a piece of cake, it’s definitely worth the effort to decrease the TTFB and, as a result, the overall site speed.

Further reading:
Fundamentals of WordPress Performance
– Caching Static HTML with WordPress/WooCommerce
– Enhancing the Security and Performance of WordPress

Comments

  1. Tom Robbins
    February 21, 2018

    In page rule.
    For wp-admin did you set that first level? Then the login?
    If my priority is not to see the admin. bar why not set cache level to bypass instead of standard?
    Would that work?
    Then set the third rule to cache my most popular page?

    Leave a reply
    1. Eric Valois
      February 21, 2018

      Hi Tom, Yes I did, but the order for those two rules is not much important. Just add them at the top for a high priority.

      If you set the cache level to bypass, your pages aren’t going to be cached. The best workflow is to open the WordPress admin with your regular browser and open another browser to check your site.

      Leave a reply
  2. AJ Clarke
    June 26, 2018

    Great tutorial and tips. I can’t believe I’ve been using CloudFlare for so many years now and never set this up…geez. Just an FYI that “Bypass Cache on Cookie” is also available on the Business plan, which is what we are using. It’s definitely worth having 😉

    ps: Really digging your site and themes.

    Leave a reply
    1. Eric Valois
      June 27, 2018

      Yeah, you’re right, I just edited the post. Thanks for that!

      Leave a reply
  3. Jérôme Lacroix
    June 27, 2018

    Merci Éric pour ce tutoriel, le Page Rule était obscur pour moi et je ne l’avais jamais utilisé. Je viens de le brancher sur les 3 pages de landing les plus populaire du site que j’entretiens. Gros merci!

    Leave a reply
    1. Eric Valois
      July 16, 2018

      C’est un plaisir Jérôme, merci pour le commentaire!

      Leave a reply
  4. Kathir
    July 15, 2018

    Thanks for the settings now my TTFB is less than 100ms..its awesome.
    I have few doubts,
    1.Does it make any problem with google cache?
    2. WordPress admin bar visible to everyone means? Its visible to page visitors?

    Leave a reply
    1. Eric Valois
      July 16, 2018

      I’m glad for your response time 🙂

      What do you mean by your Google cache? And yes, the admin bar can be visible to everyone. The first view on the page generates the cache. Consequently, if a logged-in user with admin bar makes the first view, then the admin bar is part of the cache.

      Leave a reply
  5. prashant
    July 28, 2018

    Hey Thanks For The Toturial.
    You said WordPress admin bar will be visible to everyone. So, Disable It Completely From User Profile But There Is Not any option To Disable Or Something.

    There Is An Option To Disable Toolbar When Viewing Site, You Mean I Should Uncheck That Right.

    Thanks!!!

    Leave a reply
    1. Eric Valois
      August 1, 2018

      Yes, exactly! That way, the admin bar is less likely to get cached by Cloudflare. You can also use the following snippet to disable the admin bar.
      /* Disable WordPress Admin Bar for all users. */
      show_admin_bar(false);

      Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*