Critical rendering path.
The critical rendering path is the minimum sequence of steps a browser must complete before it can draw a page on screen.
Before painting a page the browser has to build two trees: the structure of the document and the styles to apply to it. The two are combined, the layout is computed, and then the painting happens. Every step in the chain waits for the one before.
That is why stylesheets are render-blocking by definition: without the styles the browser does not paint, because what it painted could change entirely a moment later and the user would see a flash of unstyled content.
Scripts block for a different reason: a classic script element halts document parsing because the script can modify the document. Deferred and asynchronous scripts do not cause that halt.
- Document parsing — the HTML is read, the structure is built.
- Style parsing — the CSS is read, the rules are built. Blocking.
- Layout computation — where each element will sit is calculated.
- Painting — the pixels are drawn.
- Compositing — the layers are combined on screen.
Shortening the path happens two ways: reducing the number of blocking resources and reducing their size. On this site the styles were gathered into a single file and came to 12.4 kilobytes after gzip; the scripts are deferred and there are no external resources.
The last two steps of the chain — painting and compositing — explain why transform and opacity animations are cheap: those two properties never trigger a layout computation and are usually handled in the graphics card’s layer.
The practical steps for shortening the path, in order: reduce the number of stylesheets to one, compress the file and remove unused rules, make scripts deferred or asynchronous, and remove requests to external domains. All four are solved at the configuration level and none requires a code change.
The critical CSS technique is a more aggressive shortening of this path: the rules needed to paint the first visible area are separated out and embedded directly in the page. It is powerful but carries a maintenance cost — it has to be regenerated as the design changes, and when that is forgotten the result is worse than never having applied it.
The most practical way to measure the path’s length is to count, in the browser’s performance panel, the resources arriving before first paint: every stylesheet and every synchronous script in that list is a link in the chain and a point of waiting.
And a design implication: the length of the path is determined during design. How many typeface families will be used, what goes in the hero area and how many external services will be called — all three add links to the chain and cannot easily be removed later.