Adding 103 Early Hints using Cloudflare Workers & HTMLRewriter

I’ve seen it asked a few times and I’ve also been curious myself - could you add the necessary link headers for 103 Early Hints using Workers and HTMLRewriter so that you don’t need to make any changes to your website itself?

The answer is yes - of course.

This uses HTMLRewriter to select all of the images, stylesheets and scripts from your HTML and add them into preload hints. This is very much a ‘scattergun’ approach and you may want to tune the selectors (https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/#selectors) to fit your needs, such as excluding lazy-loaded images.

With under 4ms of p99.9 CPU time per execution, this will happily run on the free tier of Workers.

4 Likes

Thanks @KianNH for sharing :smiley:

Though for me it’s a lot easier to do via origin as I only choose critical render path assets to be preload candidates :smiley:

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.