Skip to content
Gustavo J.
‹ Journal

The Critical Rendering Path

Understanding how the browser turns HTML, CSS, and JavaScript into pixels on the screen is crucial for performance.

Gustavo J.

· 5 min read · Performance

Why it matters

Performance isn't just about fast code; it's about how the browser processes it. The critical rendering path (CRP) is the sequence of steps the browser goes through to convert HTML, CSS, and JavaScript into pixels on the screen.

The Steps

  1. DOM: Document Object Model
  2. CSSOM: CSS Object Model
  3. Render Tree: Combining DOM and CSSOM
  4. Layout: Calculating geometry
  5. Paint: Filling in pixels

Optimizing each of these stages is what makes a website feel "instant". In my projects, I prioritize reducing render-blocking resources to achieve a near-perfect Lighthouse score.