Critical Rendering Path

The critical rendering path is the browser work required to produce the initial visible frame of a page. At a high level, the browser parses HTML into the DOM, parses required CSS into the CSSOM, runs any blocking JavaScript that can change them, builds a render tree, calculates style and layout, paints pixels, and composites layers. The path depends on which resources and work the first render actually needs.

Why it matters: Optimise measured bottlenecks, not the concept in isolation. Use a network waterfall and browser performance trace to see when initial HTML, styles, fonts, scripts, and the main visible content are discovered, downloaded, parsed, and executed. Remove unused critical work, keep required CSS available early, prioritise the resources needed for the initial view, and load non-critical code without blocking only when its dependencies and execution order allow. A large DOM or expensive layout can matter, but reducing DOM depth is not automatically the highest-value fix. Confirm the result with relevant paint metrics and real-user data, and make sure deferred resources do not break content, accessibility, or interaction.