Why CSS Blocks Rendering

Before a browser can paint a page, it must fetch and parse all linked CSS. That makes stylesheets a render-blocking resource: on slow networks or with large files, those requests directly delay the first visible content. The fix is to separate the styles needed for the initial viewport from the rest.

Critical CSS is the practice of extracting the styles required to render above-the-fold content and inlining them directly in the <head> of the HTML document. This removes the extra network roundtrip for those styles. The remaining, non-critical CSS can then be loaded asynchronously.

The payoff is most visible under poor network conditions, where high latency hurts more than bandwidth. If your Lighthouse audit shows an “Eliminate render-blocking resources” opportunity and your First Contentful Paint (FCP) is weak, this is a technique worth trying. As a general target, aim to keep the above-the-fold CSS under 14 KB compressed to minimize roundtrips before first render. Sites with larger stylesheets stand to gain the most from inlining.

Automated Tools for Extraction

Manually determining the critical CSS means walking the entire DOM to find which rules apply to visible elements—a tedious and error-prone job. Fortunately, several tools automate the process.

Critical

Critical extracts, minifies, and inlines above-the-fold CSS in one step. It is available as an npm module and integrates with Gulp directly, via a Grunt plugin, or through a webpack plugin. It detects stylesheets automatically, so you don’t have to specify them, and it can generate critical CSS for multiple screen resolutions.

CriticalCSS

CriticalCSS is another npm module with a CLI wrapper. It focuses on extraction only—no inlining or minification—but makes up for that with finer control. You can force-include rules that aren’t strictly critical and decide granularly whether @font-face declarations are included.

Penthouse

Penthouse suits sites with heavy or dynamically injected styles, which are common in Angular applications. It relies on Puppeteer internally and is also available as an online hosted tool. Unlike Critical, it requires you to specify the HTML and CSS input files, but it handles many jobs in parallel efficiently.