ACHI
SYSTEMS
Critical CSS extraction tools automate the process of isolating the CSS rules needed to render the “above‑the‑fold” portion of a page, then inlining them into the HTML <head> so the browser can paint the visible content without waiting for full stylesheets to download. These tools typically render the page in a headless browser, inspect which styles apply in the viewport, and output a minimal critical CSS block, often with options to minify, inline, or defer the rest of the CSS. Below is a short overview of such tools, followed by a table‑style list and a brief write‑up for each, with links to where you can download or access them.
Overview of critical CSS tools
Critical‑CSS tools are usually either build‑time Node.js modules, Webpack plugins, or SaaS generators that take a URL and return the minimal style rules for above‑the‑fold content. They help eliminate render‑blocking stylesheets, which can significantly improve Largest Contentful Paint (LCP) and other Core Web Vitals, especially on shared‑hosting or CMS‑based sites where CSS is bundled in large files. Many of these tools support multiple viewport sizes, custom delays for JavaScript‑driven content, and can be integrated into Gulp, Grunt, Webpack, or CI/CD pipelines.
Below is a numbered roundup of the most‑used or recommended critical‑CSS extraction tools, with each plugin name as a linked subheading pointing to its download or homepage.
Top critical CSS extraction tools
1. Critical
Critical is arguably the most well‑known Node.js module for critical‑CSS extraction. It automatically detects your page’s stylesheets, renders the page in a headless browser, and outputs the minimal CSS needed for above‑the‑fold content, optionally minifying and inlining it directly into the HTML. It integrates with Gulp, Grunt, and Webpack, making it suitable for both static‑site generators and larger frameworks.
2. Penthouse
Penthouse focuses on generating critical CSS by running pages in a headless Chrome (or Puppeteer) environment. You feed it a URL and a target viewport, then it returns a CSS block covering only the styles that affect the visible portion, which you can then inline or bundle as critical. It’s often used as a building block for more complex tooling or as a standalone step in build pipelines.
3. Critters
Critters is a Webpack plugin maintained by Google Chrome Labs that inlines critical CSS at build time and defers the rest by injecting a <link rel="preload"> or async‑loading script. It’s designed for modern Webpack‑based setups where you want to keep CSS splitting and code‑splitting while still optimizing above‑the‑fold rendering.
4. Critical CSS
This tool is a more low‑level Node.js module that extracts critical CSS rules without handling inlining or minification by default. It gives you fine‑grained control, such as forcing inclusion of certain selectors or @font‑face declarations that might not be strictly above‑the‑fold but are important for perceived performance.
5. Critical CSS Generator (CSS‑Tricks)
This is an example generator built around PhantomJS that demonstrates how to automate critical‑CSS extraction from a URL. While not as actively maintained as other tools, it illustrates the underlying workflow that many modern tools now replicate using Puppeteer or headless Chrome.
6. Critical CSS Generator – SEOjuice
This is an online SaaS tool that lets you point to any URL and quickly generate the minimal CSS needed for above‑the‑fold rendering. It analyzes all linked stylesheets, identifies visible elements in the viewport, and returns a compact critical CSS block you can paste into your <head>.
7. Critical CSS Generator – Kigo Studio
Kigo Studio’s generator runs a headless browser to load your page, simulate target viewports, and extract only the CSS that styles what appears above the fold. You can customize viewport size, delay after page load, and how JavaScript is handled, which helps when dealing with dynamic content that only appears after a script runs.
8. Critical CSS Generator – CriticalCSSGenerator.com
This service positions itself as a performance‑focused critical‑CSS extractor for SEO and Core Web Vitals. It offers plans with different hourly limits, supports multiple viewport simulations, and outputs minified, ready‑to‑inline CSS that you can plug into your CMS or static site.
9. Minimal CSS
Minimal CSS is essentially a helper script that accompanies Penthouse to demonstrate how to derive the smallest possible CSS for a rendered page. It’s useful if you want to understand or tweak the extraction logic rather than use an opinionated high‑level tool.
10. dr‑css‑inliner
This PhantomJS‑based script is part of the “critical‑path‑CSS‑tools” collection maintained by Addy Osmani. It reads your page, inlines the above‑the‑fold CSS into the HTML, and optionally moves the remaining styles to the footer, simplifying the workflow for small‑scale or proof‑of‑concept projects.
If you’d like, the next step can be tailored recommendations for pairing some of these tools with WordPress, Laravel, or Jekyll–style setups, including how to automate extraction per page or route.
