Google has developed an HTML attribute for Chrome that helps improve Core Web Vitals



The source – journal.topvisor.com  

Google has developed an experimental HTML attribute for Chrome called importance. It indicates the relative importance of a resource and helps improve Core Web Vitals and user experience. 

You can use the attribute to give an item a high or low priority when it's loaded. Google called it "Priority Hints." 

What developers can do: 

  • speed up finding items on the page by using link rel="preload";
  • control the loading and execution of scripts using async and defer attributes.

But they cannot tell the browser which elements are important and which are not.

The importance attribute gives the browser a clue as to which page element is important to load first and which is not. This ensures optimal loading and improves Core Web Vitals metrics.

The new attribute can have High, Low and Auto values and is used for tags:

  • link;
  • img;
  • script;
  • iframe.

Example of attribute usage:

< !-- We don't want a high priority for this above-the-fold image -- >

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

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

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

< script >

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

// Trigger a low priority fetch

});

< /script >

< !-- The third-party contents of this iframe can load with a low priority -- >

< iframe src="https://example.com" width="600" height="400" importance="low" > < /iframe >

Share

Spelling error report

The following text will be sent to our editors: