My favorite basic CloudFlare Page Rules for WordPress

My favorite basic CloudFlare Page Rules for WordPress

Some pages on my site include “affiliate links”. When you follow these and buy something on the other end, I get a small commission. This commission does not raise the price of your purchase. Ever. Not even a little bit.

Are you using CloudFlare on your WordPress site? If not, you should certainly consider it. You get superior DNS management, anti-DDOS tools, CDN, Web Application Firewall, SSL, and more. For free!

And when you’re ready to grow beyond the free tier, upgrade is easy and provides access to even more sophisticated optimization features.

But given CloudFlare’s sitewide (or, more precisely, domain-wide) caching and security features, some users become frustrated when CloudFlare’s services appear to cause critical pages to behave strangely. Admin pages that should never be cached do not update as expected (because they’re cached), shopping carts cease to function (same reason), online calendars fail, and more. In reality, CloudFlare is not at fault. Rather, the way in which it is sometimes configured can result in unexpected results.

So, how do we configure CloudFlare to grant us all the benefits we want without blocking the site functions we need?

The answer, as I will demonstrate using our example website, is CloudFlare Page Rules.

CloudFlare Page Rules

Page Rules associate preset actions with URL addresses. You define the actions you need (such as “cache this” or “secure that”), and provide a pattern that describes the desired URL address. The pattern can be a simple URL, which would then only match a specified address. In this case, the actions you’ve specified will only trigger when that one URL is requested. Or, the pattern can include wildcards, which would then match any URL that can be described by that pattern.

Actions available to you include a variety of caching and security settings, URL rewrites, CloudFlare apps controls, forwarding, and more. This means that Page Rules can do much more than prevent CloudFlare from “interfering” with site operations. They can add sophisticated behaviors, tighten security, refine caching, and more.

The free tier allows 3 Page Rules (though you can buy more for $5/month), and access to most of the action types you’re likely to need. Paid tiers add more Page Rules and actions (the higher the tier, the more you get).

CloudFlare Page Rules for WordPress

The instructions that follow assume that you already have a CloudFlare account (if you don’t yet, open one now), your site is already active on CloudFlare (if it isn’t, add it now), and you are logged in to your account. Further assumptions made here about your existing CloudFlare configuration include:

  1. SSL is enabled in the Crypto app
  2. Always Use HTTPS is set to On in the Crypto app
  3. Always Online is set to On in the Caching app

I’m also assuming that WordPress is installed in the root of your site, so you might have to change paths (patterns) if your installation differs.

Let’s get started!

Your admin area should be treated differently than the rest of your site. It should be uncached, more secure, and free of interference by addon apps. Let’s build a Page Rule that looks like this one in our example website:

Follow these steps to establish your own implementation of the above CloudFlare Page Rule for the WordPress Admin:

  1. Go to the Page Rules area (see icon links near the top of the page)
  2. Click the “Create Page Rule” button
  3. Enter a pattern to match the entire admin area: our-example-website.com/wp-admin* (replacing our-example-website.com with your complete domain name)
  4. Click the “Add a Setting” link in the lower left of the interface
  5. Click the “Pick a Setting” dropdown and select Security Level
  6. Click the “Select Security Level” dropdown that appears to the right of the new setting, and select High
  7. Click the “Add a Setting” link again, then “Pick a Setting”, select Browser Integrity Check, and ensure the toggle that appears is On
  8. Click the “Add a Setting” link again, then “Pick a Setting”, and select Cache Level, and in the “Select Cache Level” dropdown that appears to the right, select Bypass
  9. Click the “Add a Setting” link again, then “Pick a Setting”, select Always Online, and ensure the toggle that appears is Off
  10. Again, “Add a Setting”, “Pick a Setting” and select Disable Performance
  11. Again, “Add a Setting”, “Pick a Setting” and select Disable Apps
  12. Click Save and Deploy to activate the Page Rule immediately (or Save as Draft if you want to come back to it later)

Next, consider adding a similar rule for your login page (which is also your registration page, if you allow registrations). The pattern would be something like our-example-website.com/wp-login.php*, and all the settings can be as above.

Finally, let’s take care of your uploads by building a Page Rule that looks like this one in our example website:

Follow these steps to your own implementation of the above CloudFlare Page Rule for WordPress Uploads:

  1. Click the “Create Page Rule” button
  2. Enter a pattern to match the uploads directories: our-example-website.com/wp-content/uploads* (again, replacing our-example-website.com with your complete domain name)
  3. Click the “Add a Setting” link, then “Pick a Setting”, select Browser Integrity Check, and ensure the toggle that appears is On
  4. Again, “Add a Setting”, “Pick a Setting” and select Cache Level, and in the “Select Cache Level” dropdown that appears, select Cache Everything
  5. Again, “Add a Setting”, “Pick a Setting” and select Edge Cache TTL, and in the “Enter Edge Cache TTL” dropdown that appears, select a month
  6. Again, “Add a Setting”, “Pick a Setting” and select Browser Cache TTL, and in the “Enter Browser Cache TTL” dropdown that appears, select a month
  7. Click Save and Deploy to activate the Page Rule immediately (or Save as Draft if you want to come back to it later)

More CloudFlare Page Rules for WordPress

Your site may include sensitive pages that don’t play well with caching even beyond the admin, for example:

  • E-Commerce (account, cart, checkout, etc)
  • Events management system (especially public-facing event submission interfaces)
  • Pages hosting dynamic content that cannot be allowed to show obsolete information

In each of the above cases, Page Rules similar to the one demonstrated above for your admin area will be quite helpful.

And, of course, your site may include additional repositories of static content outside the uploads directory, such as media files and other uploads used for an app working outside of WordPress. In these cases, Page Rules similar to the one demonstrated above for your uploads directory can be applied.

Final Thoughts

Even using the free tier of CloudFlare, with only 3 included Page Rules, this feature can greatly benefit your WordPress project. And at only $5 per rule per month for additional Page Rules, there is plenty of opportunity here to extend this value at a low cost.

Note that Page Rules are executed in the order in which they are listed, so more specific rules should be higher on the list than the more general. And, of course, test your rules thoroughly before walking away.

Also note that some of the above settings (especially the long cache life values) will make active development on a live production site a little more difficult. Of course, as you already know, this is not the recommended practice. Instead, development should be done in an environment that is dedicated to development, and having a stager is often a good idea for evaluating your progress in an extra step between development and production. However, if you are indeed forced to develop in production, you can temporarily suspend Page Rules without deleting them, using the On/Off toggles in the Page Rules list. You can also Purge Cache and enable Development Mode (both in the Caching app) to further enable “live development”.

Do you have any favorite rules you can share? Any other intel for WordPress + CloudFlare projects?

Leave a Reply

Your email address will not be published. Required fields labeled in bold.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>