Decide whether critical CSS is the right problem to solve
Begin with evidence, not an audit label. Record a cold-cache load for a priority page on representative mobile and desktop profiles. Inspect the waterfall and trace: is a stylesheet delaying first content, and is it substantial enough to matter? DevTools Coverage shows CSS used in one session, not every route or state.
Try lower-maintenance work first: remove unused rules, minify and compress output, load route CSS only where needed, and avoid plain CSS @import chains. web.dev calls extraction and deferral advanced techniques.
A measured first-render delay is tied to CSS, a cold visit matters, and the initial layout can be maintained.
If server delay, images, fonts, JavaScript, or an already-small stylesheet is the bottleneck, inline CSS is unlikely to help.
Define the initial viewport as a test matrix
The initial viewport, sometimes called above the fold, is what a visitor sees before scrolling. It has no universal height: devices, zoom, language, cookies, and content variants alter it. One desktop screenshot can miss a phone or translated headline.
Use named profiles. Include narrow and wide layouts, key breakpoints, differing login structures, and any consent banner, promotion, maintenance message, or validation error entering the top of the page.
Record template, viewport, locale, authentication, consent, and top-of-page variants used to generate and test the set.
Test quick scrolling, menus, and form focus; a deferred rule is unsafe if its control can appear before full CSS applies.
Extract a small set from one source of truth
Generate critical CSS from the production build. Extraction can identify rules used in a viewport, but review conditional, dynamic, and transition rules. Do not hand-copy a second design system into templates; it will drift as components and markup evolve.
Keep output generated and versioned with the release, while source CSS stays authoritative. Inline only rules required for the first usable state. Large inline blocks delay HTML and cannot be reused from an external CSS cache on later pages. Compare cold and warm navigation before calling the change an improvement.
Track compressed inline bytes, remaining stylesheet bytes, and duplicated rules. One fewer blocking request is not necessarily a net gain.
Flag a build when extraction is empty, exceeds the inline-size budget, or changes unexpectedly from a reviewed baseline.
Load the remaining CSS safely and respect policy constraints
The remaining stylesheet must arrive before lower content and later states look complete. A documented pattern preloads CSS as style and changes it to a stylesheet after it loads, with a non-JavaScript fallback. Preload requests a resource early; it does not apply CSS. An incomplete set can restyle visibly.
Check Content Security Policy before using an inline load handler. web.dev notes that policy can disallow inline onload JavaScript, so use a compatible loader or another design. Test with JavaScript disabled. Media-qualified files help for genuine conditional styles such as print; a nonmatching query does not render-block, though it may still download.
Verify a visitor without JavaScript receives full CSS and can complete the priority journey.
Investigate a late first-viewport font or image separately; critical CSS does not fix its fetch behavior.
Test visual, functional, and cache regressions
Use visual comparison on each named viewport and top-of-page state. Check for unstyled text, overlap, hidden navigation, missing focus indicators, layout shift, and a snap when deferred CSS applies. Exercise keyboard navigation, touch paths, errors, and fast scrolling. If a deferred rule makes a control unusable, it belongs in the critical path or the design must change.
Test cold and warm visits. Cold testing shows whether a removed CSS wait improves rendering; warm testing shows repeated inline-byte cost. Test cached prior HTML and a return after deployment. Retain compatible assets while cached HTML may request them, and do not overwrite a fingerprinted stylesheet URL.
Compare first content and the main visible content, then use the trace to explain a gain or regression.
Include focus, contrast, motion preferences, zoom, and readable order. Faster rendering is not a pass if the interface is inaccessible.
Operate it as a reversible delivery feature
Give the pipeline an owner and document its inputs, artifact, templates, test profiles, and inline-size limit. Run tests whenever CSS, markup, a component library, a feature flag, or an above-the-fold third party changes. Coverage guides review, but one recording cannot prove a rule is safe everywhere.
Release behind a reversible configuration where practical. Record the known-good stylesheet path, artifact version, build identifier, and recovery method. If a regression appears, restore compatible delivery first, then diagnose the missed state. SIU uses this workflow to stabilize critical paths before customer impact spreads.
A new banner, consent flow, locale, breakpoint, or account layout requires regeneration and testing.
Revert template and delivery configuration to a compatible generation; do not edit immutable asset URLs older documents may reference.