Priority hints

[kara]

Description

Priority hints allow developers to explicitly communicate the relative priority of resources. Browsers can consider these hints when fetching resources.

Example:

<img src="cat.png" alt="My cat" fetchpriority="high" />

Rationale

For applications that use client-side rendering, it can be tricky to optimize the loading of critical resources like in-viewport critical content images.

Preload hints traditionally help with discovery, so it's not necessary to wait for the framework code to download and execute before the image starts to load but don’t necessarily signal relative importance of content.

However, there are still a few gaps:

• Adding the preload to the can be challenging in a CSR scenario. In Angular apps, for example, the index.html is shared by the whole application and the UI for the route is built dynamically. As such, it's not easy to add a preload for one particular route; every tag you add to the index.html is included in every route, so you end up with all the preloads for every page on all pages. It's also not easy to create a directive or component to add the preload dynamically because when using CSR, by the time the directive or component renders, it's too late for the preload to be of any use.

• Depending on their placement, preloads can also compete with the loading of the framework code itself, delaying the generation of the UI the image belongs in. They can also compete with other critical resources like render-blocking scripts. There isn't currently a way to denote which is most important to load first.

• Some enterprise teams are split up such that one team has control over the index.html (e.g. marketing or a CMS team) and another front-end team is responsible for the CSR-ed app. In this case, adding something to the can actually require making a request through slow, bureaucratic channels. The ability to mark an image's priority on the tag itself is valuable in this case.

There are additional issues that aren't specific to CSR, e.g.:

• Mixing preload with responsive images can be difficult to get right.

• Keeping the preloads up-to-date with content changes can sometimes be difficult, leading to loading of stale content that is no longer used.

Priority hints would help with these problems.

• With priority hints, a developer could preload an image and then tag it as low priority to avoid it competing with the framework code.

• As hints can be added to the image tag directly, developers won't run into issues with sharing the with other routes and it's easy to wrap the behavior into a higher-level component. This also helps in the case that organizational issues make the markup uneditable directly.

• Hints work also seamlessly with responsive images.

Priority hints can also be used to nudge the fetching order of other non-blocking assets. In particular, async scripts can benefit from an explicit signal for how important they are to the user experience as both critical application code and analytics or other behind-the-scenes code can be loaded asynchronously with no differentiation.

Relevant data points:

• In less than a year, priority hints are already present in 1.5% of Chrome page loads.

• Many popular origins, like yahoo.com, ebay.co.uk, and https://www.nintendo.com/ already use fetchpriority.

• The Angular image optimization directive is already using priority hints, with an implementation coming soon in the Next.js image component. These directives work slightly less well for browsers without priority hint support.

Specification

https://wicg.github.io/priority-hints/

Note: The plan is for the draft spec above to be converted to a standards track spec in the next month:

• Week of Oct 17: W3C web perf working group will vote on adopting the API
• November: first public working draft will be completed

Tests

You can see the WPT status for this feature here.

[ebizindia]

Very useful because we as developers know which are the critical images for the user experience. There may be some image which is vital for the user experience even though there may be many images in the initial viewport.

Please consider making it a web standard.

[gsnedders]

Note: The plan is for the draft spec above to be converted to a standards track spec in the next month:

• Week of Oct 17: W3C web perf working group will vote on adopting the API
• November: first public working draft will be completed

Is there any issue tracking that?

[tbondwilkinson]

This would be useful for Google's server framework.

"We want to provide customers with best possible performance out of the box and priority hints could be used for this (though I don't think we use them today). Having cross-browser support would be important for investing more here."

[gsnedders]

Note: The plan is for the draft spec above to be converted to a standards track spec in the next month:

• Week of Oct 17: W3C web perf working group will vote on adopting the API
• November: first public working draft will be completed

Is there any issue tracking that?

Ping?

Neither the WebPerf WG agenda nor the mailing list have any mention of Priority Hints nor any vote?

[yoavweiss]

I added it to the agenda for the next call. In previous discussions, the general sentiment was it would be better to have the spec integrated directly into HTML/Fetch, which seems reasonable to me.

[foolip]

@yoavweiss do you think there will be clarity on the destination of https://wicg.github.io/priority-hints/ before Nov 17? (That's our deadline for individual positions on each Interop 2023 proposal.)

[yoavweiss]

^^ @Bas-moz - following offline discussions

[valenting]

Hi all, we plan to implement priority hints in Gecko in Q1 of 2023. Thanks!

[yoavweiss]

Thanks for the update, @valenting! :) Any opinions regarding the right venue for the spec to live in? Would integrating it directly into HTML and Fetch work for y'all?

[valenting]

Thanks for the update, @valenting! :) Any opinions regarding the right venue for the spec to live in? Would integrating it directly into HTML and Fetch work for y'all?

Yes, I think that's the best approach. Thanks!

[pmeenan]

The spec is being merged into the core HTML and fetch specs with issues and PR's for both in-flight.

Fetch: Issue, PR
HTML: Issue, PR

There is also a Chrome CL with additions to the web platform tests to test it more thoroughly (there are already a few tests under priority-hints).

The spec PR's have links to the issue trackers for the various browsers for integration.

[foolip]

In the MDN short survey on APIs & JavaScript, "Priority Hints (fetchpriority HTML attribute)" was selected by ~6% of survey takers, putting it in the bottom third of options. (There is some uncertainty as with any survey data.)

In hindsight it would have made more sense to put this option in #245 (which was fielded on HTML sections of MDN) but nobody spotted this during the survey review, unfortunately.

[nairnandu]

Thank you for proposing Priority Hints for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. As of the deadline, the specifications for Priority Hints were not yet complete enough to allow interoperable implementations. To make progress on this area in the future it will first be necessary to ensure that the feature has a clear specification in a standards track document.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.