Why it matters
Every stylesheet in the head blocks rendering: the browser shows nothing until it has downloaded and parsed all of them, even though the first screen needs a fraction of the rules. Inlining that fraction, the critical CSS, and loading the rest without blocking can take a whole round trip off First Contentful Paint on mobile. Tools that do this usually need Node and a headless browser in your build.
This extractor renders your page in a sandboxed frame at a phone size, a desktop size or both, finds every element visible in the first viewport, and keeps each style rule that matches one of them, evaluated by the browser itself, inside its @media, @supports and @layer wrappers. Rules for states such as :hover count when the element is on screen, @layer statements are kept so the order doesn't change, and @font-face and @keyframes are kept only when a critical rule uses them. You get the critical CSS, the deferred remainder, a head snippet that inlines one and loads the other without blocking, and the sizes compared with the roughly 14 KB that fits in the first round trip.
How it works
- InputYour page's HTML and full stylesheet
- In your browserRendered at phone and desktop widths; rules that paint above the fold kept
- OutputInline critical CSS, the deferred rest and the loading snippet
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Rule | 390×844 | 1350×940 |
|---|---|---|
| @layer base, components; | Critical | Critical |
| @font-face | Critical | Critical |
| @font-face | Critical | Critical |
| @layer base › html | Critical | Critical |
| @layer base › body | Critical | Critical |
| @layer base › h1, h2 | Critical | Critical |
| @layer base › img | Deferred | Deferred |
| @layer components › .site-header | Critical | Critical |
| @layer components › .nav | Deferred | Critical |
| @layer components › .menu-toggle | Critical | Deferred |
| @layer components › .hero | Critical | Critical |
| @layer components › .btn | Critical | Critical |
| @layer components › .features | Critical | Critical |
| @layer components › .grid | Critical | Critical |
| @layer components › .feature | Critical | Critical |
| @layer components › .reviews | Deferred | Deferred |
| @layer components › .quote | Deferred | Deferred |
| @layer components › .newsletter | Deferred | Deferred |
| @layer components › .newsletter input | Deferred | Deferred |
| @layer components › .site-footer | Deferred | Deferred |
| @media (max-width: 600px) › .nav | Deferred | Deferred |
| @media (max-width: 600px) › .menu-toggle | Critical | Deferred |
| @media (max-width: 600px) › .hero | Critical | Deferred |
| @media print › .site-header, .site-footer | Deferred | Deferred |
| @keyframes rise | Critical | Critical |
| @keyframes spin | Not animated above the fold | Not animated above the fold |
How to use it
- Paste the page's HTML and its stylesheet.
- Choose phone, desktop or both.
- Check the preview and the rules kept.
- Copy the critical CSS, the deferred CSS and the head snippet.
FAQ
What is critical CSS?
The CSS needed to render what's visible before scrolling. Inlined in the head, it lets the browser paint the first screen without waiting for the full stylesheet.
Why 14 KB?
A new connection can send about ten TCP packets, roughly 14 KB, before waiting for an acknowledgement. HTML plus inlined CSS under that size arrives in the first round trip.
Why both phone and desktop?
Different layouts show different things above the fold. The union covers both, so neither flashes unstyled content when the rest loads.
Is the onload trick safe with a strict CSP?
The snippet's onload attribute is inline script, which a strict Content Security Policy blocks. Use a small external script to switch the stylesheet's media to all, or a hash.
What can it miss?
Content added by scripts after load, such as an open menu or a cookie banner, isn't in the preview. Add its HTML to the page you paste if it shows on the first screen.
