Demystifying Critical rendering path

Steps involved in CRP

What is Critical Rendering Path or CRP?

The sequence of steps browser goes through to convert the HTML, CSS, JS to actual pixels on screen. We can optimise this to make our page render fast and which will make user feel happy.

Steps involved in CRP:
1. Grab the HTML and build the DOM
2. Fetch the CSS and build the CSSOM
3. Combine the DOM and CSSOM and build the render tree.
4. Layout — Find out where everything gets placed in the page.
5. Paint the pixels on actual screen.
What about JS? How it effects the pipeline?

Step 1: Building the DOM

  1. Browser receives the Bytes from servers.
  2. Converts bytes to character.
  3. Tokens: HTML has it’s own set of rules to process received data. Ex: Text containing angular brackets is set to be a tag. By processing the character in combination of HTML rules, Tokeniser converts the characters into tokens as we can see in the above image.
  4. Simultaneously with the Tokeniser process, another process runs that accepts the tokens and converts to Node object. Each node object have all of it’s properties.
  5. DOM is created by consuming the tokens as per the existing relationship between multiple tokens and creating a tree of Nodes. Ex: In startTag HTML token we have head and body tags. The above image depicts the relationship and DOM.

Browser creates DOM incrementally and we can take advantage of that to speed up the rendering of pages.

Step 2: Building CSSOM — converting css to CSSOM

  1. Browser Receive the bytes from server.
  2. Converts bytes to characters.
  3. CSS has it’s own set of rules to identify valid tokens.
  4. The parser will convert tokens to nodes. In the above image the first node will be body. Next will be p and img. P and img are child of body because all the visible content should be child of body.
    - Children of the body inherits the styling of the body. That’s why it is called cascading.
    - We can’t use partial CSS on tree. It can lead to wrong styles when we render the page.

Note: CSS is render blocking. Browser stops page rendering until it receives and process all of the css.
More specific rules takes more effort to apply css.

Step 3: The render tree

DOM contains all the content of the page and CSSOM contains all the style of the page. How do we take contents and styles and turn them into pixels on screen?
We need to combine DOM and CSSOM into render trees.
Note: Render tree captures only visible content.
Steps involved in building the Render tree. we will understand with an example.
To create render tree we first visit the root node of visible content. In the above image the first visible content is body node. There is a rule that matches for body tag in CSSOM. So, we copy the body node to our Render tree alongside with css properties. Similarly for all visible nodes from DOM are copied to the render tree alongside it’s style if available in CSSOM.

Step 4: Layout

Deals with Where and how the elements are positioned on the page.

Layout

Layout calculates the dimensions of an element and aligns based on the available space.
The output of the layout process is a “box model,” which precisely captures the exact position and size of each element within the viewport: all of the relative measurements are converted to absolute pixels on the screen.

Finally, now that we know which nodes are visible, and their computed styles and geometry, we can pass this information to the final stage, which converts each node in the render tree to actual pixels on the screen. This step is often referred to as “painting” or “rasterizing.”

Step 5: Paint the page

  • When layout is complete, the browser issues “Paint Setup” and “Paint” events, which convert the render tree to pixels on the screen.

Optimising CRP for next. ✌️

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store