Caching Static HTML with WordPressWooCommerce
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.
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:
- Log into your Cloudflare account.
- Click the Caching app.
- Scroll down to Browser Cache TTL, and select the Respect Existing Headers value.
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 (though 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:
- 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).