Performance
Critical CSS
Critical CSS is the minimum set of styles needed to paint the above-the-fold view. It is inlined in the HTML so the browser can render without waiting for a stylesheet request.
How it is measured
Generate it by loading the page at a typical viewport and extracting the rules that apply to visible elements. Tools like Critters, Penthouse, or a framework plugin do this at build time. Check the output size, because inlined CSS adds to every HTML response.
Measure the effect in a trace by comparing First Contentful Paint with and without the inlined block. The remaining stylesheet loads asynchronously, so confirm it does not cause a flash of unstyled content.
Worked example
A landing page loads a 96 KB stylesheet that blocks rendering. On a throttled 4G run, FCP is 2,350 ms. Inlining 11 KB of critical rules and loading the rest with `media="print"` swapped on load brings FCP to 1,420 ms, and LCP to 2,050 ms.
On the same site, the article template has a different above-the-fold layout, so its critical block is 14 KB and is generated separately.
How it differs
Critical CSS is the inlined subset. Render-blocking CSS is any stylesheet the browser must finish before painting. Inlining critical CSS reduces what blocks. The critical rendering path is the whole chain, and CSS is one part of it alongside HTML, fonts, and blocking scripts.
Common errors
Inlining the entire stylesheet and bloating HTML. Generating critical CSS at one viewport and breaking mobile. Forgetting to regenerate after a design change. Causing layout shift when the late stylesheet changes sizes. Skipping the step on a site that already has a tiny stylesheet where it gains nothing.
In practice
Only bother if your stylesheet is large and blocks first paint. Generate critical CSS per template in your build, keep it under about 14 KB, and test CLS after adding it. Revisit it whenever the header or hero design changes.