intermediate

Critical CSS

Prioritize above-the-fold styles, avoid excessive blocking CSS, and split non-critical styles carefully.

Critical CSS is the minimum styling required for a fast first meaningful paint of above-the-fold content. Full stylesheets are render-blocking: the browser may delay painting until CSS is downloaded and parsed.

Strategies: inline only truly critical rules in HTML, load the rest asynchronously, split route-level CSS, and purge unused selectors at build time. Balance against HTML bloat, cache fragmentation, and maintenance when components change.

					<head>
  <style>/* small above-the-fold rules */</style>
  <link rel="preload" href="/app.css" as="style" onload="this.rel='stylesheet'">
</head>

Connect decisions to LCP and CLS — hero typography and layout stability matter more than decorative rules far below the fold.

On interviews: inlining trade-offs, code splitting, unused CSS, and measuring real render blocking.

Common pitfalls: inlining entire frameworks; aggressive splits causing FOUC; optimizing CSS before proving it blocks paint.

Checklist:

Measure render-blocking in DevTools and Web Vitals.
Inline only small, stable critical rules.
Cache shared CSS across routes.
Audit unused styles in production bundles.