From bytes to pixels
The critical rendering path is the sequence of steps the browser runs to turn HTML, CSS, and JavaScript into the pixels you see. Understanding it tells you what to prioritize for a fast first paint.
The steps
- Parse HTML into the DOM tree.
- Parse CSS into the CSSOM tree.
- Combine them into the render tree of visible nodes.
- Run layout to compute position and size.
- Paint and composite the final pixels.
What blocks rendering
CSS is render blocking: the browser will not paint until it has the styles it needs, so the CSSOM must be ready. A plain script tag is parser blocking: it pauses HTML parsing while it downloads and runs.
- Keep critical CSS small and load the rest later.
- Add defer or async to scripts so parsing continues.
- Avoid large synchronous scripts in the document head.
Key idea
The browser needs both the DOM and the CSSOM before it can paint, so shrinking render blocking CSS and deferring scripts speeds up first paint.