What is Critical Rendering Path (CRP) in Browser

What is Critical Rendering Path (CRP)?

Critical Rendering Path (CRP) is sequence of steps browser performs to transform HTML, CSS and JavaScript into pixels on screen.

Simply put, it's path from receiving HTML to displaying page to user.

CRP goal is minimizing time needed to display first useful content (First Contentful Paint, FCP).

CRP Stages

1. HTML Parsing

   • Browser reads HTML and creates DOM tree.

2. CSS Loading and Parsing

   • CSS blocks rendering. Until styles are loaded and processed, browser can't render page.
   • CSSOM (CSS Object Model) is created.

3. Render Tree Creation

   • DOM + CSSOM are combined → Render Tree (only visible elements with needed styles).

4. Layout (or Reflow)

   • Browser calculates sizes and positions of all elements (screen layout).

5. Painting

   • Elements from Render Tree turn into pixels on screen.

6. Composite & Display

   • Final layer assembly, their rendering and display to user.

Process Visualization

---

Why is This Important?

CRP directly affects:

• Page load and display time (first paint)
• User's perceived speed
• SEO and Core Web Vitals

What Blocks Rendering?

• CSS files — without them Render Tree can't be built.
• JavaScript, if loaded without defer or async, can stop HTML parsing.
• Large images and fonts, loaded synchronously.

---

How to Optimize CRP?

Conclusion

• CRP is critically important path from loading HTML/CSS/JS to page appearance.
• Its optimization = fast loading, better performance, higher Core Web Vitals score.
• Minimize blocking resources, use async/defer, do lazy load.