Critical is the subset of styles required to render the visible portion of a page before scrolling. By inlining this CSS directly in the HTML head and deferring the rest, browsers can paint content faster without waiting for external stylesheet downloads.
Why CSS Blocks Rendering
Browsers must download and parse all CSS before displaying content. This makes CSS a render-blocking resource. If are large or network conditions are slow, users see nothing until CSS finishes loading.
The browser cannot know which styles apply to visible content without parsing the entire stylesheet. Critical CSS solves this by separating what is needed immediately from what can wait.
Implementation Approach
The technique involves three steps: extract styles for above-the-fold content, inline them in a style tag in the HTML head, and load remaining styles asynchronously. The inlined CSS should stay under 14 KB compressed to fit in the first network roundtrip.
"" varies by device and screen size. Critical CSS tools analyze pages at multiple viewport sizes to capture all potentially visible content.
Tools for Extraction
The Critical npm package extracts and inlines above-the-fold CSS automatically. It works with Gulp, Grunt, and Webpack. Chrome DevTools Coverage tab shows which CSS rules actually apply to visible content, helping manual identification.
Impact on Core Web Vitals
Inlining critical CSS directly improves LCP by eliminating the stylesheet request from the critical rendering path. Content appears faster because the browser has everything needed to paint without additional network requests.
