Accessing Cloudflare for WordPress website is a common operation to improve website speed and security. However, in the actual configuration, many webmasters will encounter the problem of “CDN cache does not take effect”; and once you force to turn on the whole site cache, it is very easy to trigger the “ordinary visitors see the administrator's toolbar” serious security risks.

This article will take you through a real troubleshooting experience to configure WordPress Cloudflare cache rules perfectly from scratch.

Avoiding the Pitfalls: Basic DNS and Mail Resolution Settings

Before you start optimizing your cache, make sure your base DNS records are set up correctly. The easiest mistake to make here isMail records are proxied：

  • Site resolution (A / CNAME records): root domain and www Must be turned on Proxied (small orange clouds)Otherwise, traffic would not pass through Cloudflare, and all CDN caching and WAF protection would be out of the question.
  • Mail parsing (MX / TXT / DKIM records): Where mail-related records (such as mail、hostingermail-a._domainkey etc.).Must be set to DNS Only (small gray cloud). Turning on proxies will cause outgoing emails to be determined as spam or bounced outright.

Phenomenon 1: The site is connected to Cloudflare, but still no cache?

If you look at the Response Headers for the current web page in the browser console (F12 -> Network), you find that the CF-Cache-Status The label is missing, or Cache-Control Displayed as no-cacheThis means that your site is not really utilizing the CDN node.

Troubleshooting and resolution steps:

  1. Turn off development mode: Go to Cloudflare Backstage Overview, make sure that the lower right corner of the Development Mode is closed.
  2. Mandatory override of source station instructions: WordPress by default or some plugins emit Cache-Control: no-cache directive, causing Cloudflare to behave and not cache. We need to utilize the Cache Rules Forced takeover.

Phenomenon 2: After turning on the site-wide cache, unlogged-in visitors even saw the background Toolbar!

To solve the above problem of not caching, many webmasters will just set an Cache Everything(caches all content) rules. It's a deadly operation!

Since Cloudflare caches the page you visit while logged in, it then distributes this page with the top administrator Toolbar to all regular visitors around the world who are not logged in. Not only does this confuse visitors, but it also potentially reveals the backend structure of the site.

The Ultimate Solution: The Perfect WordPress Cache Rules Configuration

In order to enjoy the whole site CDN cache speed, but also to avoid the background function confusion and cache pollution, we need to “custom expression” to accurately exclude dynamic requests.

Step 1: Urgently clear the error cache

If you've already stepped into one of the above potholes, head over to the Cloudflare left menu now:Caching -> ConfigurationClick Purge Everything, destroying all node caches that have been polluted.

Step 2: Create precise caching rules

leave for Caching -> Cache RulesClick Create rule.

  • Rule name: write data in a box (on a questionnaire or web form) WP Force Cache Safe(or any name).
  • When incoming requests match: option Custom filter expression.
  • strike (on the keyboard) Edit expression Switch to code editing mode and paste the following lightning protection code:
(not http.request.uri.path contains "/wp-admin/" and not http.request.uri.path contains "wp-login.php" and not http.cookie contains "wordpress_logged_in")

(The significance of this code is that caching is performed as long as the request path is not the backend, not the login page, and the visitor's browser does not have a “logged in” cookie).

Step 3: Setting the caching behavior (Then the settings are)

  • locate Edge TTL: Selection Ignore cache-control header and use this TTL(ignore the source cache-control and use this TTL), the recommended time is set to 2 hours Or longer.
  • locate Browser TTL(Optional): Select Override origin and use this TTLThe timing is consistent.
  • Scroll to the bottom and click Deploy (deploy/save).

How do I verify that it is in effect?

Once the settings are complete, use your browser's Incognito mode Visit the home page of your website. Press F12 Open the developer tools in the Network panel and click on the first HTML document request to see the Response Headers:

  1. quest CF-Cache-Status.
  2. The first refresh may show MISS(The node is going to the source station to grab it).
  3. Refresh again, and if it shows HITCongratulations, your WordPress site is now on Cloudflare's global CDN highway!

(Note: Since Cloudflare nodes are spread across the globe, the first visit from a different region may still be MISS, and as long as someone has visited once, subsequent visits from that region will be HIT.)