CloudFlare Caching for  WordPress

WordPress is dynamic, meaning that every time a visitor accesses your site it executes many server-side processes to generate a page. It queries the database, executes PHP scripts, and builds the final page for the user. This makes it flexible and powerful but also slow, especially as traffic increases.

Static page caching solves this by serving stored copies of your fully rendered dynamic pages to visitors. This avoids all the server-side processing, but still loads static pages from a single server. If that server is in Virginia, USA and a visitor is in Germany, it may be slower than expected. CloudFlare’s edge cache solves this problem.

They operate one of the largest networks of data centers worldwide, with servers located in over 200 cities. When a visitor accesses your site, Cloudflare serves cached content from the data center closest to them, minimizing the distance data has to travel and reducing latency. For our previous use case, the visitor in Germany would load your statically cached website from a server in Germany, as close to that user as possible.

Creating Caching Rules in Cloudflare

To serve a WordPress site statically through edge cache, you’ll need to set up specific caching rules in Cloudflare that will cache all public pages served by WordPress, while ignoring sensitive internal resources like /wp-admin/ and /wp-login.php. You also need to avoid having a logged-in user store new cached versions of pages.

To do this, we’ll need two Cloudflare cache rules:

1. Bypass – Rules to avoid caching for logged-in users, and sensitive admin areas
2. Cached – Rules for all publicly coachable URLs, to be stored by logged-out visitors to the site

To create both of these rules, you’ll need to do the following.

Cached Rule

This rule aggressively caches all other content that does not match the criteria set in our bypass rule.

• Rule name: Cached
• If… Custom filter expression
• When incoming requests match…
  • URL Path does not start with /wp
  • OR Cookie does not contain wordpress_logged_in
• Cache eligibility: Eligible for cache
• Edge Cache TTL: 1 year

The full expression syntax can be copied directly into CloudFlare if you’d like to save some time:

(not starts_with(http.request.uri.path, "/wp-")) or (not http.cookie contains "wordpress_logged_in")

This rule must be first in the order, BEFORE the bypass rule.

Bypass Rule

This rule prevents caching for any requests to WordPress admin pages or by users who are logged in.

• Rule name: Bypass
• If… Custom filter expression
• When incoming requests match…
  • URL Path starts with /wp
  • OR Cookie contains wordpress_logged_in
• Cache eligibility: Bypass cache

The full expression syntax can be copied directly into CloudFlare if you’d like to save some time:

(starts_with(http.request.uri.path, "/wp-")) or (http.cookie contains "wordpress_logged_in")

This rule must be last in the order, AFTER the bypass rule.

HTTP Headers in WordPress

Now that you have our CloudFlare cache rules in place, you need to set HTTP headers like Cache-Control (and a few others) to tell CloudFlare when the cached rule should be active. It’s a strange step that threw me off for a while, but it seems to be needed to make things actively cache the way we want (up to a 1 year).

Add the following function to your theme’s functions.php to set the appropriate HTTP headers:

function set_custom_cache_headers() {
    if (is_user_logged_in()) {
        header('Cache-Control: no-cache, no-store, must-revalidate');
        header('Pragma: no-cache');
        header('Expires: 0');
    } else {
        header('Cache-Control: public, max-age=31536000, stale-while-revalidate=3600');
    }
}
add_action('send_headers', 'set_custom_cache_headers');

This will avoid storing any cached values for a logged-in user, protecting you from unwanted results such as having pages with an admin bar at the top cached for every visitor to see.

Automatically Clearing Cache with Changes

The final step is to automatically clear cache when posts, pages or other changes occur in WordPress. The simplest way to do this is to leverage the logic already provided by the Cloudflare plugin, with a set of specific configuration options.

1. Global API Key: When you first open up a site, there’s a “Get Your API Token” link in the bottom right column under the API settings. Click that, and you’ll be given the API key to enter into the CloudFlare plugin’s options
2. Enable the Purge on Content Changes to have cache automatically cleared whenever content is updated
3. Disable the WordPress Optimization feature to prevent conflicts with your custom caching setup

That’s it, you now have a very good static caching system in place for your WordPress website.

Final Thoughts

By implementing these caching strategies, you’re essentially turning your WordPress site into a lightning-fast static site for logged-out users, while dynamically serving logged-in users. This setup is simple yet effective, but it may require additional fine-tuning in production environments to meet specific needs. When properly optimized, this approach can drastically enhance site performance, providing a solid foundation for building a fast and reliable WordPress site.