Critical Rendering Path (CRP)

The critical rendering path is the sequence of browser work that turns HTML and CSS into pixels on the screen. Understanding its stages helps frontend engineers identify why resources or DOM/CSS changes can delay first rendering and make pages feel slow.

The browser first parses HTML into the DOM and processes CSS into the CSSOM. These structures provide the information needed to determine what should be displayed and how it should look.

The DOM and CSSOM are combined into a render tree containing the nodes that participate in rendering. The browser then performs layout, calculating each rendered element's geometry, such as position and dimensions.

After layout, the browser paints visual information such as text, backgrounds, borders, and images into drawing operations. The resulting layers can then be composited, often using the GPU, to produce the final frame displayed to the user.

Resources and operations can affect when rendering can proceed. For example, CSS is generally render-blocking because the browser needs style information before it can reliably render the page, while parser-discovered scripts can pause HTML parsing depending on their attributes and execution behavior.

Performance work therefore focuses on reducing unnecessary work and getting useful content through the pipeline quickly. Common techniques include minimizing blocking resources, reducing excessive DOM or style complexity, avoiding forced synchronous layout, and using appropriate loading strategies.

Key points

• HTML parsing produces the DOM; CSS parsing produces the CSSOM.
• The render tree represents content and styles that participate in rendering.
• Layout calculates geometry; paint records visual drawing operations; compositing combines layers into frames.
• CSS can delay rendering because style information is needed for rendering decisions.
• JavaScript can affect parsing, DOM construction, style calculation, layout, and painting depending on what it does.

Interview questions

What is the critical rendering path?

It is the sequence of browser operations required to turn page resources into rendered pixels. The important stages are parsing HTML into the DOM, parsing CSS into the CSSOM, constructing the render tree, performing layout, painting, and compositing. The exact implementation can overlap or optimize these stages, so the sequence is a useful model rather than a promise of one strictly serial execution.

What is the difference between the DOM, CSSOM, and render tree?

The DOM represents the parsed HTML document structure. The CSSOM represents parsed CSS rules and their relationships. The render tree combines relevant document structure with applicable styles to describe what participates in rendering; it does not necessarily contain every DOM node.

What happens during layout?

Layout determines the geometry of elements that participate in rendering. The browser calculates values such as dimensions and positions while accounting for the relevant layout rules and relationships between elements. Changes that affect geometry can trigger additional layout work, which is why repeated layout reads and writes in JavaScript can be expensive.

Why can CSS be render-blocking?

The browser needs style information to determine how content should be rendered. External stylesheets therefore can delay the point at which the browser can safely produce the initial styled rendering. Reducing unnecessary CSS, splitting CSS appropriately, and avoiding needless render-blocking resources can improve the path to useful pixels.

How would you investigate a slow rendering path in a real application?

I would use browser performance tooling to identify when parsing, scripting, style calculation, layout, paint, and compositing occur. I would then correlate long tasks and rendering work with specific resources, DOM changes, and JavaScript operations. The fix depends on the bottleneck: examples include reducing blocking resources, splitting or deferring work, simplifying expensive style or layout operations, and avoiding unnecessary repeated rendering.