Adding 103 Early Hints using Cloudflare Workers & HTMLRewriter

Website, Application, Performance
1

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 (HTMLRewriter · Cloudflare Workers docs) to fit your needs, such as excluding lazy-loaded images.

image
image905×187 15.9 KB

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

4 Likes
2

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
3

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