What does Critical CSS mean and how is it implemented?

Critical CSS is the minimum set of CSS rules needed to correctly render the immediately visible area of a page (above the fold). Normally the browser must first download and process the complete external CSS file before it is even allowed to draw anything, which blocks rendering. If the critical CSS is instead embedded inline directly in the HTML, the browser can render the visible area right away.

The remaining, not immediately needed CSS is then loaded asynchronously. This is done through automated extraction: specialized tools analyze which rules the visible area actually requires for different screen sizes. The result is a significantly faster First Contentful Paint and usually a better LCP too. This technique is part of our frontend optimization and is particularly worthwhile with large CSS frameworks.