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
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’
Fail open (proceed) means additional requests will bypass your Worker and proceed to your origin.
2、Install and activate 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.
Measure TTFB with GTmetrix (after)
Measure TTFB with Pingdom (after)
Measure TTFB with Byte Check (after)
Measure TTFB with Geekflare (after)
Measure TTFB with WebPagetest (after)
If you have any questions, please leave me a comment.