Critical Rendering Path

What is it?

  • The sequence of steps the browser goes through to render the page, to convert the HTML, CSS and Javascript into actual pixels on the screen.
  • Always measure first! and Optimize it!

Converting HTML To The DOM

  • Make a request to Server with HTML -> The HTML will be converted to DOM (The browser will be processing the HTML and building the DOM)
  • The specific rules
  1. Every time the browser meets a tag bracket, it automatically emits a token.
  2. e.g)
  3. This entire process is done by the tokenizer.
  4. While it’s being processed, another process is happening which is consuming the token to create nodes.


  • DOM : a tree structure that captures the content and properties of the HTML and all the relationships between the nodes.
  • How Google does optimize it? :
  • [Incremental HTML Delivery] Think about the Google Search Engine. The header renders first and the rest of the HTML based on your search query will be shown to the user. (Returning the partial HTML could be a really nice performance optimization)
  • StackTrace in Timeline :
  • (1) Send Request –> (2) Receive Response -> (3) Receive Data -> (4) Finish Loading -> (5) Parse HTML (Request CSS, Javascript and Images)


Render Tree

  • Combine above those two DOM tree and CSSOM into the render tree.
  • Render tree only captures visible contents
  • How does it work?


  • To know where and how all the elements are positioned on the page
  • “ setting the width as your device width. e.g) device width=320px is width=320px

CRP workflow

  1. Request HTML Resources
  2. Receive Data
  3. Parse HTML (Converting the received Bytes to DOM tree)
  4. Request CSS / Images / Javascript
  5. Contruct CSS Object Model
  6. Recalculate Style (Layout : Build Render Tree (Computing all the styles for the visible contents)
  7. Layout (Compute the location and the size of the render tree elements)
  8. Paint (Render the page on screen)