Understanding Critical Rendering Path (CRP)

What is Critical Rendering Path?

The Critical Rendering Path are the steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.

The DOM is created as the HTML is parsed. The HTML may request JavaScript that might alter the DOM. The HTML includes or makes requests for styles, which builds the CSSOM.

The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once layout is determined, pixels are painted to the screen.

Critical Rendering Path Deep dive

We can go into the details of the CRP with these steps:

• A request for a web page or app starts with an HTML request The server returns the HTML
• The browser then begins parsing the HTML, converting the received bytes to the DOM tree
• The browser initiates requests every time it finds links to external resources, that would be stylesheets, scripts, or embedded image references, some requests are blocking, which means the parsing of the rest of the HTML is halted until the imported asset is handled, this in when requests optimization comes in
• The browser continues to parse the HTML making requests and building the DOM, until it gets to the end, at which point it constructs the CSS object model.
• With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content.
• After the render tree is complete, layout occurs, defining the location and size of all the render tree elements
• Once complete, the page is rendered, or ‘painted’ on the screen.

Document Object Model

DOM construction is incremental. The HTML response turns into nodes which turn into the DOM Tree. Nodes contain all relevant information about the HTML element. .

The more nodes we have, the longer the following events in the critical rendering path will take. Remember A few extra nodes won’t make a big difference, but keep in mind that adding many extra nodes will impact performance.

CSS Object Model

The DOM contains all the content of the page. The CSSOM contains all the styling information. CSSOM is similar to the DOM, but different.

While the DOM construction is incremental, CSSOM is not. CSS is render blocking: the browser blocks page rendering until it receives and processes all the CSS. CSS is render blocking because rules can be overwritten, so the content can’t be rendered until the CSSOM is complete.

Render Tree

The render tree captures both the content and the styles: the DOM and CSSOM trees are combined into the render tree.

To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determines which CSS rules are attached.

The render tree only captures visible content. The head section (generally) doesn’t contain any visible information, so it’s not included in the render tree.

If there’s a display: none; set on an element, neither it, nor any of its descendants, are in the render tree.

Layout

Once the render tree is built, layout becomes possible. Layout is dependent on the size of screen.

The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other.

Paint

The last step is painting the pixels to the screen.

Once the render tree is created and layout occurs, the pixels can be painted to the screen.

On load, the entire screen is painted. After that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. Paint time depends on what kind of updates are being applied to the render tree.

While painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take.