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

It’s not a good idea to cache the XML sitemap, so you can add another page rule like below to bypass caching for XML sitemap.

cloudflare caching wordpress bypass xml sitemap

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.

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.

You can also create a page rule to bypass cache for these RSS feed URL like below.

cloudflare page rule bypass cache

The cf-cache-status HTTP Header

If you have enabled static HTML caching on your site, then Cloudflare will add the cf-cache-status HTTP header in every HTTP response. You can look at this header to find out if the HTML is served from Cloudflare edge server cache.

If the HTML is served from Cloudflare edge server cache, then the value of this header is set to HIT.

cf-cache-status: HIT

If the HTML is served from your origin server, then the value is set to MISS, or Expired

cf-cache-status: MISS

Set Up Page Cache on Your Origin Server

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. An edge server needs to receive request from visitors in order to cache HTML page.

When you make changes in your WordPress posts or someone leaves a comment on the post, the cache is cleared on all Cloudflare edge server, which will increase the load of your origin server. Another thing you can do to improve server response time is to set up page cache on your origin server. If you use Nginx web server, you can follow the tutorial below to set up Nginx FastCGI cache with WordPress.

That’s all folks !

Rate this tutorial
[Total: 4 Average: 4]

Leave a Reply

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