web-performance-mcp

web-performance-mcp

Enables web performance analysis using Google PageSpeed Insights and Chrome UX Report APIs, providing compact metrics and diagnostics without local browser automation.

Category
访问服务器

README

web-performance-mcp

MCP server for compact web performance analysis with the official Google APIs:

  • PageSpeed Insights API v5
  • Chrome UX Report API

It does not run Lighthouse locally and does not use Puppeteer, Playwright, Chrome DevTools Protocol, or a local browser.

Quick Start With npx

After the package is published to npm:

npx -y web-performance-mcp

The server reads GOOGLE_API_KEY from the environment. It also loads a .env file from the current working directory, so MCP clients can keep secrets in the project they are analyzing.

Create .env in your project:

GOOGLE_API_KEY=your-google-api-key-here

Codex MCP Configuration

Use npx directly:

[mcp_servers.webPerformance]
command = "npx"
args = ["-y", "web-performance-mcp"]
cwd = "/path/to/project-with-env"
startup_timeout_sec = 30
tool_timeout_sec = 180

cwd should point to the project that contains .env.

You can also pass the key through MCP env config:

[mcp_servers.webPerformance.env]
GOOGLE_API_KEY = "your-google-api-key-here"

Prefer .env or shell environment variables for local use so secrets do not end up in shared config.

Required Google APIs

Create a Google Cloud API key and enable:

  • PageSpeed Insights API
  • Chrome UX Report API

Restrict the API key to only these APIs.

Tools

analyze_pagespeed

Analyze one URL with PageSpeed Insights.

{
  "url": "https://www.example.com/",
  "strategy": "mobile",
  "categories": ["performance"]
}

Returns:

  • performance score;
  • lab metrics: FCP, LCP, Speed Index, TBT, CLS, TTI, TTFB;
  • high-impact audits;
  • compact diagnostics for render-blocking resources, unused JS/CSS, image optimization, and main-thread work;
  • recommendations.

analyze_pagespeed_batch

Analyze up to 10 URLs with concurrency control.

{
  "urls": [
    "https://www.example.com/",
    "https://www.example.com/blog/"
  ],
  "strategy": "mobile",
  "categories": ["performance"],
  "concurrency": 2
}

get_crux_url

Query Chrome UX Report data for a URL.

{
  "url": "https://www.example.com/"
}

Returns LCP, INP, CLS p75 and good/needs improvement/poor distributions when CrUX has enough real-user data.

get_crux_origin

Query Chrome UX Report data for an origin.

{
  "origin": "https://www.example.com"
}

compare_web_performance

Combine PageSpeed and CrUX for several URLs and prioritize likely problems.

{
  "urls": [
    "https://www.example.com/",
    "https://www.example.com/blog/"
  ],
  "strategy": "mobile",
  "categories": ["performance"],
  "concurrency": 2
}

Response Shape

Responses are intentionally compact. The server does not send the raw PageSpeed or CrUX API payload back to the model.

CrUX tools return available: false when Google has no field data for the URL or origin.

API errors are returned as compact MCP errors for timeout, quota, permissions, invalid URLs, and incomplete API responses.

Local Development

corepack enable
pnpm install
cp .env.example .env
pnpm build
pnpm test
pnpm start

Use the local checkout in Codex:

[mcp_servers.webPerformance]
command = "node"
args = ["/Users/teles/dev/web-performance-mcp/dist/index.js"]
cwd = "/path/to/project-with-env"
startup_timeout_sec = 30
tool_timeout_sec = 180

Publishing to npm

The npm package name is:

web-performance-mcp

The name is currently available if npm view web-performance-mcp returns 404 Not Found. During npm publish, however, a 404 Not Found usually means the workflow cannot create or access that package name with the current npm authentication.

One-Time npm Setup

  1. Create or log in to your npm account.
  2. Publish the package once with an npm account that can create unscoped public packages, or configure npm Trusted Publishing for the GitHub repository before the automated release runs.
  3. For Trusted Publishing, configure this package on npmjs.com with:
Provider: GitHub Actions
Organization or user: teles
Repository: web-performance-mcp
Workflow filename: release.yml
Allowed action: npm publish
  1. Keep the GitHub Actions workflow permissions:
permissions:
  contents: write
  id-token: write

Trusted Publishing requires npm CLI 11.5.1+ and Node.js 22.14.0+. The release workflow uses Node 24.

If the release workflow fails while publishing with npm error 404 Not Found - PUT https://registry.npmjs.org/web-performance-mcp, confirm that the package exists under your npm account or that Trusted Publishing is configured for exactly teles/web-performance-mcp and workflow filename release.yml.

Release Flow

This repository uses zero-release.

Commits should follow Conventional Commits:

feat: add new tool
fix: handle CrUX permission errors
docs: improve npx setup

Preview the next release locally:

pnpm release:dry-run

Check release readiness:

pnpm release:doctor

Push to main to publish:

git push origin main

The workflow runs tests, builds the package, updates CHANGELOG.md and package.json, creates a GitHub release, and publishes to npm with the npm plugin.

Manual Publish Fallback

If you do not want to use Trusted Publishing yet:

corepack enable
pnpm install --frozen-lockfile
pnpm test
pnpm build
npm login
npm publish --access public

Use zero-release for normal releases once npm Trusted Publishing is configured.

Security

  • Never commit .env or real credentials.
  • Restrict GOOGLE_API_KEY to PageSpeed Insights API and Chrome UX Report API.
  • The API key is never printed by the server.
  • The server does not execute browser automation.

License

MIT

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选