Priority hints #223
Description
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.