Google’s New Priority Hints API Can Accelerate Your Website

Recently, Google released a post urging website developers and publishers to start using Priority Hints API, a new feature that will help optimize website resource loading by prioritizing the most essential features for the user experience. This, in turn, would further enhance Core Web Vitals (CWV).

In a test done by the Chrome browser team, there was an image loaded as a background with the “performance” attribute causing the browser to save 1.9 seconds in download time for that image.

Browsers have their own default resource prioritization. But there are some ways we can tell the browser to rearrange this resource download prioritization by making it download one image or script before another or even pre-request some specific resource. This makes it easier when actually rendering the site. 

This all seems purely technical, but think about user experience. 

Google’s Core Web Vitals is all about giving your public the best experience. They will prefer a website that loads faster, and saves time, of course. The same is true for Google.

What are Priority Hints?

Priority hints are a feature that allows the developer to manipulate the priority order in which website resources will be requested and loaded for the user.

Imagine the web is like a road. On one end is you with your device and on the other side of the street is the store (an analogy to a website) you want to visit. The street itself is your internet connection. The DNS is like the address of the store you want to go to; the TCP/IP is the transport mechanism you use to go to that place (walking, by bike, by car etc) and the HTTP is the language you use to communicate to that website.

When you load a website, what happens is: your browser identifies the store (website) address and sends a request to the server (a computer where the website is stored) asking for permission to access that page. If the server approves, the browser assembles the small chunks of information into a complete web page and displays it to you.

So, when a browser requests a resource (an image, script, etc.), it receives a priority which will vary according to the type and storage location of the resource that is being requested.

Each type has a different priority for the browser to request, download and then render the resource. 

With Priority Hints, we are able to manipulate this priority in order to improve the user experience in our web applications.

The “importance” attribute accepts one of three values: 

• High: the resource is considered to be high priority and the user wants the browser to prioritize it as long as the browser’s usability settings don’t prevent this from happening.

• Low: the feature is considered a low priority and the user wants the browser to despise it if the default usability settings allow it.

• Auto: this is the default value where you don’t have a preference and allow the browser to decide the appropriate priority.

More control over your pages

In the end, Priority Hints can have great applications on user experience, as you, the site owner, can have more control over what is loaded first on your pages.

If you track the user’s behavior through heat maps, widgets, click spots or any other means, you can implement Priorities Hints based on these data to improve your site’s experience.

For example, you can prioritize the loading of a certain image or button on your main page that you saw users interact the most. Or, on the contrary, you can deprioritize unimportant scripts that may be affecting the performance of other more important aspects of your site, marketing-wise.

Besides that, Priorities Hints can also be beneficial for your SEO efforts. 

Since 2020, Google uses Core Web Vitals metrics to evaluate a website’s performance. 

If you score high on CWV, Google sees your page as user friendly and, as a consequence, will increase your chances of ranking high in SERPs.

Through the use of Priorities Hints, you can work together with your IT team to actively make changes to the loading processes of your website to test versions that have a positive impact on CWV metrics and on loading speed.

But be aware: they are just hints and not instructions, so the browser has the final say. However, Google says this behavior might change as Chrome’s implementation matures. As for the other browsers, we expect to see some advances related to this new feature as well.

How to use Priorities Hints

If you are reading this article and have a brief knowledge of HTML, you don’t need to contact a web developer to implement the new features. Otherwise, look for one. We know that marketers have a full tech stack and, more often, we need to learn new things and work with cross teams.

The following is a technical approach to Priority Hints.

Basically, the Priority Hint is an HTML resource. So, by specifying an “importance” attribute on a <script>, <img> or <link> element, you will already have control over the priority order in which the browser requests these resources. 

For example:

<!-- An image that the browser assigns "High" priority, but we don't want that. -->

<img src="/images/in_viewport_but_not_important.svg" importance="low" alt="I am an unimportant image!">

Since <link> elements are affected by the importance attribute, this means that priority may be changed not only for typical stylesheet inclusions, but also for rel=preload hints:

• rel=preload: allows you to write declarative search requests in your <head>, specifying the resources your pages will need right after loading, that you want to start preloading at the beginning of a page load’s lifecycle, before the machine’s main browser renderer goes into operation.

<!-- We want to start an early search for a resource, but also deprioritize it -->

<link rel="preload" href=" /js/script.js" as="script"hints importance="low">

In the excerpt above we see something different because the “rel=preload” indicates to the browser that our resource is important and not to break the rendering of the web application, but soon ahead we pass its importance as “low”. 

So in this scenario the browser knows that this <link> is essential for rendering the application but its importance is low. It will preload when opening the site, saving this resource in cache and, after finishing the other requests, re-include it in the DOM as soon as the resource is referenced.

Priorities are not restricted to using HTML. 

You can also change the priority of fetch requests within javascript applications using the importance option which assumes the same values ​​as the HTML attribute:

fetch("https://example.com/", { importance: "low" }).then(data = > {

      // Do what you would normally do with data fetching

});

Usage examples

The <img> tags are normally loaded with low/medium priority, but can be critical to the user experience in certain cases. For certain images the developer may want to indicate that their importance is above other features while maintaining the user’s experience with consistency. 

An important example of this is the page image on an image sharing site where the image is the primary content that is sought by users. 

Third-party resources (e.g. ad scripts) are often loaded with medium/high priority, but developers may want to load them with low or high priority, depending on their application’s needs.

Likewise, developers may want to load all primary resources that are critical with high priority.

Here are some examples of using the importance attribute:

• <script src=foo importance=high>: A script should be loaded with high importance as it is necessary for the user experience.

• <link rel=preload href=foo as=image importance=high>: An image should be preloaded with high importance (for example, potentially because the image is in the preview window or the page has no other critical features as they are all built-in). This is already the default browser preload behavior in current implementations, but developers would be able to explicitly state this preference.

• <link rel=stylesheet href=foo importance=low>: Can be used to indicate a low importance/non-blocking style that is not impacting the user experience.

• <iframe src=foo importance=low>: Decrease the importance of the iframe and all its sub-features.

• <img src=foo importance=auto>: An image must be loaded with no importance preference. The browser can use its own heuristics to decide the relative importance of the image.

Always prioritize the user experience

We know that maybe some codes can look strange for marketers. But working with other areas of your company would be beneficial and improve your performance.

At the end of the day, using Priority Hints helps us to have a more natural user experience. And that’s one of the main Google conditions to rank a website in a better position on SERP.

We will likely evolve our Core Web Vitals of applications, helping us to tell the browser what and when to prioritize when rendering our websites.

I particularly loved this new feature and will start applying it in my new projects. It gives us considerable control in our hands, allowing us to create extraordinary applications.