Understanding the Critical Rendering Path
Understanding the Critical Rendering Path is crucial to understand how the browser renders your website, what is painting, parsing, and more.

The Critical Rendering Path (CRP) is the process by which the browser takes the initial bytes of your website's resources (HTML, CSS, and JS) and turns them into pixels on the screen.
This initial rendering process (often referred to as the "content paint") is crucial because it determines how quickly users can see your content when they visit your website.
Improving the CRP can lead to faster initial rendering of the webpage and also result in better engagement, more time spent on the page, and lower bounce rates—all of which directly translate to increased revenue!
How Does It Work?
When you visit a webpage, the browser first initiates a request to fetch the HTML from the server. It starts parsing this HTML and attempts to construct the DOM.
In 2024, no webpage is just bare-bones HTML, so the browser needs to fetch other resources like CSS and JS before it can finish constructing the DOM and render the initial content.
The Rendering Process
The typical flow looks like this:
-
HTML Request and Parsing: The browser fetches the HTML and starts parsing it to construct the DOM.
-
Finding Resources: As the browser parses the HTML, it may encounter references to CSS or JS files. When it does, it pauses DOM construction to fetch and parse these resources.
-
CSS Resources: CSS files are render-blocking, meaning the entire CSS stylesheet needs to be fetched, parsed, and constructed into the CSSOM before the browser can continue building the DOM.
-
JS Resources: JavaScript files are not necessarily render-blocking (more on that in a future post), but they are parser-blocking. This means that the browser must complete the parsing of the CSSOM (if present) before it can start parsing the JS.
-
DOM Construction: Once the browser has fetched and parsed all necessary resources, it resumes and completes the DOM construction.
-
Render Tree: The browser then constructs the Render Tree by combining the DOM and CSSOM. It applies the necessary styles and captures only the visible content.
-
Layout: In this step, the browser determines where and how elements are laid out on the screen, calculating their width and height before they are painted.
-
Paint: Finally, the browser paints the pixels on the screen, allowing users to see the first flash of content.
All of this happens very quickly, but understanding this process is crucial before you start optimizing the CRP for your website. I'll share more on how to optimize the CRP in a future post.