金大哥 - lighthouse-mcp-server MCP 详情

article

README

🚀 Lighthouse MCP Server

Lighthouse MCP Server 是一个基于 Google Lighthouse 的模型上下文协议（MCP）服务器，它提供全面的网页性能审计和分析功能。该服务器能让大语言模型（LLMs）和 AI 代理对网站进行详细的性能评估、可访问性审计、SEO 分析、安全检查以及核心网页指标（Core Web Vitals）监测。

🚀 快速开始

使用你喜欢的客户端安装 Lighthouse MCP 服务器，可参考以下配置之一：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

在 VS Code 中安装

手动在 VS Code 中安装

你也可以使用 VS Code 命令行界面安装 Lighthouse MCP 服务器：

# 对于 VS Code
code --add-mcp '{"name":"lighthouse","command":"npx","args":["-y","@danielsogl/lighthouse-mcp@latest"]}'

# 对于 VS Code Insiders
code-insiders --add-mcp '{"name":"lighthouse","command":"npx","args":["-y","@danielsogl/lighthouse-mcp@latest"]}'

安装完成后，Lighthouse MCP 服务器即可在 VS Code 中与你的 GitHub Copilot 代理一起使用。

在 Cursor 中安装

手动在 Cursor 中安装

转到 Cursor 设置 → MCP → 添加新的 MCP 服务器。将其命名为 "lighthouse"，使用 命令 类型并输入命令 npx @danielsogl/lighthouse-mcp@latest：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

在 Windsurf 中安装

手动在 Windsurf 中安装

遵循 Windsurf MCP 文档。使用以下配置：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

在 Claude Desktop 中安装

在 Claude Desktop 中安装

遵循 MCP 安装指南，使用以下配置：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

✨ 主要特性

🚀 性能分析：完成 Lighthouse 审计，包含核心网页指标、性能得分和优化建议
♿ 可访问性审计：进行 WCAG 合规性检查和可访问性得分分析
🔍 SEO 分析：进行搜索引擎优化审计并提供最佳实践建议
🔒 安全评估：进行 HTTPS、CSP 和安全漏洞扫描
📊 资源分析：发现 JavaScript、CSS、图像和字体的优化机会
📱 移动与桌面对比：跨设备进行对比分析，支持节流选项
⚡ 核心网页指标：监测 LCP、FID、CLS 并进行阈值检查
🎯 性能预算：自定义性能阈值和预算监测
📚 参考资源：内置网页性能、可访问性、SEO 和安全的指南和最佳实践

📦 安装指南

要求

Node.js 22.0.0 或更高版本
Chrome/Chromium 浏览器（由 Lighthouse 自动管理）
VS Code、Cursor、Windsurf、Claude Desktop 或其他 MCP 客户端

💻 使用示例

基础用法

基本性能审计

// 获取整体性能得分
{
  "tool": "get_performance_score",
  "arguments": {
    "url": "https://example.com",
    "device": "mobile"
  }
}

核心网页指标分析

// 使用自定义阈值检查核心网页指标
{
  "tool": "get_core_web_vitals",
  "arguments": {
    "url": "https://example.com",
    "device": "mobile",
    "includeDetails": true,
    "threshold": {
      "lcp": 2.5,
      "fid": 100,
      "cls": 0.1
    }
  }
}

安全评估

// 全面的安全审计
{
  "tool": "get_security_audit",
  "arguments": {
    "url": "https://example.com",
    "checks": ["https", "csp", "hsts"]
  }
}

资源优化

// 查找优化机会
{
  "tool": "analyze_resources",
  "arguments": {
    "url": "https://example.com",
    "resourceTypes": ["images", "javascript"],
    "minSize": 1024
  }
}

使用参考资源

// 获取核心网页指标阈值
{
  "resource": {
    "uri": "lighthouse://performance/core-web-vitals-thresholds"
  }
}

// 访问 WCAG 可访问性指南
{
  "resource": {
    "uri": "lighthouse://accessibility/wcag-guidelines"
  }
}

// 获取特定框架的优化指南
{
  "resource": {
    "uri": "lighthouse://frameworks/optimization-guides"
  }
}

使用提示进行分析

// 分析 Lighthouse 审计结果
{
  "prompt": "analyze-audit-results",
  "arguments": {
    "auditResults": "{...lighthouse audit json...}",
    "focusArea": "performance"
  }
}

// 创建性能改进计划
{
  "prompt": "create-performance-plan",
  "arguments": {
    "currentMetrics": "{...current performance metrics...}",
    "targetGoals": "Achieve 90+ performance score and sub-2s LCP",
    "timeframe": "3 months"
  }
}

// 比较前后审计结果
{
  "prompt": "compare-audits",
  "arguments": {
    "beforeAudit": "{...before audit results...}",
    "afterAudit": "{...after audit results...}",
    "changesImplemented": "Implemented lazy loading and image optimization"
  }
}

📚 详细文档

可用工具

🏁 审计工具

| 工具 | 描述 | 参数 | | ---- | ---- | ---- | | run_audit | 运行全面的 Lighthouse 审计 | url, categories?, device?, throttling? | | get_accessibility_score | 获取可访问性得分和建议 | url, device?, includeDetails? | | get_seo_analysis | 获取 SEO 分析和建议 | url, device?, includeDetails? | | check_pwa_readiness | 检查渐进式 Web 应用的就绪情况 | url, device?, includeDetails? |

⚡ 性能工具

| 工具 | 描述 | 参数 | | ---- | ---- | ---- | | get_performance_score | 获取整体性能得分 | url, device? | | get_core_web_vitals | 获取核心网页指标 | url, device?, includeDetails?, threshold? | | compare_mobile_desktop | 比较不同设备的性能 | url, categories?, throttling?, includeDetails? | | check_performance_budget | 检查是否符合性能预算 | url, device?, budget | | get_lcp_opportunities | 查找 LCP 优化机会 | url, device?, includeDetails?, threshold? |

