Early Hints Worker

A Cloudflare Worker that uses HTMLRewriter in order to select assets from the page that we want to include in Link headers, so that Cloudflare can cache these and emit 103 Early Hints responses.

Blog Post

Curious about what each part of the code does and why it's used?

Check out my blog post!

Notes

If your site has a lot of img/script/link[rel=stylesheet] elements, you will want to make sure you're scoping the selectors to the specific ones you want to preload! If your link header gets too large, this can cause issues - many servers or CDNs limit the size of an individual header to 8192B (8KB).

Take a look at the Don't Overhint! section of the blog post.

Requirements

A Cloudflare Account and a website using Cloudflare.
wrangler

Preconnect Domains

103 Early Hints also supports rel=preconnect hints - this will 'warm up' the connection ahead of requesting resources and is good for assets that don't necessarily need preloading, but you will be fetching soon after the page load.

The recommendation is to do this for important third-party origins, i.e Google Analytics or Google Fonts

Preconnect Link headers to important third-party origins (e.g. an origin hosting the pages’ assets, or Google Fonts). https://blog.cloudflare.com/early-hints-performance/

In order to configure this, add an array of domains to the preconnect_domains variable in wrangler.toml.

[vars]
preconnect_domains = ["https://kian.org.uk", "https://www.google-analytics.com"]

Instructions

Make sure that Early Hints is enabled in Speed -> Optimization
Clone the repository.
Make sure that your wrangler logged in to your Cloudflare account.
Open wrangler.toml and add a route key as necessary to make the Worker run on your website.

route = { pattern = "example.com/*", zone_name = "example.com" }