Critical is a tool that extracts and inlines above-the-fold CSS to eliminate render-blocking stylesheets and improve first paint performance.
The tool solves the problem of render-blocking CSS delaying first paint by identifying which styles are needed to paint content above the fold, inlining those rules into a style tag in the document head, and deferring the remaining stylesheets to load asynchronously after first paint. It works by either matching CSS rules against the delivered DOM for static content or by rendering the page in a real browser viewport to measure what actually paints above the fold. The output is deterministic, producing byte-identical results from the same input, making it safe for CI pipelines and version control.
The tool suits static site generators, server-rendered applications, multi-page applications, and single-page apps. It offers both a CLI and a programmatic API that returns results without writing to disk automatically. The automatic engine selection chooses between a fast static analysis mode for pre-rendered markup and a browser-based rendering mode for application shells, though either can be pinned explicitly. Unlike approaches that add inline scripts, Critical achieves its goal without violating strict Content Security Policies.
Development activity shows consistent engagement with the codebase through regular commits and updates to core functionality. The project maintains active issue triage and responds to user feedback. Documentation is comprehensive and kept current with examples and recipes for common use cases. The tool has been extended with an MCP server interface to support integration with coding agents, indicating ongoing evolution beyond traditional build pipeline usage.
