How to Enable WordPress HTML Caching in Cloudflare

This tutorial will be showing you how to enable HTML caching in Cloudflare for your WordPress site. Cloudflare is the largest content delivery network (CDN) in the world.

Why Enable HTML Caching in Cloudflare

By default, Cloudflare only caches static resources (CSS, JavaScript, images …) for your website. If your HTML page is dynamically generated like in WordPress, then HTML page won’t be cached on Cloudflare edge servers. So when a visitor come to your site, Cloudflare still needs to contact your origin server to fetch the HTML page, which degrades web performance because of the latency between Cloudflare edge server and your origin server. This latency is more higher if the visitor is located far from your origin server.

Cloudflare allows you to use page rules to configure HTML caching. The benefits of HTML caching are as follows:

  • Visitors can download your web page much faster.
  • It can greatly reduce the traffic and load on your origin server, saving your money for upgrading server hardware.
  • It can provide a certain degree of high availability for static websites like blogs. Even if the origin server goes down, visitors can still view content on your blog.

How to Enable HTML Caching in Cloudflare for WordPress

First, go to your Cloudflare account dashboard. Make sure your website is active on Cloudflare and the orange cloud is enabled for your HTTP traffic. (You can’t enable Cloudflare for SMTP traffic.)

cloudflare cache html wordpress

Then go to the Caching app. Make sure the browser cache expiration is set to respect existing headers, which means Cloudflare will respect the Cache-Control header from your origin server.

cloudflare browser cache expiration

Next, go to the Page Rules app. Cloudflare free plan users can use 3 page rules for each domain in their Cloudflare account. Click the Create Page Rule button.

Cloudflare page rules

Enter your domain name and a asterisk in the text field like below.

https://www.example.com/*

If you use a non-www domain for your website, then enter

https://example.com/*

Then click add a setting link. Set cache level to cache everything, which will instruct Cloudflare to cache static HTML. Then set the edge cache TTL, which defines the period your HTML page will be cached on Cloudflare edge servers.

cloudflare HTML caching

If you are a business or enterprise customer, you can also set the Bypass Cache on Cookie rule like below.

WordPress (native) Bypass Cache on Cookie             wp-.*|wordpress.*|comment_.*
WordPress with WooCommerce Bypass Cache on Cookie              wp-.*|wordpress.*|comment_.*|woocommerce_.*

Click the Save and Deploy button.

Keep in Mind

If you are not a Cloudflare business or enterprise customer, then you can’t use the Bypass Cache on cookie rule, which means your example.com/wp-admin pages will also be cached, and visitors will see the WordPress admin bar when they come to your site.

To prevent this from happening, you can create a DNS entry in the hosts file on your operating system. You should point your domain name to your origin server IP address in the hosts file, so that Cloudlare won’t cache HTML page when you visit your own site.

How do you know if you are visiting your origin server instead of the Cloudflare-cached version of your site? Well, you can check the HTTPS certificate. For example, I have a free Let’s Encrypt TLS certificate installed on my origin server and Cloudflare is using COMODO TLS certificate for the sites on it’s CDN network.

If I see the Let’s Encrypt TLS certificate in my web browser, then I know I’m visiting my website directly, bypassing the Cloudfare CDN network.

Let's Encryt TLS certificate

Automatic Cache Management in WordPress

The Cloudflare WordPress plugin can automatically clear the cached URL when you update a WordPress post or when a visitor leave a comment on a WordPress post.

Install and activate the Cloudflare plugin on your WordPress site.

WordPress cloudflare plugin

Then go to settings > Cloudflare. Log into your Cloudflare account.

wordpress cloudflare login

Next, enable automatic cache management and you are done.

Cloudflare automatic cache management

Cloudflare will only purge the associated URL when when you update a WordPress post or when a visitor leave a comment on a WordPress post.

Note

When a Cloudflare edge server requests HTML page from your origin server, that edge server will cache the HTML page for the time your specify in your Cloudflare account. However, this does not mean that your HTML page will be cached on every Cloudflare edge server.

Cloudflare Bandwidth Savings

Cloudflare can already save you about 80% of bandwidth if you just turn on Cloudflare on your website. If you enable HTML caching, you will save more bandwidth. Before enabling HTML caching, my origin server consumes 10 GiB to 15 GiB traffic in a day. After enabling HTML caching, it decreased to about 3 GiB.

cloudflare bandwidth savings

How to Handle WordPress RSS Feed Update

If you enable HTML caching, then the main WordPress RSS feed page (https://example.com/feed) will update when a new post is published. However, other RSS feeds, like https://example.com/tag/something/feed won’t be updated. This is a problem for web applications that relies on those feeds to work.

For example, I have set up a self-hosted newsletter app called Mailtrain that scans my site’s feeds and sends blog updates to my subscribers automatically when it finds new content. After enabling HTML caching, Mailtrain can’t find new content when I publish a new post.

To fix this error, you just need to add a DNS entry in the /etc/hosts file on the server that hosts the web application. You should point your domain name directly to the origin server’s IP address in the /etc/hosts file.

If you use MailChimp, then you can’t control the DNS entry on MailChimp server. You have to clear the cache for those RSS feed URLs in your Cloudflare account. And if you know web programming, you can write a simple program to automatically clear RSS feed cache via Cloudflare API.

Rate this tutorial
[Total: 1 Average: 5]

Leave a Reply

Your email address will not be published. Required fields are marked *