What is the Critical Rendering Path and why does it matter
DOM construction, CSSOM construction, render tree, layout, paint, composite
The Critical Rendering Path
The critical rendering path (CRP) is the sequence of steps a browser must complete before a user sees a single pixel on screen. Every millisecond spent here is a millisecond of blank page.
The browser parses HTML into the DOM (Document Object Model) — a tree of every element. Simultaneously, it parses CSS into the CSSOM (CSS Object Model). Both trees must be complete before the browser can build the render tree, which combines only the visible nodes with their computed styles.
Once the render tree exists, the browser runs layout (also called reflow): calculating the exact size and position of every element. Then paint fills in pixels — colors, text, shadows. Finally, composite assembles painted layers in the correct order on the GPU.
Any resource that blocks DOM or CSSOM construction is called a render-blocking resource. A single large CSS file or a synchronous script tag can halt the entire pipeline.
<!-- render-blocking: browser stops parsing HTML until this loads -->
<script src="analytics.js"></script>
<!-- non-blocking: parsed after HTML, does not stall CRP -->
<script src="analytics.js" defer></script>Measure your own CRP in Chrome DevTools → Performance tab → record a page load and look for the purple (layout) and green (paint) segments. These are your baseline numbers to beat.