Speed & Assets
Critical CSS Extractor
Paste your HTML and full stylesheet — get back only the CSS those elements actually use. Perfect for building above-the-fold critical CSS to inline, or stripping dead styles. See exactly how many bytes you save, all computed locally in your browser.
Loading tool…
Need reliable hosting, a domain, or a hand setting this up?
Get a free quote →About the Critical CSS Extractor
The Critical CSS Extractor compares your page's HTML against your full stylesheet and keeps only the rules that actually match an element, producing a small, focused CSS file you can inline for a faster first paint. Most WordPress and template-based sites load hundreds of kilobytes of CSS on every page while the visible content uses only a fraction of it; render-blocking stylesheets like that delay First Contentful Paint and hurt your Core Web Vitals scores. Paste your above-the-fold HTML and your CSS, choose whether to keep @font-face, @keyframes and :root variables, and copy or download the extracted critical.css.
This free tool by Hosting Cambodia runs entirely in your browser: the HTML is parsed with the browser's own engine, each selector is tested against it, and pseudo-class variants like :hover are kept whenever their base selector matches. It is honest about its limits — it analyses the HTML you provide rather than rendering the live page, so classes that JavaScript adds later must already be present in what you paste. Used well, inlining critical CSS is one of the highest-impact page-speed optimisations available.
Frequently asked questions
What is critical CSS and why does it matter for page speed?
Critical CSS is the minimal set of styles needed to render the visible, above-the-fold part of a page. Inlining it in a <style> tag lets the browser paint content immediately instead of waiting for the full stylesheet to download, improving First Contentful Paint and Largest Contentful Paint.
Will it catch classes that JavaScript adds after the page loads?
Only if they appear in the HTML you paste. The tool matches selectors against your provided markup without executing scripts, so if a slider or menu injects classes at runtime, paste the rendered HTML from your browser's inspector rather than the raw source.
Should I still load my full stylesheet afterwards?
Yes. Inline the extracted critical CSS in the <head> for instant rendering, then load the complete stylesheet asynchronously (for example with media="print" onload swapping) so the rest of the page and interactive states remain fully styled.
Explore the full free web tools toolbox by Hosting Cambodia.