Critical Rendering Path or CRP is the sequence of steps the browser takes to convert HTML, CSS, and JS into pixels on the screen, optimizing it improves rendering performance.🤯
Now, let's take a look at the steps followed in CRP to render a webpage.
What are the steps in CRP?
- Building the
Document Object Model. - Building the
CSS Object Model. - Forming the
Render Tree. - Forming the
Layout. Painton the screen.
Building the DOM
Document Object Model (DOM) is a standard object model for HTML. The HTML elements are converted into tokens which are converted into nodes. These nodes are arranged to build the DOM tree. Each node in the DOM tree contains all relevant information about the HTML element.
Each node has a startTag and endTag, If another set of startTag and endTag tokens come between a set of startTag and endTags, you have a node inside a node. Thus hierarchy is defined in the DOM tree. Construction of the DOM tree is incremental, every time the parser sees a new tag it gets added to the DOM tree.
The greater the number of nodes, the longer the following events in the critical rendering path will take.
Check out this page for a visual representation of how the DOM tree is built.
Building the CSS Object Model
If we draw an analogy of a webpage with the human body we can say that the DOM is the skeletal structure and CSS Object Model is the muscular system and the skin. DOM gives the content of a webpage, CSSOM gives the style.
The parser goes through the CSS and forms the CSSOM tree. Unlike DOM, the CSSOM tree is not built until all the CSS is completely parsed. This is because unlike in HTML, CSS style rules can be overwritten.
Forming the Render Tree
The DOM tree and CSSOM tree are combined to form a render tree. It captures only the visible content, hence it will not contain the head section and elements where the display is set to none.
Forming the Layout
Once the render tree is formed, the browser can start forming the layout. Layout determines how the elements are to be positioned and their width and height. It is dependent on the size of the screen, Viewport meta tag defines the width of the layout viewport (if it is not present, the browser takes the default value of 960px).
Paint on the screen.
Once the layout is formed pixels can be painted on the screen. On initial load, the entire screen is painted but after that only impacted areas of the screen will be repainted. Browsers are well optimized for this task and it is performed rather quickly.
How can we optimize CRP?
Generally, browsers are well optimized for rendering web pages. Unless we are doing something truly out of this world with our webpage, the gains that we can make from optimizing CRP is marginal.
But having said that optimizing resource loading and the number of requests can drastically improve performance.
We can minimize the number of critical resources by marking them as async or defer. This will in turn make them none blocking.
Optimizing the production build of the CSS and Javascript files can drastically reduce their size and therefore reduce loading times also.
If you are interested in learning more about CRP and performance optimization do check out these articles.