How To Speed Up WordPress With Cloudflare Workers (The Definitive Guide)

This tutorial shows you how to set up Cloudflare Workers, make your WordPress site load fast, also get 100% GTmetrix scores.
Note: Before you use the Cloudflare Workers feature, make sure that your website is currently using Cloudflare’s services.
Please add your domain name to Cloudflare in advance.
Please resolve your domain name to an IP address in advance.
Demo domain: blogwp.ovh
Please replace blogwp.ovh with your own domain name.
Twenty Twenty-One theme with default demo site
The VPS used in this article: Vultr (1GB RAM, 1 vCore)
Get $100 of free Vultr credits if you sign up through this link!

LEMP stack used in this article: EasyEngine
Operating System: Ubuntu 20.04

https://blogelegant.com/ build with Hostwinds KVM VPS and Nginx FastCGI Cache.

Affiliate Disclosure: This page contains affiliate links. If you click through and purchase an item, I may earn a commission.

Method 1:
Install WP Cloudflare Super Page Cache plugin, this plugin will help you automatically configure Cloudflare Workers.

WP Cloudflare Super Page Cache Plugin Settings:
1. Enter your Cloudflare’s API key and e-mail

2. Select from the dropdown menu the domain for which you want to enable the cache

3. Enable “Worker mode” option and disable the cache buster form the “Cache” tab, click “UPDATE SETTINGS”.

Note: About “Disable the cache buster”, if you have enabled the Worker mode, you can disable this feature.
4. Enable Page Caching

Now the plugin will automatically configure a Cloudflare Workers in your Cloudflare “Workers” tab.
5. Edit Workers
In step 4, WP Cloudflare Super Page Cache plugin have configured Cloudflare Workers for me named swcfpc_worker_1609545745

Click “edit” to the right of the Worker name, click “Request limit failure mode”

Choose “Fail open (proceed)” Failure mode, Click “Save”

6. Rename Workers
Click on the name of the Worker

Click “Rename”

Click “Rename” again.

Speed Tests Results (after)
GTmetrix:

PageSpeed Insights:

Sucuri Load Time Tester:

Problems: The new comments will not be visible even if you have cleared the cache.

Method 2:
Install Edge Cache HTML via Cloudflare Workers plugin

1、Enter your E-mail Address and Cloudflare Global API Key, click “Save Changes”

2、Click “(Re)Install Cloudflare Worker”, now the plugin will automatically configure a “wp-edge-caching” Cloudflare Worker in your Cloudflare “Workers” tab.

Click “edit” to the right of the Worker name, click “Request limit failure mode”

Choose “Fail open (proceed)” Failure mode, Click “Save”

3、Install Cloudflare Page Cache WordPress Plugin

Speed Tests Results (after)
GTmetrix:

PageSpeed Insights:

Sucuri Load Time Tester:

Problems: The new comments will not be visible even if you have cleared the cache.

Method 3:
1、Cloudflare Workers panel basic operation
Click the ‘Workers’, set up custom Cloudflare Workers subdomain

Choose ‘Free’ plan, click ‘Continue with Free’

Click the ‘Workers’ again, click ‘Create a Worker’

The top left corner can customize the name, I set it to blogwp-edge-cache, click ‘Deploy to go live’

Remove the default code
Open https://github.com/cloudflare/worker-examples/blob/master/examples/edge-cache-html/edge-cache-html.js
Copy code and paste it in the Script section in Workers, change the following variables (email, key, and zone).

  email: "", // From https://dash.cloudflare.com/profile
  key: "",   // Global API Key from https://dash.cloudflare.com/profile
  zone: ""   // "Zone ID" from the API section of the dashboard overview page https://dash.cloudflare.com/

Click ‘Save and Deploy’

Click ‘Save and Deploy’ again

Open the menu above again and go to your domain console

Click the ‘Workers’, click ‘Add route’

Enter the URL you want to bind in Route. Select the Worker you just added. Click “Request limit failure mode”, choose “Fail open (proceed)” Failure mode, Click ‘Save’