Critical Rendering Path

Definitions

1. The sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on screen: parse HTML → build DOM → parse CSS → build CSSOM → combine into render tree → layout → paint → composite. Render-blocking resources (CSS, synchronous JS) delay this process. Optimizing the critical path is the key to fast First Contentful Paint.

   In plain English: The sequence of steps a browser takes to display a page — blocking any step delays everything the user sees.

   Example: "Inline the above-the-fold CSS and defer everything else — shortening the critical rendering path dropped FCP from 3.2s to 1.1s."

Related Terms

• Hydration
• Islands Architecture
• Virtual DOM
• Web Worker
• Debounce
• Throttle
• Intersection Observer
• Code Splitting
• Preload
• Wasm