Caching Static HTML with WordPress/WooCommerce

Learn how to cache HTML files with WordPress and WooCommerce.

• Overview
• Prerequisites
• Cache Static HTML with Cloudflare Page Rules

---

Overview

Customers in all Cloudflare plans can configure caching HTML files. However, Business and Enterprise customers can bypass HTML caching when a cookie is sent with a request Bypass Cache on Cookie setting using Cloudflare Page Rules.

This allows for static HTML to be cached at our edge, with no need for it to be regenerated from request to request. 

Enterprise Cloudflare customers can use Custom Cache Keys to take their performance further, contact your Customer Success Manager for more details.

---

Prerequisites

Before starting - be sure that Cloudflare is set to respect Cache-Control headers from your origin web server; otherwise, you may find Cache-Control headers are overridden by Cloudflare with the value set in the Browser Cache TTL option. To set the Respect Existing Headers option,

1. Log into your Cloudflare account.
2. Click the Caching app.
3. Scroll down to Browser Cache TTL, and select the Respect Existing Headers value.

---

Cache Static HTML with Cloudflare Page Rules

1. Log in to your Cloudflare account.

2. Go to Rules > Page Rules and select Create Page Rule.

3. Set the page rule to match your WordPress installation path. If your site is at https://www.example.com, the rule would be https://www.example.com.

4. Select the appropriate settings to cache static HTML:

• Cache Everything instructs Cloudflare to cache static HTML.
• When the Bypass Cache on Cookie rule matches the criteria you set, Cloudflare won't cache HTML ((whilst static images and other files will still be cached). Depending on whether you're using raw WordPress, or WooCommerce, you should use one of the configurations below:

WordPress (native)	wp-.*|wordpress.*|comment_.*
WordPress with WooCommerce	wp-.*|wordpress.*|comment_.*|woocommerce_.*

• Finally, setting Edge Cache TTL will define the maximum period of time Cloudflare should keep cached files before getting them back from the origin web server. Even after setting a long Edge Cache TTL time, you can still manually clear the cache or use our WordPress plugin to automatically manage cache purging.

5. Click Save and Deploy to finish. 

Additionally, by using the Automatic Cache Management feature of the Cloudflare WordPress plugin, you are able to automatically purge the cache for your site after your site changes (i.e. changing/customizing your theme or editing, deleting or creating a post, attachment or page).