Critical Rendering Path

The critical rendering path is the ordered set of steps the browser must complete before the first pixels appear: parse HTML into the DOM, parse CSS into the CSSOM, combine them into a render tree, calculate layout, then paint and composite.

Why it matters

Any resource or step on this path delays first paint. CSS blocks rendering because the render tree needs the CSSOM, and synchronous scripts block HTML parsing because they might change the DOM. Optimizing the path means shortening it: fewer blocking resources, fewer round trips and fewer bytes before first paint.

Example

1. HTML bytes arrive  -> DOM
2. CSS arrives        -> CSSOM
3. DOM + CSSOM        -> render tree
4. Layout (sizes, positions)
5. Paint, composite   -> visible page

If the HTML references one stylesheet that references a font file, the path includes HTML, CSS and possibly the font before text shows (depending on font-display). Inlining critical CSS removes one request from it.

Common misconceptions

• It means the whole page load. Content below the fold and deferred scripts are off the path.
• Only file size matters. The number of round trips often matters more, especially on high-latency networks.
• Async JavaScript is always off the path. It can still delay rendering if it finishes early and runs a long task.

Related

• Render-blocking resource
• Critical CSS
• DOM
• FCP

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.