⚡
Critical CSS
Extractor
Above‑the‑fold CSS calculator — inline critical styles, defer the rest.
📄
Paste stylesheet & HTML
Full CSS stylesheet
body { margin:0; font-family:sans-serif; background:#fff; } header { background:#333; color:white; padding:1rem; } nav { display:flex; } .hero { min-height:80vh; background:url(hero.jpg); } h1 { font-size:2.5rem; } .footer { color:#666; } .unused { opacity:0; } .card { border:1px solid #ddd; }
HTML content (or viewport context)
<body><header><nav>Home</nav></header><section class="hero"><h1>Above the fold</h1><p>first child</p></section><main><p>main first child</p></main></body>
🔍 Analyze
Reset
Parses selectors & matches above‑the‑fold patterns: body, header, nav, h1, .hero, main first‑child, etc.
📊
Analysis results
Full CSS size
0.8 KB
Critical CSS size
0.5 KB
Potential savings
37%
Render‑blocking
~180ms → ~90ms
✅ Extracted critical CSS (inline ready)
body { margin:0; font-family:sans-serif; } header { background:#333; color:white; } ...
⏳ Deferred CSS (loadCSS pattern)
// loadCSS snippet will appear here
📋 Selector coverage (above‑the‑fold)
body
✅ critical
header
✅ critical
.hero
✅ critical