Caching Static HTML with WordPress/WooCommerce

Cloudflare users on our Business Plan are able to cache anonymous page views when using WordPress using our Bypass Cache on Cookie functionality. This allows for static HTML to be cached at our edge, with no need for it to be regenerated from request to request. This tutorial will help you set this up with WordPress and WooCommerce. 

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

Before starting - be sure to ensure that Cloudflare is set to respect Cache-Control headers from your origin web server, otherwise you may find Cache-Control headers are overridden with by Cloudflare with the value set in the Browser Cache Expiration option. In order to set the "Respect Existing Headers" option, visit the Caching tab in the Cloudflare Dashboard:

Scroll down the page to find the "Browser Cache Expiration" option, and select the "Respect Existing Headers" value:

Once this is down, we can get on with setting the Bypass Cache on Cookie rule. In order to do this we need to head to the Page Rules section in the Cloudflare dashboard:

Next we can go ahead and click the "Create Page Rule" to set-up static HTML caching on our site. The first step is to actually set the Page Rule to match our WordPress installation path, if your site is at https://www.example.com, the rule would be https://www.example.com. In my case, I have installed WordPress on https://junade.com, so my Page Rule should match https://junade.com/*.

Screen_Shot_2017-03-09_at_16.54.36.png

We can then set-up the rules that we want to apply. "Cache Everything" will instruct Cloudflare to cache static HTML. When the "Bypass Cache on Cookie" rule matches the criteria we 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. 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.

Next, just click "Save and Deploy" and we're done!

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/customising your theme or editing, deleting or creating a post, attachment or page).

Still not finding what you need?

The Cloudflare team is here to help. 95% of questions can be answered using the search tool, but if you can’t find what you need, submit a support request.

Powered by Zendesk