Cloudflare Worker Generator Tool

Build a Cloudflare Worker without writing any code

A Cloudflare Worker sits in front of your website and lets you modify requests and responses at the edge. This tool builds a ready-to-use worker script from a few simple options. Just switch on the tasks you want, customise them, then click the button and copy the generated JavaScript.

What this tool can do

Add Early Hints headers – send Link: rel=preload hints early so browsers can start fetching key resources (images, scripts, styles, fonts) before the full page arrives, improving load speed.
Inject data into the HTML tag – add things like the visitor's country and region (from Cloudflare's geo data) as attributes on the <html> element so your page or scripts can adapt to the visitor's location.

How to set it up in Cloudflare

Make sure your domain is proxied through Cloudflare (the orange cloud is enabled in your DNS settings).
In the Cloudflare dashboard, go to Workers & Pages and click Create application → Start with Hello World.
Give the worker a name like 'web-site-advantage', then click Deploy, then click Edit code (top right).
Delete the default code, paste in the script generated below, then Deploy (top right).
Navigate to the target domain/zone via the Cloudflare domains page.
Click on Workers Routes in the side menu and add a route such as example.com/* with your worker selected, so the worker runs for your site.
Visit your site and confirm the changes are applied. e.g. look for a data-country attribute in the html tag.

Task: Early Hints

Add one row per resource you want the browser to fetch early. Choose the rel type, and for preloads pick what the resource is via the as column. Restricted attributes use dropdowns.

The path column limits a hint to certain pages. It is not a regular expression – it matches against the request path (the part after the domain, e.g. /blog/post) using these simple rules:

Leave it blank to apply the hint to every page.
Enter an exact path such as / or /checkout to match only that page.
Use * as a wildcard for “anything”. For example /blog/* matches every page under /blog/, and *.html matches any path ending in .html.

The match is against the path only – the domain and any query string (?...) are ignored.

We also suggest you enable Cloudflare Early Hints caching. Go to Speed->Settings, switch to the Content Optimization tab and switch on Early Hints. It lets Cloudflare locally cache early hints so it can respond even faster with them.

Import from URL fetches a page you specify and scans it for existing preload/preconnect hints, then adds them to the Early Hints grid above so you don't have to enter them by hand.

It imports HTML preloads/preconnects unless they already exist in the early hints header outside of those added be this worker. It also imports early hints from the version of this worker that is already deployed.

Responsive image preloads (those with an imagesrcset) are skipped, and any hints that already exist in the grid are ignored so nothing is duplicated.

Please review all the early hits you deploy. Ensure they have the right settings and are used on all the pages they get added to (e.g. the whole site if the path is blank).

Task: Inject Data into the HTML tag

Testing

The generated worker supports a query string parameter so you can compare a page with and without the worker's changes. Append cf-worker=off to a URL to bypass the worker entirely (return the origin response untouched), or cf-worker=no-hints to run the worker but skip only the Early Hints. This makes it easy to tell whether the Early Hints are coming from this worker or already from your CMS.

What is the Cloudflare Worker Generator doing?

The generated worker intercepts each request to your site, fetches the original response from your origin (for example BigCommerce), and only modifies successful HTML page responses. Non-HTML responses and error responses are passed through untouched.

Early Hints

When the Early Hints task is enabled, the worker adds your custom hints to the Link response header. Any existing Link header value is preserved and your hints are appended. Browsers that support Early Hints can then begin downloading those resources sooner, which can improve perceived load speed and Core Web Vitals.

Data injection into the HTML tag

When the data task is enabled, the worker reads Cloudflare's request.cf values and uses an HTMLRewriter to add them as attributes on the <html> element. A dash (-) is used when a value is not available. Your CSS or JavaScript can then respond to things like the visitor's location.

Everything runs at Cloudflare's edge, so there is no extra round trip to your origin server for these enhancements.