Understanding Critical Rendering Path (CRP) to Improve Web Performance

A fast website is a necessity in the current fast-paced world. It can be achieved by Web Performance optimizations of the web application, and to understand the optimization, you must understand how browsers turn HTML/CSS/JS into rendered pixels. This is where Critical Rendering Path (CRP) comes into play. 

Table of Contents

Jump directly to the topic

1. What is Critical Rendering Path in a nutshell?
2. What all steps are executed by browser in the CRP?
3. How optimizing CRP helps in improving web performance
4. In summary

What is Critical Rendering Path in a nutshell?

The Critical Rendering Path (CRP) is the sequence of steps the browser performs to convert your HTML, CSS, and JavaScript code into the visual pixels on the browser to render a web page.

This means optimisation of the Critical rendering path is converting the code into visual pixels in a much faster way, so that it takes the minimum time to render the webpage in the browser.

What all steps are executed by browser in the Critical Rendering Path (CRP)?

Walk through all those FRP steps involved while rendering a web page on the screen 

1. HTML Parsing → DOM Construction
   The browser parses the HTML and builds the Document Object Model (DOM), which is a tree-like structure representing the web page.

2. CSS Parsing → CSSOM Construction
   In parallel, CSS is parsed to build the CSS Object Model (CSSOM), which defines how elements should be styled.

3. Render Tree Construction
   The DOM and CSSOM are combined to build the Render Tree, a visual representation of HTML elements with CSS to be displayed.

4. Layout (Reflow)
   The browser calculates the position and size of each element in the render tree. Think of this as setting up your page based on the Box Modal that includes height, width, margins, padding, etc.

5. Paint
   In this step, the browser paints the pixels to the screen based on the layout and styles.

6. Composite Layers
   For complex UIs or animations, the browser may break the page into layers and composite them, think of it like stacking the layers according to the visibility of the element (It is similar to what you see when using z-index property of the HTML element).

How optimizing CRP helps in improving web performance

Optimizing the CRP directly improves the core web-vitals of the web application that includes improvement in First Contentful Paint (FCP) and Cummulative Layout Shift (CLS), two critical metrics that affect both user experience.

Here’s how you can optimize:

1️⃣ Minimize layout changes after render

Any type of Layout changes after the render initiates a change in the layout flow (step 4), which is followed by the repetition of paint (step 5) and composition (step 6) steps again. This improves the Cummulative Layout Shift web vitals and contributes to web optimisation

2️⃣ Minimize render-blocking resources

Load critical CSS early for all the above fold items, that minimze the execution to create CSSOM. Use media attributes for non-critical stylesheets.

3️⃣ Inline Critical CSS

Only use inline CSS needed for above-the-fold content to reduce CSSOM build time. Overall minimize the rendering time.

4️⃣ Defer non-critical JavaScript

Use defer or async attributes. Avoid long-running blocking JS on initial load, which helps to create the DOM faster and eventually helps in faster rendering.

5️⃣ Compress and minify assets

Smaller files help in faster parsing, and faster parsing means minimization of CRP flow, which helps in quicker rendering.

6️⃣ Use lazy loading

Load only the necessary above-the-fold images, videos, or third-party scripts unless those are critical to the rendering of the page, which makes the Critical rendering path faster, and eventually means faster websites.

In Summary

The Critical Rendering Path is the core of how browsers render a beautiful website in the browser. This is a very important concept from the frontend Interview perspective to explain web-performance optimisation.

What Next ⏭️

Check out our other resources for frontend interview preparation

❇️ Best Frontend System Design - Cheat Sheet