critical
Extract & Inline Critical-path CSS in HTML pages
Critical MCP server enables AI agents to optimize web pages by extracting and inlining above-the-fold CSS to improve Largest Contentful Paint and first render performance. It exposes the critical CSS extraction engine through the Model Context Protocol, allowing agents to receive structured reports about render-blocking CSS removal. The server operates in stdio mode and requires the @modelcontextprotocol/sdk peer dependency, taking HTML sources and CSS inputs to return optimized output with performance diagnostics.
Key Features
Use Cases
- 01AI agents optimizing static site generator output by inlining critical CSS and deferring render-blocking stylesheets
- 02Automated build pipeline optimization where agents analyze and improve web performance metrics
- 03Single-page application shell optimization using browser rendering to measure actual above-the-fold content
- 04CI/CD workflows where agents generate performance reports with quantified Largest Contentful Paint improvements
- 05Multi-page application optimization across entire build directories with structured diagnostic output
- 06Content Security Policy compliant CSS optimization for security-conscious web applications
Related MCP Servers
View moremarkitdown
Python tool for converting files and office documents to Markdown.
firecrawl
The context API to search, scrape, and interact with the web at scale. 🔥
prompts.chat
f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.
langflow
Langflow is a powerful tool for building and deploying AI-powered agents and workflows.
critical — FAQ
What is the Critical MCP server?+
The Critical MCP server is a Model Context Protocol implementation that exposes critical CSS extraction and optimization as a tool for AI agents. It allows agents to analyze HTML pages, extract above-the-fold CSS, inline it, and defer render-blocking stylesheets while receiving structured performance reports.
How do I install and run the Critical MCP server?+
First install critical via npm install --save-dev critical, then install the optional MCP SDK peer dependency with npm install @modelcontextprotocol/sdk. Run the MCP server using node src/mcp.js for stdio transport, or import createServer from critical/mcp programmatically.
Which AI clients work with this MCP server?+
This MCP server works with any MCP-compatible client that supports stdio transport and can invoke tools through the Model Context Protocol, including Claude Desktop and other MCP-enabled AI assistants.
Do I need API keys or a browser for the Critical MCP server?+
No API keys are required. The static engine needs no browser and runs with just Node.js ≥ 22.13. The render engine optionally requires Playwright and Chromium (npm i -D playwright && npx playwright install chromium) for viewport-accurate measurements of single-page applications.
Is the Critical MCP server free to use?+
Yes, Critical is open source and released under the Apache-2.0 license, free for both personal and commercial use.
What does the optimize_critical_css tool return?+
The tool returns three structured outputs: the critical CSS extracted, the rewritten HTML with inlined styles and deferred sheets, and a detailed report containing engine selection reasoning, bytes saved, rule counts, warnings, and timing data.
How do I install critical?+
Open the source repository on GitHub and follow its README. critical is a mcp server — MCP Agents Market links you directly to the official repo.
Is critical free?+
critical is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.