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”.

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!