Priority Hints, the attribute that can improve the Core Web Vitals of the site

Put us to the test
Put us to the test!
Analyze your site
Select the database

It is called Priority Hints and it is a new attribute that promises to speed up the loading of crucial resources for our sites, able to reduce by 2 seconds the download of an image above the fold, according to Google sources: Let’s discover together what the HTML Priority Hints attribute is, how it works and how we can exploit its potential to improve the Core Web Vitals metrics of our pages.

What is Priority Hints

Priority Hints is an experimental feature available in origin trial on Chrome 96+: technically, it is a set of signals based on the schema markup available via the importance attribute, that developers can use to communicate the importance of a particular resource to the browser, which in this way manages loading.

The article with which Google presents Priority Hints is a real invitation to use this feature, which can optimize the loading of resources and thus help improve the Core Web Vitals and user experience, as promised by the authors of the Chrome browser team.

The work of the browser today

Currently, when a browser scans a Web page and starts discovering and downloading resources like images, scripts or CSS, it assigns them a priority value of fetch in an attempt to download resources in an optimal order.

These priorities may depend on the type of resource and location in the document: for example, in-viewport images may have a high (high) priority, while the priority for <link> CSS loaded in advance and blocking rendering in the <head> field could be Very High. Browsers are “quite good at assigning priorities that work well, but may not be optimal in all cases,” say the Googlers.

Developers can exert a limited influence on the priority of resources using preload and preconnect: preload allows you to communicate to the browser the critical resources that you want to load before they are discovered naturally, and is especially useful for resources that are not easily identifiable, such as fonts included in stylesheets, background images, or resources loaded from a script. Preconnect helps keep connections to cross-source servers warm, can help improve metrics like Time-to-first-byte and is useful when you know an origin, but not necessarily the exact URL, of a resource that will be needed.

The priority of resources

The timing behind the download sequence for each resource on the page depends on various factors and to assign priorities is the browser, which downloads resources with the same priority calculated in the order in which they are detected.

The calculation logic of the browser is influenced by some factors, and for example:

  • CSS, fonts, scripts, images and third-party resources are assigned different priorities.
  • The position or order in which resources are referred to in the document also affects the priority of resources.
  • The preloa