PERFORMANCE

Home › Glossary › Performance· 111 ·

Critical Rendering Path

/ˈkrɪtɪkəl ˈrɛndərɪŋ pæθ/n.

Filed underPerformanceArchitecture

In brief · quick answer

The sequence of steps the browser uses to convert HTML, CSS, and JavaScript into pixels. Minimizing this path is the foundation of frontend performance optimization.

§ 1 Definition

The CRP consists of five steps: (1) HTML parsing into the DOM, (2) CSS parsing into the CSSOM, (3) Render Tree construction (DOM + CSSOM), (4) Layout (geometry calculation), and (5) Paint. CSS is render-blocking; JS is parser-blocking by default.

§ 2 The Five Steps

DOM construction, CSSOM construction, Render Tree, Layout, Paint. CSS is render-blocking by default. JavaScript is parser-blocking by default. CRP length directly determines first paint time.

§ 3 Common Misunderstandings

CRP impacts every navigation and route change, not just initial load. CRP optimization is often confused with general performance optimization. Focus on CRP alone while ignoring INP leads to imbalance.

§ 4 Optimization

Inline critical CSS. Defer non-critical CSS with media queries. Defer JS with defer/async. Minimize external resources. Preload critical fonts and images.

§ 5 Note

Critical Rendering Path is often confused with 'Critical CSS' (a CRP optimization technique, not the path itself).

§ 6 In code

<style>header{display:flex}.hero{width:100%}</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">
<script src="app.js" defer></script>

§ 7 Common questions

Q. Does CRP apply to SPAs?: A. Yes for initial load. Subsequent navigation may skip HTML parse but still does layout and paint.

Key takeaways

DOM, CSSOM, Render Tree, Layout, Paint.
CSS is render-blocking.
JS is parser-blocking.
Inline critical CSS; defer rest.

How Atomic Glue helps

Atomic Glue audits the CRP and optimizes resource delivery order. Web Development services.

Get in touch

# Critical Rendering Path

The sequence of steps the browser uses to convert HTML, CSS, and JavaScript into pixels. Minimizing this path is the foundation of frontend performance optimization.

Category: Performance (also: Architecture)

Author: Atomic Glue Performance Team

## Definition

## The Five Steps

DOM construction, CSSOM construction, Render Tree, Layout, Paint. CSS is render-blocking by default. JavaScript is parser-blocking by default. CRP length directly determines first paint time.

## Common Misunderstandings

## Optimization

Inline critical CSS. Defer non-critical CSS with media queries. Defer JS with defer/async. Minimize external resources. Preload critical fonts and images.

## Note

Critical Rendering Path is often confused with 'Critical CSS' (a CRP optimization technique, not the path itself).

## In code

<style>header{display:flex}.hero{width:100%}</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'">
<script src="app.js" defer></script>

## Common questions

Q: Does CRP apply to SPAs?

A: Yes for initial load. Subsequent navigation may skip HTML parse but still does layout and paint.

## Key takeaways

DOM, CSSOM, Render Tree, Layout, Paint.
CSS is render-blocking.
JS is parser-blocking.
Inline critical CSS; defer rest.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/critical-rendering-path