A brief introduction to Cloudflare Workers for WooCommerce and how they can help improve the performance of a WordPress CMS
Cloudflare Workers were announced in 2017 by Kenton Varda, their Principle Engineer, as a way to “make Cloudflare’s edge network programmable”; a network of servers deployed to over 100 locations worldwide powering their Content Delivery Network (CDN), security, DNS, and performance optimization services.
What if you can ‘outsource’ some of your website’s functions to the edge? Running scripts and delivering content from servers much closer to the user. Saving time and helping lower your hosting’s platform workload.
What are Cloudflare Workers?
Cloudflare Workers is a Javascript execution environment that is serverless (you’ll know what serverless means in a bit). It helps you build applications without having to worry about deployment.
The two main paradigms that you’ll come across are serverless computing and edge computing.
When we say serverless, we don’t mean that physical servers are not deployed. The idea here is that infrastructure has been set up. So developers can happily code away without having to worry about the tech. They can concentrate on writing quality code rather than server configurations.
Edge computing decentralizes your hosting infrastructure, which is how Cloudflare operates with its global network of servers. And rather cleverly: Workers, for example, run on the node closer to the user every time they are called. Below is Cloudflare’s graphic showing where Workers fits between a user’s request for a web page and the hosting infrastructure that serves it (Origin).
Here are a couple of other important concepts before we explain how this approach can help a website running WordPress:
- Low investment. Cloudflare is offering this as ‘Function as a Service’ and pricing is very accessible. Given you’re only placing static files in their cloud network. The first 100,000 requests each day are free. And paid plans start at just $5 for 10 million requests.
- Scalability, Performance, and Reliability: Because we’re rendering static files over a distributed network, performance is very good. Since it’s a cloud infrastructure, you can always scale up according to business needs.
Cloudflare Workers Examples
Now that we have an idea about Cloudflare Workers and their advantages, here are some examples of what you can achieve.
These may well be familiar to you as functions offered by plugins or your hosting provider. But you need to remember that they are handled on the edge before a request even hits WordPress.
Improving TTFB (Time To First Byte): TTFB is a measure of time from when a web page is requested to the time the first byte of the page is served. Cloudflare Workers can help reduce this by edge caching HTML.
Image optimization: This helps you resize, crop, compress, and convert your source images into WebP, which is a modern and efficient format for images.
Redirects. This saves from installing a plugin like Redirection and will work faster too.
Hot-link protection. Blocks other websites from hijacking your images and files.
A/B testing. Serve different pages for a particular URL based on a specific scenario, such as whether a cookie exists or not.
Rate limiting: Cloudflare prevents spammers from crawling your website, which results in consuming the bandwidth.
Your own function. Ask your developer what custom function can run on the edge to improve performance and reduce the load on your server.
For more examples check Cloudflare’s documentation as well as real-life implementations.
How to Implement Cloudflare Workers with WordPress
This is where it gets complicated (unless you are a dev).
Deploy a static version of your website. Yep, the whole site. The process, in a nutshell, is this: install a plugin like WP2Static, sign up for Workers Sites and install Wrangler for publishing. Bearing in mind that certain functions will not work as you’re hosting static files and can’t run PHP. Also, this approach introduces extra steps in your publishing workflow. There are certainly use cases for hosting WordPress on the edge but make sure you’ve weighed the pros and cons before taking the leap. Don’t forget you still need to host the fully-functioning version.
Run Workers for specific functions, as we have covered previously. This time you’re working directly in Cloudflare’s editor where you build, test and deploy your Worker. You must then define a ‘route’ for it to trigger; a URL pattern that Cloudflare recognizes to then fire off the Worker.
If you’re a developer or just curious to know how it all works head over to Cloudflare’s Workers Playground and test-drive them.