Critical Render Path

One of the most important and fundamental concepts employed in downloading and building a web page for consumption is the Critcal Render Path.

Definition

The Critical Rendering Path is a multi-step process, that browsers and user agents follow to build and render a requested web page

It encapsulates all the activities undertaken between the user requesting a web page either by clicking a mouse, or tapping a link on a smartphone and the browser compositing (painting) the web page and displaying it to the viewport.

Deconstructing these processes into constituent components provides insight into how the web page is built and what factors can influence the amount of resources consumed in building a web page and also the how long it takes before the web page can be consumed by the requestor.

As a continually evolving activity, the major process flows and interactions of a browser have become more complex, based on their need to read, interpret and execute several different computing languages, such as HTML, CSS and JavaScript concurrently. The browser prioritizes the streaming of the HTML so that it can identify the resources it requires to build the web page. It also creates tokens from the HTML from which it begins to build the DOM (Document Object Model). Its next priority is to process the CSS defined in the head section of the HTML, tokenizing each CSS element it finds and from it creates the CSSOM (CSS Object Model).

Once the CSSOM is complete and sufficient tokens in the DOM have been created the Render tree can begin construction.   With elements of the Render Tree built, the browser can then begin to layout the web page and then paint it into a memory map.  When the first pixel of the web page is painted the First Paint (FP) or render start timing points are established.  

These processes occur fluidly and are iterated as resources are downloaded and more of the DOM is built. This continues until the DOM is completed, all resources have been loaded and the web page has been completely built.

The critical render path is also impacted by any JavaScript that is associated with the web page. This further increases complexity of how the web page is built as the JavaScript may have a negative effect on the processing of these tasks, such as render blocking and forced re-flows of the layout and painting processes. To deliver quality user experience care must be taken to optimize the critical rendering path especially when including JavaScript on the web page.

Usage