Browsers load a website by requesting resources from a server. Each request has a different priority that determines when resources are allocated to loading the file and how quickly the resource is loaded.
This article looks at why resource priorities matter and what you can do to optimize them and make your website faster.
What are network request priorities?
When opening a website browsers need to load a range of resources, like the HTML document, web fonts, or images on the page. The browser assigns a priority to each resource.
Some resources are render-blocking, which means that no content on the page can be shown until this resource has been loaded. For example, this often applies to the HTML document and CSS stylesheets on the page, so requests for these resources have the highest priority.
In contrast, images are low priority by default. They don’t block rendering and may be used anywhere on the page, for example in the website footer where the user won’t see them until they scroll down.
This network request waterfall shows what resources are loaded on a website and what their priorities are. The render-blocking resources have high priority, while the images are low priority.
Why are resource priorities important for web performance?
To render a website quickly the most important resources need to be loaded early. Other resources should not be loaded yet, as they would compete for bandwidth with the more important resources.
If a browser doesn’t recognize a resource as important it may choose to delay downloading it until seemingly higher-priority requests have been made.
Example 1: Too many high-priority font preloads
One fairly common prioritization issue is loading too many web fonts early. This is done using preload tags which tell the browser to load a font before it is needed on the page. This is meant to optimize page load time, but can actually hurt performance as well.
Fonts are a high-priority resource as they are needed to render text. However, in this case the website preloads 11 fonts in total (some of which have been omitted in the waterfall visualization below). That means that the browser diverts resources from the render-blocking CSS and JavaScript code to download the fonts instead.
Example 2: Important JavaScript code has low priority
By default script tags are high priority and block rendering. It is a good practice to avoid this using the async and defer attributes to make the page start rendering faster.
However, this can backfire when a script is important for rendering the page. For example, one of the JavaScript files here is responsible for loading the main image on the page which is responsible for the Largest Contentful Paint (LCP).
In the waterfall this will show up as “Waiting” time, where the browser has discovered the resource but chooses to wait before requesting it. This is done to reduce competition with high-priority resources.
Can the priority of a network request change later on?
Browsers do sometimes change the priority of a request when new information becomes available.
This usually happens when the page starts to render. At this point the browser knows what page elements are in the viewport and which are outside. Images in the viewport are then prioritized.
When running a free website speed test with DebugBear you can see priority changes by looking for the asterisk next to the request priority. In this case you can see the priority change after the First Contentful Paint, indicated by the blue line in the waterfall.
How can you control the request priority of images?
Important above-the-fold images should use the fetchpriority="high" attribute in order to tell the browser to start loading them as soon as possible.
Images that are known to be below the fold can be lazy loaded using the loading="lazy" attribute.
What determines the priority of a request for a JavaScript file?
Script tags are loaded with high priority unless the async or defer tags are present. Addy Osmani has written a more detailed write-up of JavaScript request priorities.
What is HTTP/2 request prioritization?
The HTTP protocol is used to request resources over the network. The HTTP/2 version of the protocol lets browsers make multiple simultaneous requests using the same server connection and assign a priority to each request.
However, this relies on the server supporting the resource prioritization, which isn’t always the case.
How to view request priorities in Chrome DevTools
With the release of Chrome 117 on September 13th 2023, you can now find Initial Priority and (final) Priority in both the Network and Performance panels.
Seeing both of these values in the Performance panel is a new addition and they can be found in the Summary.
You can also still find them in the Network panel when the "Big Request Rows" setting is enabled.
Without the "Big Request Rows" setting DevTools always shows the final priority, so if there’s a priority change the value in the column will change from Low to High.
Conclusion
Request priorities are important because they allow the browser to make more efficient use of limited resources, especially bandwidth. Aim for the browser to assign a high priority to important resources on the page and a low-priority to less important content.
You can use DebugBear to test the speed of your website and monitor page speed continuously. Start a free trial today.
