Cloudflare Full Page Cache for WordPress
Add a full page cache layer using Cloudflare for your site running on the Bitpoke App.
Time required: 15 minutes
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.
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