Hands-On Data Structures and Algorithms with JavaScript

Critical rendering path (CRP)

So far, we have seen how to optimize the page load (reducing payload, size, and so on), and then we talked about the things which we will need to account for to keep the page performant once it is rendered. Critical rendering path is the technique of optimizing the initial load of the page above the fold (that is, the top part of the page that shows up on the initial load prior to any scroll). This is also known as time to interact (TTI) or time to first byte (TTFB), which we want to reduce to keep the page load fast.

Technically, CRP includes the following steps:

1. Receive and start parsing HTML.
2. Download and construct CSSOM.
3. Download and execute JS.
4. Finish constructing DOM.
5. Create Render Tree.

So if we want ...