Give it a page and it returns the styles your first paint needs, with a report of exactly what it kept, what it dropped, and what it could not read. Relative image paths are rewritten so they still work once inlined, and unused custom properties are left behind instead of shipped.
A stylesheet in the document’s head stops the browser painting anything until it has been fetched and parsed. Critical CSS is the small subset of rules the first screen genuinely needs, inlined so the first paint does not wait on a network round trip. The full stylesheet still loads — just off the critical path.
No, and treating it that way is the usual way this goes wrong. The inlined subset covers the first screen only; everything below it still comes from your real stylesheet. The snippet we hand you keeps that stylesheet, loads it without blocking, and includes a <noscript> copy so a visitor without JavaScript still gets a styled page.
We do not run one, and we say so rather than implying we measured geometry. We keep the rules that the first elements in document order depend on, with an adjustable budget for how far down that goes. Where a selector cannot be evaluated with certainty we keep the rule, because shipping a few bytes too many is a smaller mistake than shipping a visitor an unstyled hero.
Because a breakpoint that cannot apply at the size you asked for is dead weight in the payload. A (min-width: 48rem) block cannot apply on a 390-pixel phone, so it is left out. Conditions we cannot evaluate — prefers-color-scheme, for instance, which belongs to a visitor we have never met — are kept, since dropping them would leave dark-mode visitors unstyled.
Because a url() inside a stylesheet resolves against that stylesheet, and an inlined copy resolves against the document instead. A tool that copies url(img/sprite.svg) into your head verbatim hands you a 404. We rewrite every relative URL against the stylesheet that declared it, which is the single most common defect in generated critical CSS.
Because a design system can declare several hundred custom properties and your first screen may read fifteen of them. We follow the references, including variables defined in terms of other variables, and drop the rest. The report tells you how many were declared, how many survived, and how many went.
Inline it in the head, before anything else that can block, and move the full stylesheet to the non-blocking form in the snippet. Regenerate when the template above the fold changes — a new hero, a new header, a redesign. It does not need regenerating when you edit the content inside an existing template, because the rules that match have not changed.
The copy on this page is yours and has no expiry. The shareable link we store on our side does: it is deleted on a clock, by a scheduled sweep, by a check on every read, and by a cap on how many we hold at once. We built it that way on purpose — a generated file that nothing ever deletes is a file that sits on a disk forever, and somebody pays for that disk.
Inlining critical CSS is supposed to move Largest Contentful Paint, and the only honest way to know is to look at real visitors a few weeks later. Our Core Web Vitals checker reads Chrome’s field data for your site and can pull the weekly history, so you can see the change as a trend rather than guessing from a single lab run.
Before you ship it, load the page with the inlined styles and nothing else and look at the first screen. Anything that appears unstyled is a rule we did not keep — add its selector to the always-include field and generate again.