This blog is to give basic understanding how Resource Prioritization plays role in web page performance.
What is Resource Prioritization
Resource prioritization is all about how browser figures out which assets should be requested and in what order.
When we request a web page, our browser sends a GET request to the server, which returns the HTML to the browser. The browser then starts parsing the page.
When it finds a reference to an external entity such as a CSS file, an image file, a script file, or anything external to the page (either on the same server/domain or not), it prepares to make a further GET request for that resource.
When a browser downloads resource,it is assigned a priority. By default, priorities depend on the resource type(ex. script, image), and the placement of the resource reference in the document. For example in Chrome, CSS loaded through the <link> element in the <head> will be assigned a priority as highest, images in the viewport will be assigned a priority of high, whereas images outside the viewport will be assigned a priority of low. A <script> loaded at the end of the document may receive a priority as medium or low.
How it works
It runs through a series of steps to construct and render the page.
- Use the HTML to create the Document Object Model (DOM).
- Use the CSS to create the CSS Object Model (CSSOM).
- Execute the Scripts on the DOM and CSSOM.
- Combine the DOM and CSSOM to form the Render Tree.
- Use the Render Tree to Layout the size and position of all elements.
- Paint in all the pixels.
Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.
Why its important
Requesting page resources in the correct order is critical for a fast user experience. Imagine, for example, a web page with a bunch of large images on it with an external stylesheet, a custom web font and a few scripts in the head. If the browser downloaded all of the images first and loaded the stylesheet last then the page would be completely blank until absolutely everything had loaded. If the browser loaded all of the blocking resources first followed by the web font and visible images then it could render the page much earlier and let the user start to consume the content while the rest of the images load. We need to optimize the order in which resources are loaded for the best user experience.
Its role in web performance
By optimizing the critical rendering path we can significantly improve the time to first render of our pages. Further, understanding the critical rendering path also serves as a foundation for building well-performing interactive applications. The interactive updates process is the same, just done in a continuous loop and ideally at 60 frames per second!
Different ways to handle browser prioritization
Not every byte that is sent to the browser has the same level of importance, and the browser knows this. Browsers have heuristics(guess on own) that attempt to make a best-guess at the most important resources to load first — such as CSS before scripts and images.
That said, as with any heuristic, it doesn’t always work out; the browser might make the wrong decision, usually because it doesn’t have enough information at that time. So in this scenario we can influence the priority of content adequately in modern browsers by letting them know what you’ll be needing later.
When talking about page performance, one useful concept is the “critical path”. The critical path refers to the resources that must be loaded before your initial render.
These resources, like CSS are critical to getting the first pixels on the user’s screen.
<link rel=”preload”> allows you to keep the benefits of individual file versioning and caching, while giving you mechanism to request the resource as soon as possible.
<link rel=”preload” as=”style” href=”homepage.css”>
Below is the link which has different ways to handle this scenario
and also we can use priority hints, async ,defer, lazyload.
How to test it
Enable the Priority column in Chrome dev tools
Useful reference links