Skip to content

Critical Rendering Path

The sequence of steps the browser takes from receiving HTML to painting pixels: parse HTML -> build DOM -> build CSSOM -> apply styles -> layout -> paint -> composite.

The Critical Rendering Path (CRP) is the dependency chain the browser walks every time it converts HTML, CSS, and JavaScript into pixels. Anything that adds work to the path delays first paint -- which is why eliminating render-blocking resources, deferring scripts, and inlining critical CSS all matter so much for FCP and LCP.

The chain: bytes -> tokens -> nodes -> DOM tree, parallel CSS bytes -> CSSOM tree, DOM + CSSOM combine into the render tree, the render tree drives layout (geometry), layout drives paint (rasterise pixels), paint drives composite (assemble layers).

Each step is gated by the previous. Optimising the CRP means minimising the number of round-trips + the size of the resources fetched + the JavaScript that blocks DOM construction.

Related terms

Further reading

Send Feedback