Critical CSS

Critical CSS is the subset of your styles that the first visible screen actually needs, extracted and inlined directly into the HTML. The browser can paint the top of the page immediately, while the full stylesheet loads in the background for everything below the fold.

The technique targets a specific bottleneck: external stylesheets are render-blocking, so even a fast site pays one round trip before anything appears. Inlining the critical slice removes that trip for the pixels that matter most, which is often the difference between a Largest Contentful Paint that passes Core Web Vitals and one that fails.

There is a balance to strike. Inline too little and the page flashes unstyled; inline too much and every page carries dead weight that cannot be cached. Getting the split right, and keeping it right as the design evolves, is finicky, build-tooling work. It is one of the standard moves in our performance passes, including on this site, where small above-the-fold sheets are inlined and larger ones stay external and cacheable.