Cloudflare Full Page Cache

Time required: 15 minutes

Solution overview

Cloudflare has been the most popular solution over the last decade for protecting a site and also for reducing costs with bandwidth. Since it’s an ubiquitous solution, we’re describing here a proper method to efficiently serve your entire site using Cloudflare as a full page cache approach on top of the Bitpoke App backend for your WordPress site.

We’re proposing a mixed method - proxying static files from a dedicated subdomain of the site and caching HTML content using the Cloudflare Workers approach. The latter allows for smooth handling of the cache invalidation policy. You would need at least a Cloudflare Pro plan. The proxying takes away the cost burden of using Workers for files that do not expire (images, stylesheets, scripts).

Set up Cloudflare for static files

We will set now the offloading of static content (media files, scripts) on a separate site subdomain and proxying it using the Cloudflare standard approach.

We’ll assume the site we are setting up is mysite.com, the static content subdomain cdn.mysite.com and of course, domain nameservers are set to Cloudflare.

Start by visiting to your site Routing in the Bitpoke App. Add the cdn.mysite.com domain name. Click Save Changes and from the same screen, copy the IP address in your clipboard.

Next, we’ll be adding the mysite.com site in Cloudflare. Afterwards, in the DNS menu we’ll create a new A record pointing to the IP address provided in the Bitpoke App in the previous step. Make sure to Save to create the new record.

The Bitpoke App needs one more simple configuration to enable CDN offloading. You need to define the variable CDN_HOST to the desired subdomain to serve static content. You can set this in the Site -> Environment menu entry.

Now check the setup, run a command like this in your terminal, replacing the URL with an existing image in your site:

curl -sI https://cdn.mysite.com/wp-content/uploads/2022/11/image.jpg.

The output should look like this, notice the cf-cache-status: HIT entry:

HTTP/2 200 
date: Fri, 04 Nov 2022 12:43:15 GMT
content-type: image/jpeg
content-length: 75911
cache-control: max-age=31536000
cf-bgj: imgq:85,h2pri
cf-polished: origSize=75919, status=webp_bigger
etag: "8552f87663d8e0ab770f8e48ae0c3a6b"
expires: Sat, 04 Nov 2023 12:42:49 GMT
last-modified: Wed, 23 Mar 2022 12:36:39 GMT
strict-transport-security: max-age=15724800; includeSubDomains; preload
x-goog-meta-goog-reserved-file-mtime: 1579799145
cf-cache-status: HIT
age: 26
accept-ranges: bytes
server: cloudflare
cf-ray: 764d6f2bb92ec31f-VIE
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400

Set up Cloudflare for full page caching

We’re moving on with the install of the Super Page Cache for Cloudflare plugin. You need to activate the plugin and then click on its Settings. Make sure to follow the steps required by the plugin. Also, be sure to disable Log mode in the first setup screen.

In the Cache tab of the plugin, make sure to enable Automatically purge single post cache when a new comment is inserted into the database or when a comment is approved or deleted.

The most important part is to enable in the Cache -> Cloudflare workers the Worker mode.

The last cache tweak that we recommend in the Cache tab is to enable the Purge HTML pages only option.

Now we should be all set to enable caching.

The simplest test to see if full page caching is to run a simple command-line like:

curl -sD- -o /dev/null https://www.mysite.com

The response should look like this in case everything worked properly:

HTTP/2 200 
date: Fri, 04 Nov 2022 13:47:42 GMT
content-type: text/html; charset=UTF-8
last-modified: Fri, 04 Nov 2022 13:45:52 GMT
strict-transport-security: max-age=15724800; includeSubDomains; preload
cf-cache-status: HIT
server: cloudflare
cf-ray: 764dcd970d0b78ac-VIE
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400