Critical Rendering Path
The critical rendering path is the sequence from first HTML bytes to first meaningful paint: DOM and CSSOM construction, style, layout, paint, and composite, each stage gated by blocking resources.
Definition
The critical rendering path is the minimum set of steps the browser must take to render the initial viewport: parse HTML into the DOM, fetch and parse CSS into the CSSOM, combine them into the render tree, run layout, paint, and composite. Every render-blocking stylesheet and synchronous script on that path directly delays first paint.
Context and scope
Optimized when tuning first paint and largest contentful paint: inlining critical CSS, deferring scripts, preloading fonts, and removing render-blocking chains on pages where initial appearance drives business metrics.
Common misconceptions
- Only images delay first paint — blocking CSS and synchronous scripts stop rendering before any pixel appears
- Moving scripts to the footer fixes everything — parser-blocking still stalls DOM construction wherever the script runs
- The path is a one-time cost — every viewport-sized layout change re-runs parts of it later
Anti-patterns
- Loading several blocking stylesheets in sequence, each waiting for the previous to discover the next
- Synchronous scripts in the head that also fetch data before anything renders
- Inlining the entire site CSS to optimize the path and shipping hundreds of unused kilobytes in every page
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path
What it is
Rendering has a dependency chain: the DOM cannot complete while a synchronous script mid-document awaits execution, and the render tree cannot build until the CSSOM is complete because any rule could affect any element. The path is therefore the union of blocking resources the initial viewport needs.
How it works
HTML parsing yields DOM nodes; blocking scripts pause the parser until fetched and executed; CSS parsing must finish entirely because of cascade semantics. Then style resolution produces the render tree, layout computes geometry, paint fills pixels, and compositing assembles layers. Media queries and print stylesheets can be marked non-blocking for the current context.
When to optimize
Pages whose conversion depends on visible content: landing pages, search results, article tops. Inline the CSS the initial viewport needs, defer the rest, make scripts async or deferred, and preload the primary font so text does not wait on CSS chain discovery.
Pitfalls
Inlining everything trades render-blocking for byte bloat that harms repeat views and cacheability. Script changes can invalidate layout late, re-running stages. Measure with LCP and paint timing rather than total page load, since the path is about early pixels, not completion.