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.
script tags are high priority and block rendering. It is a good practice to avoid this using the
defer attributes to make the page start rendering faster.
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
Script tags are loaded with high priority unless the
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
To view request priorities in the Chrome DevTools network tab right-click on the table headers and click the Priority option to enable it.
DevTools always shows the final priority, so if there’s a priority change the value in the column will change from Low to High.
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.