Critical CSS is the minimum style needed for the initial viewport, delivered early so visible content can render before the full stylesheet is available.
Style the first screen promptly
Critical CSS is the set of rules needed to style the initial viewport of a particular page. Delivering those rules early can let the first screen render while the rest of the stylesheet loads.
Inlining has a cost: the rules add to the HTML and may duplicate a separately downloaded stylesheet. It is useful when it removes a real rendering delay, rather than simply moving every style rule into the document.
Find the rules the viewport needs
Inspect the first screen at representative desktop and mobile widths. Identify its header, navigation, main heading, image and controls, then check which layout, typography and component rules they require.
A product page and a category listing may need different rules. Hidden menus, responsive breakpoints and font fallbacks can introduce dependencies that a desktop screenshot misses.
Test the extracted styles
Keep the complete stylesheet available for the rest of the page. In a test browser, deliberately delay it and inspect the initial screen for unstyled elements, missing layout rules and unreadable controls. Check the fallback if any JavaScript-based loading mechanism fails.
Compare cold and repeat visits. An improvement on a first visit can be offset by duplicated CSS or lost caching benefits. Use the request waterfall and rendering trace to see whether the change removes the original delay.
Keep it in step with the design
Recheck the extraction after a font, component or breakpoint change. Stale critical CSS can cause a flash of incorrect styles or a shift when the full stylesheet arrives.
There is no universal byte budget that makes an extraction correct. The useful result is a promptly rendered, stable first screen with the remaining styles loaded reliably.