Chrome’s Five Resource Loading Priority Levels
In the Chrome browser, network request priorities are divided into five levels:
- Highest: Requests for critical resources like page HTML and CSS files.
- High: Requests for key content such as main images.
- Medium: Requests for application-specific JavaScript files.
- Low: Requests for inline Base64 resources and asynchronously loaded JavaScript files.
- Lowest: Requests for analytics tracking data.
We can see the priority of each request in Chrome’s Developer Tools under the Network panel, as shown in the image below.
Priority of Preloaded Resources
We can use link rel=“prefetch” and link rel=“preload” to preload resources, boosting page performance and enhancing user experience.
However, the priorities of these two types of preloading are different.
- Prefetch: It loads resources that might be needed on the next page, so its priority is assigned the Lowest level.
- Preload: It loads resources that will be used on the current page, so its priority is higher than prefetch. The exact priority depends on the type of resource being loaded.
The type is determined by the as attribute. Below are some examples of types.
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="myfont.ttf" as="font">
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="example.png" as="image" />
For these resources, the priority for preloading JS, CSS, and font files is High, while the priority for image resources is Low (see the screenshot below). This differs from the way JS resources are loaded within the page. For JS files directly linked in the page, the loading priority is Medium, while IMG images have a priority of High, and CSS has the highest priority, Highest.
Adjusting Resource Loading Priorities
If you want to adjust the default preload priority loading rules, you can use the fetchPriority attribute to override them.
For example, if an image in a CSS file is very important and needs to be loaded with high priority, you can set it like this:
<link rel="preload" href="./important-source.png" as="image" fetchPriority="high" />
At this point, the priority of the image resource important-source.png will be set to High instead of the default Low. The actual request priority is shown in the screenshot below.
The fetchPriority attribute can also be applied to elements to reduce the request priority of an image, for example:
<img src="example.png" fetchPriority="low" />
While Chrome supports five levels of network request priorities, the fetchPriority attribute only supports three values: Low, High, and the default auto. These are the only values available for the fetchPriority attribute.
Why Understanding Resource Loading Priorities Matters
By adjusting or setting the priority or order of resource loading, you can ensure that important resources are loaded first, while less important content loads afterward, improving the page’s user experience.