Early Hints with imagesrcset

Hello,

My site is using link’s such as <link as="image" fetchpriority="high" imagesrcset="/48x48/image.webp, /96x96/image.webp 2x, /144x144/image.webp 3x" rel="preload" type="image/webp"> and I am not seeing Early Hints 103’s being sent. Does Cloudflare support link’s which use imagesrcset? After doing some reading it seemed like it was possible to have the Link headers being processed after the browser knows the users resolution, so I am wondering if there is something I need to do to get this going.

Regards

Early Hints are only read from the Link header, not from any link elements in your HTML.

For more details:

You will need to have your origin return these assets you want to preload in a Link header, or instead transform them on the edge with something like HTMLRewriter and append the Link header yourself. @KianNH has a great blog post for doing this: https://kian.org.uk/implementing-103-early-hints-with-cloudflare-workers-htmlrewriter/

3 Likes

Thanks for the blog post, I’ll check it out.

I must have misunderstood the “Early Hints · Cloudflare Cache docs” as I thought Cloudflare had the ability to infer these if they were in my html.

It’s specifically headers at the moment.

When the response contains link headers with preconnect or preload rel types, such as Link: </img/preloaded.png>; rel=preload

https://developers.cloudflare.com/cache/about/early-hints/#enabling-early-hints

The ‘smart’ Early Hints that can visit your site, process which assets are critical & add them as Link headers automatically is on the roadmap but is just aimed for ‘end of the year’.

Smart Early Hints will generate Early Hints even when there isn’t a Link header present in the origin response from which we can harvest a 103. The goal is to be a no-code/configuration experience with massive improvements to page load. Smart Early Hints will infer what assets can be preloaded or prioritized in different ways by analyzing responses coming from our customer’s origins. It will be your one-button web performance guru completely dedicated to making sure your site is loading as fast as possible.

This work is still under development, but we look forward to getting it built before the end of the year.

4 Likes

Thanks for this information. I will work on building my own Link headers. One thing I am still unclear on but I will dig into, is how to write the kind of Link headers that work with imagesrcset, so that I don’t give early hints to download 3 different resolutions (1x/2x/3x) of my images.

I’m not totally sure if I’ve done it right but my first test Link header is

link: </System/Icons/48x48/shortcut.webp>; rel=preload; as=image; media="min-resolution: 1x"; type="image/webp", </System/Icons/96x96/shortcut.webp>; rel=preload; as=image; media="min-resolution: 2x"; type="image/webp", </System/Icons/144x144/shortcut.webp>; rel=preload; as=image; media="min-resolution: 3x"; type="image/webp", </Users/Public/Icons/48x48/brain.webp>; rel=preload; as=image; media="min-resolution: 1x"; type="image/webp", </Users/Public/Icons/96x96/brain.webp>; rel=preload; as=image; media="min-resolution: 2x"; type="image/webp", </Users/Public/Icons/144x144/brain.webp>; rel=preload; as=image; media="min-resolution: 3x"; type="image/webp", </Users/Public/Icons/48x48/doom.webp>; rel=preload; as=image; media="min-resolution: 1x"; type="image/webp", </Users/Public/Icons/96x96/doom.webp>; rel=preload; as=image; media="min-resolution: 2x"; type="image/webp", </Users/Public/Icons/144x144/doom.webp>; rel=preload; as=image; media="min-resolution: 3x"; type="image/webp", </System/Icons/48x48/user.webp>; rel=preload; as=image; media="min-resolution: 1x"; type="image/webp", </System/Icons/96x96/user.webp>; rel=preload; as=image; media="min-resolution: 2x"; type="image/webp", </System/Icons/144x144/user.webp>; rel=preload; as=image; media="min-resolution: 3x"; type="image/webp", </System/Icons/48x48/pc.webp>; rel=preload; as=image; media="min-resolution: 1x"; type="image/webp", </System/Icons/96x96/pc.webp>; rel=preload; as=image; media="min-resolution: 2x"; type="image/webp", </System/Icons/144x144/pc.webp>; rel=preload; as=image; media="min-resolution: 3x"; type="image/webp"

I see the header on my index.html response so perhaps I need to wait for Cloudflare to pick it up as I’ve purged cache. Or possibly my link header is not considered valid, I attempted to base it on examples and the RFC’s.

(post deleted by author)

I also see mention of an issue with Cloudflare and media link headers that one person had. I will test another version with type and where media is based on the Chrome 104 syntax of > instead of : .

Link: </System/Icons/144x144/shortcut.webp>; rel=preload; as=image; media="resolution > 2x", </System/Icons/96x96/shortcut.webp>; rel=preload; as=image; media="resolution > 1x", </System/Icons/48x48/shortcut.webp>; rel=preload; as=image; media="resolution > 0x", </Users/Public/Icons/144x144/brain.webp>; rel=preload; as=image; media="resolution > 2x", </Users/Public/Icons/96x96/brain.webp>; rel=preload; as=image; media="resolution > 1x", </Users/Public/Icons/48x48/brain.webp>; rel=preload; as=image; media="resolution > 0x", </Users/Public/Icons/144x144/doom.webp>; rel=preload; as=image; media="resolution > 2x", </Users/Public/Icons/96x96/doom.webp>; rel=preload; as=image; media="resolution > 1x", </Users/Public/Icons/48x48/doom.webp>; rel=preload; as=image; media="resolution > 0x", </System/Icons/144x144/user.webp>; rel=preload; as=image; media="resolution > 2x", </System/Icons/96x96/user.webp>; rel=preload; as=image; media="resolution > 1x", </System/Icons/48x48/user.webp>; rel=preload; as=image; media="resolution > 0x", </System/Icons/144x144/pc.webp>; rel=preload; as=image; media="resolution > 2x", </System/Icons/96x96/pc.webp>; rel=preload; as=image; media="resolution > 1x", </System/Icons/48x48/pc.webp>; rel=preload; as=image; media="resolution > 0x"

I had no luck with this. If media doesn’t work then at the moment I am not sure this is ideal for my responsive image preload use case.

I don’t think that’s supported in Early Hints.

https://html.spec.whatwg.org/multipage/semantics.html#early-hints

Only the as, crossorigin, integrity, and type attributes are handled as part of early hint processing. The other ones, in particular blocking, imagesrcset, imagesizes, and media are only applicable once a Document is created.

Oh that’s unfortunate if that’s the case. I guess for people with responsive images this isn’t ideal then.

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