How browsers render a webpage - Critical Rendering Path explained

If you are building websites or own a website, you always want to make your website load faster. To achieve a fast-loading website you need to know the steps that browsers take to convert HTML, CSS, and JavaScript into a vibrant, breathing website. This process is called the Critical Rendering Path.

When the browser receives the HTML response from the server for a page, many steps are taken before the pixels are drawn on the screen. The sequence that the browser must execute before first painting the page is called a critical render path.

Optimizing the critical rendering path can improve rendering and includes the Document Object Model (DOM), the CSS Object Model (CSSOM), and the rendering tree layout. In this article we focus on the first rendering of a web page, beginning with the parsing of HTML, provided that the browser receives HTML from the server in response.

The browser starts parsing the HTML with a request to convert the received bytes into a DOM tree. The browser continues to analyze the HTML and make requests for the structure of the DOM until it reaches the endpoint at which it constructs the CSS object model.

Once the DOM and CSS object models are completed, the browser creates the Render Tree and calculates styles for the visible content. When creating the render tree the browser checks each node that starts at the root of the DOM tree to determine which CSS rules are attached to each DOM node. 

Once the Render Tree is complete, the layout is done by defining the position and size of the Render Tree elements. The layout phase (also known as the reflow phase) is when the Render Tree is finished, the browser recalculates the position and dimensions of all elements in the document to render parts of the document. This process of recalculation by the browser is called browser reflow. The browser will prevent the user from interacting with the website until the browser has recalculated and/or recalculated the page. Minimizing the number of browser reflows required for a website will improve performance.

The last step is painting the pixels on the screen. This phase is called Paint Phase Once the render tree is created and the layout occurs, the pixels can be painted on the screen. Onload, 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.

Now that we know what steps are needed to render a page and how critical resources (HTML, CSS, and JavaScript) interfere with each other, we can figure out optimization measures. Our goal should be to get rid of any task (render-blocking tasks) that blocks any step of the above process.