Extract & Inline Critical-path CSS in HTML pages
10.2k
Stars
386
Forks
41
Open issues
30
Contributors
AI Analysis
Critical extracts and inlines above-the-fold (critical-path) CSS from HTML pages to optimize initial page rendering performance. It's purpose-built for web performance optimization workflows, serving developers and build tools (Webpack, Grunt, Gulp) who need to reduce render-blocking CSS. Not a general-purpose CSS tool—it solves a specific performance bottleneck in web applications.
Inferred from signals mentioned in the README (tests, CI, type safety) — not a review of the actual code.
AI's overall editorial judgment — not an average of the bars above, can weigh other factors too.
Critical automates above-the-fold CSS extraction and inlining to improve perceived page load performance
Critical solves a specific web performance problem: identifying which CSS rules are needed to render the visible viewport on first paint, extracting them, and inlining them directly into HTML. This eliminates render-blocking stylesheet requests. It targets frontend engineers and build pipeline authors who need to optimize Time-to-First-Paint without manually curating CSS. With 10k+ stars and build tool integrations for Grunt, Webpack, and Gulp, it has established presence in performance-focused web workflows. Maintained by Addy Osmani (Google Chrome team), the project carries credibility in the web performance community.
Created in June 2014 when Google's web performance guidance around critical rendering path CSS was gaining traction. It operationalized concepts from Osmani's performance writing into an automated build tool, maturing through multiple major versions over 12 years.
Growth was driven by Google's increasing emphasis on Core Web Vitals and Lighthouse scores, which penalize render-blocking CSS. The tool gained traction as teams sought automated solutions to pass performance audits. Growth has plateaued at a slow rate (4 stars/week) consistent with a mature, stable utility rather than an expanding ecosystem — expected for a tool that does one thing and has largely achieved feature completeness.
Multiple ecosystem integrations exist (grunt-critical, html-critical-webpack-plugin) suggesting real production use. Demo repositories are public and maintained. The 10k+ stars and 384 forks from a specialized performance tool indicate meaningful adoption. NPM download counts are not available in the provided metadata, but the integration ecosystem implies production deployment. Adoption not independently verified at scale beyond these signals.
Appears to use a headless browser (likely Puppeteer or similar) to render pages at specified viewport dimensions, detect above-the-fold elements, then extract corresponding CSS rules. Likely uses PostCSS for CSS parsing and manipulation based on the ignore options accepting PostCSS node callbacks. Supports async/await, Promises, and callbacks, suggesting a modern Node.js architecture.
Coverage badge is present in README (Coveralls integration), indicating automated test coverage tracking exists. Exact percentage not documented in README.
Last push was 2026-06-24, just 3 days before the evaluation date — actively maintained. The project has sustained pushes over 12 years. CI badge present. This is a slow-growth but actively maintained project, not stagnant.
ADOPT IF: you need programmatic, build-pipeline-level critical CSS extraction for static sites, custom Gulp/Grunt/Webpack workflows, or projects not using a framework with built-in critical CSS handling. AVOID IF: you are using a modern framework (Next.js, Angular, Nuxt) that handles critical CSS natively, or if your CSS architecture (CSS-in-JS, utility-first with JIT) makes above-the-fold extraction impractical or unnecessary. MONITOR IF: you depend on it with a headless browser dependency, as Puppeteer API changes or Chromium updates can introduce breakage that requires active maintenance response.
Independent dimensions
Mainstream potential
3/10
Technical importance
7/10
Adoption evidence
6/10
- Tight dependency on headless browser rendering means Chromium/Puppeteer version updates can break functionality — requires ongoing maintenance attention.
- Framework-level critical CSS solutions (Critters in Angular/Next.js) are reducing the addressable market for standalone tools over time.
- Viewport-based heuristics for 'above the fold' are imprecise for dynamic or personalized content, potentially producing suboptimal or incorrect critical CSS.
- Build times increase significantly for large sites because each page requires a browser render pass — may not scale well to sites with hundreds of unique page templates.
- The single-maintainer bus factor (primarily Addy Osmani) is a long-term sustainability concern, though 12 years of continuity partially mitigates this risk.
Likely to remain a stable, niche-but-important tool for non-framework static site and custom build workflows. Slow organic decline in new adoption as framework-native solutions improve, but continued maintenance and use in existing pipelines for several more years.
Explore similar
Newsletter
Get analyses like this every Monday
Free weekly digest of the most interesting open-source discoveries.
Languages
Information
- Language
- JavaScript
- License
- Apache-2.0
- Last updated
- 5d ago
- Created
- 147mo ago
- Analyzed with
- anthropic/claude-haiku-4-5
Stars over time
Contributors over time
Top 100 contributors only — repos with more will plateau at 100.
Open issues
Critical fails with net::ERR_ABORTED at file:///*/*.html when making critical CSS for multiple dimensions.
Dynamically included stylesheets
Error running in vercel (node 22)
TypeError: (0 , debug_1.default) is not a function
Discover problems
Top contributors
Recent releases
Similar repos
| Repository | Stars | Week Δ | Language | Score | Updated |
|---|---|---|---|---|---|
|
addyosmani/critical
this
|
10.2k | +18 | JavaScript | 8/10 | 5d ago |
 FullHuman/purgecss
|
8k | — | TypeScript | 8/10 | 1w ago |
 postcss/postcss
|
29k | — | TypeScript | 9/10 | 2d ago |
Google's own Critters library solves the same problem and is integrated directly into Angular CLI and Next.js build pipelines, giving it significant ecosystem reach. Critical is more flexible for custom build setups but less pre-integrated.
PurgeCSS removes unused CSS globally; Critical specifically targets above-the-fold inlining. They address adjacent but distinct problems and are often used together.
PostCSS is a CSS transformation platform, not a critical CSS extractor. Critical likely uses PostCSS internally. Not a direct competitor — different abstraction level.
Penthouse is the underlying critical CSS generator that Critical wraps. Critical adds HTML inlining, multi-resolution support, and a higher-level API on top of Penthouse.
Modern frameworks increasingly handle critical CSS automatically at the framework level, reducing the need for explicit tooling like Critical in greenfield projects using those frameworks.
