From bytes to pixels
The critical rendering path is the sequence the browser follows to turn your response into a painted screen. Knowing the stages tells you where delay comes from.
- DOM: HTML is parsed into a tree of nodes.
- CSSOM: stylesheets are parsed into a style tree.
- Render tree: DOM and CSSOM merge, dropping hidden nodes.
- Layout: the browser computes the position and size of each box.
- Paint: pixels are filled in, then composited to the screen.
Why it matters
The first paint cannot happen until both the DOM and the CSSOM are ready. HTML parsing can pause when it meets a script, and CSS blocks rendering because the browser will not paint with unstyled content.
- Smaller HTML and CSS reach the render tree faster.
- Fewer round trips mean the path completes sooner.
- Deferring non essential work shortens the path to first paint.
The goal is to minimize the bytes and the steps needed before that first meaningful frame appears.
Key idea
First paint waits for both the DOM and the CSSOM, so shrink and prioritize whatever blocks those two trees.