🔍 分析工具

| 工具 | 描述 | 参数 | | ---- | ---- | ---- | | find_unused_javascript | 查找未使用的 JavaScript 代码 | url, device?, minBytes?, includeSourceMaps? | | analyze_resources | 分析网站的所有资源 | url, device?, resourceTypes?, minSize? |

🔒 安全工具

| 工具 | 描述 | 参数 | | ---- | ---- | ---- | | get_security_audit | 进行全面的安全审计 | url, device?, checks? |

可用提示

📊 分析提示

| 提示 | 描述 | 参数 | | ---- | ---- | ---- | | analyze-audit-results | 分析 Lighthouse 审计结果 | auditResults, focusArea? | | compare-audits | 比较前后审计结果 | beforeAudit, afterAudit, changesImplemented? | | optimize-core-web-vitals | 获取核心网页指标优化建议 | coreWebVitals, framework?, constraints? | | optimize-resources | 获取资源优化建议 | resourceAnalysis, loadingStrategy?, criticalUserJourneys? |

📚 可用资源

| 资源 | 描述 | URI | | ---- | ---- | ---- | | core-web-vitals-thresholds | 核心网页指标性能阈值 | lighthouse://performance/core-web-vitals-thresholds | | optimization-techniques | 性能优化技术和影响 | lighthouse://performance/optimization-techniques | | wcag-guidelines | WCAG 2.1 可访问性指南和问题 | lighthouse://accessibility/wcag-guidelines | | seo-best-practices | SEO 最佳实践和优化机会 | lighthouse://seo/best-practices | | security-best-practices | 网页安全最佳实践和漏洞 | lighthouse://security/best-practices | | budget-guidelines | 按网站类型提供的性能预算建议 | lighthouse://performance/budget-guidelines | | categories-scoring | Lighthouse 审计类别和评分方法 | lighthouse://audits/categories-scoring | | framework-guides | 特定框架的优化指南 | lighthouse://frameworks/optimization-guides |

🎯 策略提示

| 提示 | 描述 | 参数 | | ---- | ---- | ---- | | create-performance-plan | 生成全面的性能改进计划 | currentMetrics, targetGoals?, timeframe? | | create-performance-budget | 创建自定义性能预算建议 | currentMetrics, businessGoals?, userBase? | | seo-recommendations | 生成 SEO 改进建议 | seoAudit, websiteType?, targetAudience? | | accessibility-guide | 创建可访问性改进指南 | accessibilityAudit, complianceLevel?, userGroups? |

提示参数详情

auditResults：来自 Lighthouse 工具的 JSON 审计结果
focusArea：关注的特定类别（"performance", "accessibility", "seo", "best-practices", "pwa"）
beforeAudit / afterAudit：更改前后的 Lighthouse 审计结果
changesImplemented：审计之间所做更改的描述
currentMetrics：审计中的当前性能指标
targetGoals：特定的性能目标或业务目标
timeframe：实施改进的时间线
framework：前端框架或技术栈
constraints：技术或业务限制
websiteType：网站类型（如电子商务、博客、企业网站）
targetAudience：目标受众或市场信息
complianceLevel：WCAG 合规级别（"AA" 或 "AAA"）
userGroups：可访问性方面需考虑的特定用户群体

参数详情

通用参数

url（必需）：要分析的网站 URL
device：目标设备（"desktop" 或 "mobile"，默认："desktop"）
includeDetails：是否包含详细审计信息（默认：false）
throttling：是否启用网络/CPU 节流（默认：false）

特定参数

categories：要审计的 Lighthouse 类别（["performance", "accessibility", "best-practices", "seo", "pwa"]）
threshold：指标的自定义阈值（如 {"lcp": 2.5, "fid": 100, "cls": 0.1}）
budget：性能预算限制（如 {"performanceScore": 90, "largestContentfulPaint": 2500}）
resourceTypes：要分析的资源类型（["images", "javascript", "css", "fonts", "other"]）
minBytes：分析的最小文件大小阈值（默认：2048）
checks：要执行的安全检查（["https", "mixed-content", "csp", "hsts", "vulnerabilities"]）

🔧 技术细节

架构

该服务器基于以下技术构建：

Model Context Protocol SDK：用于 MCP 服务器实现
Google Lighthouse：用于网页性能审计
Chrome Launcher：用于浏览器自动化
TypeScript：提供类型安全和更好的开发体验
Zod：用于运行时模式验证

📐 使用场景

性能监测：自动进行性能跟踪和核心网页指标监测
可访问性合规：进行 WCAG 2.1 合规性检查和修复指导
SEO 优化：进行技术 SEO 审计和搜索引擎优化建议
安全评估：进行漏洞扫描和安全最佳实践验证
资源优化：进行捆绑分析和优化机会识别
性能预算：自动进行性能预算监测和警报
CI/CD 集成：自动设置质量门限和检测性能回归

🤝 贡献

欢迎贡献代码！请阅读我们的贡献指南了解以下详细信息：

代码风格和标准
测试要求
拉取请求流程
开发设置

📄 许可证

本项目采用 MIT 许可证 - 详情请参阅 LICENSE 文件。

🔒 安全

有关安全问题，请参阅我们的安全策略。

📞 支持

🐛 Bug 报告：GitHub Issues
💬 讨论：GitHub 讨论
📧 邮箱：security@codingrules.ai

🙏 致谢

Google Lighthouse 团队提供了出色的审计引擎
Anthropic 提供了模型上下文协议规范
开源社区提供了持续的灵感和贡献

由 Daniel Sogl 用心打造 ❤️