Published: 11 May 2025
5-min read
Table of Contents
Introduction
Critical Rendering Path is the series of steps which browser takes from converting HTML, CSS and Javascript to display webpage. Understanding this process is important to improve the performance of website. We will learn a simplified version of the process and different browsers works differently.
Stages in Critical Rendering Path
The browser takes the following steps.
- The browser receives and loads HTML data from network.
- DOM: Browser parses the HTML and converts it into DOM (Document Object Model).
- CSSOM: Similar process of creating tokens, Nodes is followed for CSS to create CSSOM (CSS Object Model)
- Javascript: Apply Any javascript that can change DOM and CSSOM
- Render Tree: Render Tree is constructed by joining DOM and CSSOM. DOM tree is parsed and searches for matching CSSOM styles to create Render Tree.
- Layout: Render Tree is used to calculate the position and dimension of every element and a Layout is constructed.
- Painting: Final stage is Painting the pixels on screen. This step is also known as rasterizing.
Document Object Model (DOM)
DOM is a programming interface that allows to access and change the content, structure and style of webpage programmatically. It represents the structure of webpage as a tree of objects. Each element in HTML is represented as node in this tree.
The process of DOM construction is incremental. As soon as the browser gets some chunk of HTML, it starts processing it. The browser will not wait for all of the HTML data to be downloaded first and then start processing. The process of creating DOM is given below.
- The browser sends request to server for webpage. The server process the request and sends back a response which includes HTML of webpage.
- The Browser reads the raw bytes of HTML data and translates them into characters based on their encoding
- These characters are converted into tokens for Example <html>, <span>.
- Tokens are turned into Nodes. Each node starts with "startTag" token and ends with "endTag" token. Nodes contains all the relevant information about HTML element.
- Nodes are connected into DOM tree based on hierarchy. This hierarchy is based on parent-child relationship as defined in HTML.
CSS Object Model (CSSOM)
CSSOM contains all the information about styling the DOM. The process of CSSOM construction is similar to DOM. The CSS bytes received from server are converted into characters, tokens are identified, tokens converted to nodes and finally linked into a tree structure.
The "C" in CSS stands for Cascade. When computing the style an element, a descendant element inherits some of the styles of parent element. Hence incremental processing similar to DOM is not possible because CSS rules cascade down and may override previous one.
CSS is render blocking resource. When the browser is constructing CSSOM the browser delays javascript execution and stop DOM construction until it has finished downloading and building CSSOM.
Javascript
Javascript is a programming language that can access and change both DOM and CSSOM. It can add or remove elements from DOM, modify the properties of element in CSSOM and others. It is increasingly being used in nearly all websites.
Javascript is a parser blocking resource. Whenever the browser comes across a script in webpage it pauses DOM construction. The browser first executes the javascript, then continue with DOM construction.
You can alter this DOM blocking behaviour of Javascript by adding an async attribute to the <script> element. This attribute tells the browser to download the script in background without blocking the parsing of HTML. After script is it will be executed immediately irrespective of HTML parsing is completed or not. You can read about this attribute in detail at our <script> element webpage.
<script src="app.js" async></script>Render Tree
In this stage the browser combines DOM and CSSOM into render tree. This tree contains the content and style information for every element on the screen.
Only the visible elements are captured into render tree. For an element with display property set to none, neither the element nor its descendant is rendered (hidden element which have visibility: hidden property is also excluded from the render tree). The steps roughly taken by browser are given below.
- The browser starts at the root of DOM tree and traverses each visible node.
- Hidden (visibility: hidden) and omitted (display: none) nodes are ignored.
- For each visible node get the relevant CSSOM rules and applied.
- Combine content and style for each visible node
Layout
Through render tree we have content and style information. In this stage the exact position, style of each element and their relation to other element is calculated. All relative units are converted to absolute lengths on screen.
Layout is dependent on the size of screen. The viewport meta tag sets the width of layout equal to device width, without this tag browser uses default viewport width.
Paint
After render tree and Layout, we have all the information to Paint pixels on the screen. The entire screen is Painted on load. Repaint takes places only for changed areas of screen.
Optimize the Critical Rendering Path for Web Performance
The Critical Rendering Path (CRP) refers to the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen. Optimizing CRP helps improve page load speed and performance. Key Steps to Optimize the CRP is listed below.
- Prioritize Critical Resources - You should Remove unnecessary CSS, JavaScript, and fonts that block rendering or which is not used in webpage.
- Reduce Render-Blocking Resources - You should Defer or asynchronously load non-essential JavaScript. Use <link rel="preload"> for high-priority assets.
- Optimize CSS Delivery - You can use Inline CSS to render critical content faster. while the remaining CSS can be Loaded asynchronously.
- Optimize Web Fonts - You should Preload important fonts with <link rel="preload">. You can save network bandwidth by Limiting font variations (weights & styles).
- Minimize HTML, CSS, and JavaScript - You should Minify (remove whitespaces) HTML, CSS, and JS files to reduce their size. You can Use tools like UglifyJS, Terser, or CSSNano.
- Image - You should Compress images using image formats like WebP. Use lazy loading for below-the-fold images.
- Implement HTTP/2 or HTTP/3 - Both HTTP/2 and HTTP/3 improve web performance compared to HTTP/1.1, with HTTP/3 offering further advantages like faster connection establishment and improved resilience to network changes due to its QUIC protocol.