Critical CSS

A linked stylesheet whose media condition matches the current device is render blocking: the browser refuses to paint anything until it downloads and parses the whole file, even the rules for your footer. (A sheet with media='print', or a media query that does not match, gets fetched at low priority and never holds the paint. That is exactly the trick behind the async load below.) Critical CSS splits that in two. The rules needed to draw the first screen go inline in a style tag in the head (zero extra round trips), and the full stylesheet loads asynchronously and takes over once it lands.

Nobody writes this by hand. Tools render the page at a target viewport, record which selectors actually match visible elements, and emit the subset at build time: Addy Osmani's Critical, and beasties (formerly critters), which Angular and several meta frameworks ship by default. The async load is usually a link with media='print' flipped to 'all' on load, or rel='preload' as='style' with an onload swap. It pays off most on content-heavy first visits where FCP and LCP are dominated by one fat stylesheet.

Two ways it bites. Inlined CSS is not cached, so it re-ships on every page load: keep it small, roughly a few kilobytes, or you trade render blocking for a heavier HTML document. And it goes stale the moment someone edits a component, so it has to be regenerated in the build, never committed by hand. If your CSS is already small (a trimmed Tailwind build, for example) this is effort better spent elsewhere.