The importance attribute is an attribute in HTML that specifies resource loading priority. It supports three values: high, low and auto. It can be used for tags such as , <link>, <script>, <iframe>, etc. By setting the importance level, developers can control the order of resource loading, such as setting the critical CSS or home screen image to high, and setting the non-critical script or lazy loading resources to low, thereby optimizing page loading performance. It should be noted that not all browsers fully support this property. Currently, the Chromium kernel browser supports it well. It is recommended to use it in combination with other optimization methods such as lazy loading, resource splitting, etc., and monitor the loading effect through DevTools. Rational use of importance can improve user experience, but abuse of high values should be avoided to affect the browser's default policy.

The browser has begun to support a new HTML attribute importance , which allows developers to specify priority for resource loading. This property can be used for tags such as <link> , <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175303607485397.jpeg" class="lazy" alt="HTML `importance` Attribute for Resource Prioritization" > , <script></script> , etc., to help the browser better determine which resources should be loaded first.

Its basic usage is:

 <img  src="/static/imghw/default1.png"  data-src="logo.png"  class="lazy" importance="high" alt="HTML `importance` Attribute for Resource Prioritization" >
<link rel="stylesheet" href="main.css" importance="low">

Currently, mainstream browsers support for this attribute is still being gradually improved (especially in the browsers of the Chromium kernel), but it has shown the potential to optimize page loading performance.

What is importance attribute?

importance is an HTML attribute that tells the browser the importance of a resource, thereby affecting its loading priority. It accepts three possible values:

• auto : default behavior, priority is determined by the browser
• high : Tagging this resource should be loaded as soon as possible
• low : means that the resource can be loaded later

For example, if you want to load critical CSS or home screen images faster, you can use importance="high" ; while some non-critical scripts or delayed loading images can use importance="low" .

Which tags can be used with importance ?

Currently the following tags support importance attribute:

• <img src="/static/imghw/default1.png" data-src="analytics.js" class="lazy" alt="HTML `importance` Attribute for Resource Prioritization" >
• <link> (such as CSS, preload)
• <script>
• <iframe>

This allows you to control the loading order of different types of resources more granularly. For example:

 <script importance="low"></script>
<link rel="preload" href="font.woff2" as="font" type="font/woff2" importance="high">

It should be noted that not all resource types recommend setting this property. For example, for asynchronously loaded scripts or lazy-loaded images, using importance="low" can avoid blocking key content.

Practical application scenarios and suggestions

In actual projects, rational use of importance can improve user experience, especially when the mobile terminal or network is slow. Here are some suggestions:

• Home Logo and Key Pictures : Set to importance="high" to speed up the rendering awareness of the first screen.
• Non-critical JS files (such as statistics scripts) : Set to importance="low" to avoid affecting the main process.
• CSS main style file : It is usually already high priority, but if you have multiple style sheets, you can mark the core style as high.
• Lazy loaded pictures or videos : Set to low so that the browser will first process more important resources.

But be careful not to abuse high , otherwise it may disrupt the browser's original reasonable loading strategy. It is recommended to use high only for resources on the real "critical path".

Browser compatibility and considerations

Currently, importance has been supported in Chrome, Edge, Opera and other Chromium-based browsers. Firefox and Safari are not fully implemented yet.

If you want to start trying now, you can add this property, and do not rely on it as the only optimization method. It is best to use it with other technologies, such as:

• Use loading="lazy" to control lazy loading of images
• Reasonably split JS/CSS resources
• Set the correct HTTP cache header

In addition, you can view the resource loading waterfall diagram through DevTools and observe the changes after setting importance .

Basically that's it. Although it doesn't seem complicated, it still needs to be judged based on specific scenarios when using it well in actual projects.

The above is the detailed content of HTML `importance` Attribute for Resource Prioritization. For more information, please follow other related articles on the PHP Chinese website!