Priority Hints, the attribute that can improve the Core Web Vitals of the site
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 preload tip on the resource helps the browser discover a resource faster and then load it before the document loads it and affects the priority.
- The async and defer attributes allow you to change the priority calculation.
The techniques to influence browser priorities
Knowing the logic of prioritizing the browser allows us to find out what are the existing techniques to influence or change the order of downloads. Currently we can:
- Place resource tags such as <script> and <link> according to the order in which we want to download them, because resources with the same priority are usually loaded in the order in which they are detected.
- Use the preload hint on the resource to download the necessary resources in advance, especially for resources that are not detected easily in advance by the browser.
- Use async or defer to download scripts without blocking other resources.
- Set the lazy loading of content below the fold, so that the browser can use the available bandwidth for resources above the fold more critical.
These techniques help to control the calculation of browser priorities, thus improving performance and Vitals Web Cores: for example, when a critical background image is preloaded, it can be detected much earlier, improving the Largest Contentful Paint (LCP).
However, sometimes such solutions may not be enough to give priority to resources optimally for our application, and in some scenarios it may prove very useful to have the opportunity to suggest priority, such as:
- We have several images above the fold, but it is not necessary that all have the same priority – like a carousel of images, where only the first visible image needs a higher priority than the others.
- Hero images within the viewport begin with a low priority; after the layout is complete, Chrome discovers that they are in the viewport and increases its priority, but this usually adds a significant delay to uploading the image.
- Declaring scripts as async or defer tells the browser to load them asynchronously. However, these scripts are also given a “low” priority, but we may need to increase their priority while ensuring asynchronous download, particularly for user-experience-critical scripts.
- The API Javascript fetch(.) allows you to recover resources or data asynchronously and the browser assigns high priority to recovery. However, there may be situations where we do not want all fetches to be executed with high priority, such as when executing background API calls and combining them with API calls that respond to user input (such as auto-completion). With priority hints we can mark API calls in the background as low priority and interactive API calls as high priority.
- The browser gives CSS and fonts a high priority, but all of these resources may not be equally important or necessary for LCP, and with priority suggestions you can reduce the priority of some of these resources.
How Priority Hints work to load resources
In short, publishers can speed up the discovery of web page resources using <link rel=preload> and can also indicate how and when scripts are downloaded and executed using the attributes “async” and “defer”but so far they could not send a signal to tell the browser which resources are important and which are not.
The current scenario just described changes with Priority Hints, the priority suggestions that are a signal based on the markup and the attribute Importance, and which can also be used via Javascript and the Fetch API to influence the priority of resource retrievals made for data.
It is in summary a function that allows developers and editors to set the preferred priority for the resources to be loaded and to suggest to the browser the relative importance of a resource.
Priority hints can work with preload integration, explains the article: for example, even with preload an image Largest Contentful Paint will still have a low priority, and if it is put behind by other resources anticipated at low priority, The use of priority hints can however help the loading speed of the image.
The value of the Importance value
With the experimental feature for priority hints available as origin trial in Chrome you can then provide a priority hint thanks to the importance attribute, which can be used on items such as links, img, iframe scripts and tags and allows you to specify the priority for resource types such as CSS, fonts, scripts, images and iframes when they are downloaded using supported tags.
There are three values of importance that we can attribute to:
- High, if for us that resource has a high priority and we want the browser to give it priority (provided that the heuristic of the browser does not prevent that from happening).
- Low, for resources with low priority, which the browser can deal with later (if the heuristic allows it)
- Auto, the default we can use if we don’t have a preference and we want the browser to decide the appropriate priority.
In practice, therefore, the importance attribute modifies the elements of the page by giving the web browser a suggestion on the value or lack of it of a specified element of the page itself, or simply lets the browser decide its priority.
When to use priority hints for resources
The importance attribute can serve to address a number of practical scenarios in which setting a priority can determine an advantage for our site. These are some of the use cases reported by Google.
- Increase the priority of the LCP image
By specifying importance=”high” on the image element, we anticipate the loading of Lcps and other critical images. For example, in the following video there is a comparison that shows the Google Flights page with an LCP background image loaded with and without priority suggestions – with the priority set to high, the LCP time improved from 2.6 s to 1.9 s.
- Reducing the priority of above-the-fold images
It is possible to use the attribute to reduce the priority of images above the fold that might not be important, for example in an image carousel – in an experiment, this allowed to reduce the loading time by 2 seconds.
- Reducing the priority of preload resources
In order to prevent preloaded resources from competing with other critical resources, we can provide a suggestion to reduce their priority and use this technique with images, scripts and CSS.
- Redefining the priorities of scripts
The scripts needed to make some parts of the page interactive are essential, but do not have to block other resources: we can mark them as async with high priority. It is good to remember that scripts cannot be marked as asynchronous if they are based on specific DOM states, but also that, if they are lower on the page, they can be downloaded with a lower priority.
- Reduce priority for non-critical data recoveries
The browser fetches with a high priority: if we have fetches that can be activated simultaneously, you can use the default high priority for more critical data recoveries and lower it for less critical data.
- Increase async script priority
Currently, semantics use <link rel=”preload”> for the async script, but the priority with the importance attribute works better.
- Decrease the priority of end-of-body scripts
This strategy allows for better sequence with images.
The SEO advantages of priority hints
Using the features of priority hints allows you to report the priorities of important scripts for our pages, making the user experience better because the browser will render the page faster and smoother.
Currently, this feature is at an origin trial stage and will be implemented in Chrome 96, whose release is scheduled for November 21, 2021, and are however already available on Chrome Canary, which is the trial version of Chrome.
In fact, Google Chrome had already launched a test of priority hints two years ago, but it didn’t receive much attention: it’s easy to assume that now, with more weight on user experience and metrics Core Web Vitals following the Page Experience update, there is a greater interest for a function that allows to improve some often critical aspects to reach the optimal thresholds, especially in the LCP.
There are however some clarifications to be done on the operation of priority hints, especially to understand the practical benefits for the SEO.
The main aspect to highlight is that the importance attribute is a suggestion and not a directive: basically, the browser will try to respect the preferences of the developer, but there is also the possibility that he will apply his preferences to the priority of resources as deemed necessary in the event of conflicts.
From the technical point of view, then, the priority hints should not be confused with preloads, because:
- Preload sets a mandatory recovery and is not a suggestion;
- It is easier to observe and measure the effects of a preload.
Priority suggestions can integrate preloads by increasing the granularity of priority assignment: for example, if we have already specified a preload at the top of the page for an LCP image, a “high” priority hint may not lead to significant gains. But if the preload was set to other less important resources, a high priority suggestion can increase the LCP. In particular, if a critical image is a CSS background image it should be set with preload E importance = “high”.
