// the find
addyosmani/critical
Extract & Inline Critical-path CSS in HTML pages
critical extracts the CSS needed for the first paint of an HTML page, inlines it in the head, and defers the rest — the classic critical-path CSS optimization for LCP. It's aimed at anyone with a static/SSR build pipeline or an SPA shell who wants this done in CI without hand-tuning penthouse-style tools, and it now ships an MCP server so agents can call it as a tool.
The auto engine routing is the actual design win here — it sniffs whether the delivered HTML has real content and only pulls in Playwright when it's dealing with an empty SPA shell, so the common SSR/MPA case stays fast and dependency-free. Runtime deps are genuinely minimal (lightningcss, linkedom, css-tree), with playwright and the MCP SDK as lazy optional peers rather than baked-in weight. The deferral strategy (preload + moved-to-body stylesheet, no inline handlers) means it doesn't fight a strict CSP, and the structured `report` object with `savedBlocking` bytes and a `reason` string makes it usable in CI without eyeballing diffs. Deterministic byte-identical output is a real claim worth having for something you'd diff in version control.
Requires Node >=22.13, which is a recent enough floor that it'll be a blocker in plenty of existing CI images and Docker bases without an upgrade. There's no mention of any caching or incremental mode — every run reprocesses the whole document/CSS from scratch, which matters once you're running this across a large multi-page build on every deploy. The static engine's used-CSS matching is inherently a snapshot of one DOM state; anything that changes class names post-hydration (common in React/Vue apps that do client-side conditional rendering even in an SSR shell) isn't accounted for, and the README doesn't discuss that failure mode. The render engine's viewport-union approach for `dimensions` is a blunt instrument for responsive layouts — two viewports won't catch content that's critical only between those breakpoints.