Performance
Critical CSS Generator
Heuristic extract for above-the-fold HTML
Extract
Paste above-the-fold HTML and your full CSS. Rules are kept when selectors likely match elements in that HTML. Complex selectors may need manual review.
About the Critical CSS Generator
A critical CSS generator that extracts a starting set of above-the-fold rules from HTML and CSS you paste in.
How to use the Critical CSS Generator
- Paste the HTML of the page.
- Paste the full CSS.
- Copy the extracted rules into the head, and load the rest of the CSS after.
What to check
The extract is a heuristic. Check the top of the page in a browser before you rely on it.
What is critical CSS?
It is the CSS needed to draw the top of the page, inlined so that part can render before the full stylesheet arrives.
Does this replace my stylesheet?
No. Keep the full stylesheet. The extract only covers the first paint.