What happens between the browser getting your code and showing the page?

The Critical Rendering Path (CRP) is the sequence of steps the browser takes to render a page. Understanding it is essential for optimizing page load performance.

The process begins with the browser receiving HTML and constructing the DOM (Document Object Model) tree. As it parses HTML and encounters CSS, it builds the CSSOM (CSS Object Model). JavaScript can modify both DOM and CSSOM, so scripts typically block parsing unless marked async or defer.

Once DOM and CSSOM are complete, they're combined into the Render Tree, which contains only visible elements with their computed styles. The browser then performs Layout (calculating exact positions and sizes of each element) and finally Paint (filling in pixels).

To optimize the CRP: minimize critical resources (CSS and JavaScript that block rendering), minimize critical bytes (size of these resources), and reduce critical path length (number of round trips needed).

Practical optimizations: inline critical CSS, defer non-critical CSS, use async/defer for non-critical scripts, eliminate render-blocking resources, minimize DOM depth, avoid complex CSS selectors, and use resource hints (preload, prefetch, preconnect).

Modern frameworks often handle many optimizations automatically, but understanding the CRP helps you debug performance issues and make informed decisions about resource loading strategies.