Cloudflare WordPress Edge Caching via Workers

Edge Cache HTML via Cloudflare Workers

Hello,

These days I have worked at a small WordPress plugin. What is the usability of the plugin?
After you will install and set-up it, your website HTML content will be stored and served from Cloudflare’s Global Content Delivery Network with the help of Cloudflare Workers.

This should have a big impact on TTFB and directly to hardware resources. That means your website should load faster, even you don’t upgrade your hosting package.

About Cloudflare Workers & WordPress Caching

What are Cloudflare Workers?

Build serverless applications on Cloudflare’s global cloud network spanning 194 cities across over 90 countries. Cloudflare Workers provides a lightweight JavaScript execution environment that allows developers to augment existing applications or create entirely new ones without configuring or maintaining infrastructure.

The content will be cached only for public users (no logged-in ones).

The Edge Cache HTML via Cloudflare Workers plugin will purge automatically the cache, this being done via header

x-HTML-Edge-Cache: purgeall

that will call the serverless Cloudflare Workers function:

/**
 * Asynchronously purge the HTML cache.
 * @param {Int} cacheVer - Current cache version (if retrieved)
 * @param {Event} event - Original event
 */
async function purgeCache(cacheVer, event) {
  if (typeof EDGE_CACHE !== 'undefined') {
    // Purge the KV cache by bumping the version number
    cacheVer = await GetCurrentCacheVersion(cacheVer);
    cacheVer++;
    event.waitUntil(EDGE_CACHE.put('html_cache_version', cacheVer.toString()));
  } else {
    // Purge everything using the API
    const url = "https://api.cloudflare.com/client/v4/zones/" + CLOUDFLARE_API.zone + "/purge_cache";
    event.waitUntil(fetch(url,{
      method: 'POST',
      headers: {'X-Auth-Email': CLOUDFLARE_API.email,
                'X-Auth-Key': CLOUDFLARE_API.key,
                'Content-Type': 'application/json'},
      body: JSON.stringify({purge_everything: true})
    }));
  }
}

The Caching API is done by Patrick Meenan and described on his Github repo.
He also released a plugin that does this part.

Plug-n-Play WordPress Cloudflare Caching Plugin

Besides his plugin, I did the automation of worker creation on the user’s Cloudflare dashboard via API calls and automatically setting the route for the worker to work with WordPress site URL.

You can download the plugin on the official WordPress plugin directory or directly via your WordPress interface, searching for “Edge Cache HTML via Cloudflare Workers”.

cloudflare edge caching

 

Having all the things automated should help less technical people to achieve the best performances for their websites.

For any suggestions, don’t hesitate to share your thoughts via comments.

Thanks!

Silviu Stroe
I'm Silviu and I run Brainic, a mobile-focused software agency. I'm also a member of Nokia and Yahoo wall of fame. My interests are in low-code/no-code development and bleeding-edge technologies.

6 thoughts on “Cloudflare WordPress Edge Caching via Workers”

  1. Greetings Silviu,

    – Could you add API Tokens as well within “Account.Workers KV Storage, Account.Workers Scripts” scope?

    Thanks & Best Regards

    Jacob

  2. Hi Silviu,
    First of all, thanks for taking the time to develop and maintain this plugin. I recently came across it while researching ways to speed up wordpress sites and tried it out. I wasn’t successful in establishing a connection with my cloudflare account though. I got the following error:

    Cloudflare Response: Could not route to /accounts/workers/scripts/wp-edge-caching, perhaps your object identifier is invalid?. Code 7003

    I hope you can help me understand this. Here’s some more info:
    I installed and activated Patrick Meenan’s Cloudflare Page Cache plugin and then HTML Edge Cache via CF Worker plugin. I use the CloudFlare free tier. In your plugin settings page, I input my CF e-mail and the CF global API key. Hit save, and then (Re)Install CloudFlare Worker button. That’s when I see the message above. I remembered there were some additional instructions on Meenan’s github page so I followed some of those and manually created CF Worker script named html-edge-cache and another name wp-edge-caching and then binded a route from one of my staging sites to wp-edge-caching worker. Not using KV. Then I hit the (re)install CF Worker button again, but still the same message. I went through the support threads in the plugin wordpress page but wasn’t able to find a suitable answer.
    Hope you can tell me what I’m missing.

    Thanks in advance and have a great day.

    1. Hey,
      Sorry for the late response. That error means you have an incorrect API key as I remember. I don’t have any spare time unfortunately to maintain that plugin.

Leave a Reply

Your email address will not be published.