Inlining critical CSS vs deferring the rest

Inlining critical CSS vs deferring the rest

CSS in your page head is render-blocking: the browser won't paint until it loads, which delays FCP and LCP. Two tactics tame this. Inlining critical CSS puts the few styles for the top of the page directly in the HTML. Deferring loads the rest of your stylesheet without blocking.

Think of inlining as packing a small carry-on for the first hour, and deferring as checking the big bag.

When each helps:
— A heavy stylesheet that delays the first paint: inline the above-the-fold styles.
— Styles only used lower on the page: defer them.

Try this: in Lighthouse, look for 'Eliminate render-blocking resources'. It names your blocking CSS files. Start by inlining just the header and hero styles. You don't need to inline everything, just the first screen.