What is the Critical Rendering Path?

Critical Rendering Path

The Critical Rendering Path refers to the sequence of steps that a web browser takes to convert HTML, CSS, and JavaScript code into a visual representation on a user's screen.

It involves a series of processes, such as constructing the Document Object Model (DOM), generating the CSS Object Model (CSSOM), and combining both to create the Render Tree. The Render Tree is then used to calculate the layout and paint the pixels on the user's screen.

Critical Rendering Path optimization, on the other hand, refers to reducing the time spent by the web browser to execute each step of the sequence while prioritizing the content relevant to the user's current action.

To ensure your optimization efforts hit the nail on the head, you need to have an in-depth understanding of each step of the sequence. So the next couple of paragraphs are essential, and we strongly recommend reading them before taking action.

The CRP Sequence Explained

Here’s a quick overview of the steps performed by the browser when rendering a page:

• The browser downloads and parses the HTML markup and creates the DOM.
• Next, it downloads and processes the CSS markup and constructs the CSS Object Model (CSSOM).
• Then, it combines the necessary nodes from the DOM and CSSOM to create the Render Tree, a tree structure of all visible nodes required to render the page.
• It calculates the dimensions and position of every element on the page through the Layout process.
• Finally, the browser paints the pixels on the screen.

Now let’s zone in on each step.

The DOM

The Document Object Model (DOM) is the browser's internal representation of the HTML document.

When a web page is loaded, the browser parses the HTML and creates a tree-like structure of nodes that represent the elements in the document. Each node corresponds to an HTML element and has properties that describe its attributes, content, and position in the tree.

Important: The browser builds the DOM gradually, allowing us to optimize the rendering of the page by constructing an efficient structure and avoiding excessive DOM sizes.

The CSSOM

While the DOM contains all the content of the page, the CSSOM includes all the information on how to style the DOM.

Another difference between DOM and CSSOM is that the DOM construction is gradual, while CSSOM is not.

When a website is loaded, the browser has to process the CSS to apply the styles. Unlike HTML, which can be processed bit by bit, CSS needs to be processed all at once. This is because some styles might be overwritten by others later in the CSS file, so the browser needs to wait until it has read the whole CSS file before deciding which styles to apply.

This is done to avoid showing styles that will later be overwritten and wasting resources.

The browser blocks the rendering process until it receives and parses all the CSS. That’s why CSS is considered a render-blocking resource.

The Render Tree

The Render Tree is the combination of the DOM and CSSOM that the browser uses to create the visual representation of the web page.

The browser uses the Render Tree to calculate node dimensions and position as input for the painting process.

Important: Only visible content is captured in the render tree. Typically, the head section contains no visible information and is therefore excluded. Furthermore, If an element has a display: none property, neither the element nor its descendants are included in the render tree.

Layout

After the render tree is constructed, the next step is the layout. The layout establishes the placement and orientation of each element on the page by defining its dimensions, position, and interrelationships.

The layout performance is impacted by the DOM. The greater the number of DOM nodes, the longer the layout process is.

Paint

The final stage is painting the pixels onto the screen, which follows the creation of the render tree and the layout.

Initially, the entire screen is painted during the load process. Subsequently, only the affected parts of the screen are repainted, as browsers are designed to repaint only the necessary area.

Keep in mind that the duration of the paint stage depends on the nature of the updates being implemented on the render tree.