UI Development

Web Performance: Resource Prioritization

This blog is to  give basic understanding how  Resource Prioritization plays role in web page performance.

To load a web page fast requires a lot of effort by the browser. Most of this effort is hidden from us, as web developers: we write up the code, and an  elegant web page comes on the screen. But have you ever thought how exactly does the browser go from consuming our HTML, CSS and JavaScript to rendered pixels on the screen? It’s a huge concept, let’s have a look at one of the concepts Resource Prioritization.

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.

Priority column in devtool

 

How it works

It runs through a series of steps to construct and render the page.

  1. Use the HTML to create the Document Object Model (DOM).
  2. Use the CSS to create the CSS Object Model (CSSOM).
  3. Execute the Scripts on the DOM and CSSOM.
  4. Combine the DOM and CSSOM to form the Render Tree.
  5. Use the Render Tree to Layout the size and position of all elements.
  6. 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

Optimizing for performance is all about understanding what happens in these intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels – that’s the critical rendering path.

optimiseflow picture

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

https://developers.google.com/web/fundamentals/performance/resource-prioritization

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

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

https://developers.google.com/web/fundamentals/performance/resource-prioritization

 

About The Author