Lighthouse MCP Server

🚀 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
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"]}'

在 Cursor 中安装

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

在 Windsurf 中安装

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

在 Claude Desktop 中安装

{
  "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"
  }
}

📚 详细文档

可用工具

🏁 审计工具

⚡ 性能工具

🔍 分析工具

🔒 安全工具

可用提示

📊 分析提示

📚 可用资源

🎯 策略提示

提示参数详情

• 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 用心打造 ❤️