What is the critical rendering path (CRP)?

The critical rendering path (CRP) is the sequence of steps the browser goes through to turn HTML, CSS, and JS into pixels on the screen.

It covers everything needed for the first paint of the page, and it determines how quickly the user sees anything at all.

---

#Order of steps

1. Loading HTML The browser starts loading the HTML document.
2. Building the DOM The HTML is parsed into a tree of objects (Document Object Model).
3. Loading and parsing CSS All CSS files are also loaded and turned into the CSSOM (CSS Object Model). Until the CSS is loaded, rendering is blocked.
4. Creating the render tree The DOM and CSSOM are combined into a tree of visual objects.
5. Layout (or Reflow) The sizes and positions of all elements are calculated.
6. Paint Each node is assigned a visual representation: color, font, background, and so on.
7. Composite Everything is assembled into a frame and sent to the screen.

---

#Why this matters

• Anything that blocks these steps (large CSS, synchronous JS, fonts) slows down the first render.
• Optimizing the critical path means minimizing the time to first useful content (FCP, LCP).

---

#Conclusion

The critical rendering path is the chain from receiving HTML to the first visible pixel. The shorter and simpler this chain, the faster the site "comes to life".