Lighthouse MCP Server

🚀 Lighthouse MCP Server

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

🚀 快速开始

安装要求

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

安装方法

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

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

在VS Code中安装

你可以通过以下链接安装：

• VS Code
• VS Code Insiders

也可以通过VS Code CLI手动安装：

# 对于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中安装

你可以点击以下链接安装： Install MCP Server

也可以手动安装： 前往Cursor Settings → MCP → Add new MCP Server，将其命名为 "lighthouse"，使用command类型，命令为 npx @danielsogl/lighthouse-mcp@latest：

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

在Windsurf中安装

你可以通过以下链接安装：

也可以手动安装： 遵循Windsurf MCP 文档，使用以下配置：

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

在Claude Desktop中安装

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

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

✨ 主要特性

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

🔧 可用工具

🏁 审计工具

⚡ 性能工具

🔍 分析工具

🔒 安全工具

💬 可用提示

Lighthouse MCP服务器包含可重复使用的提示，帮助大语言模型提供结构化分析和建议：

📊 分析提示

📚 可用资源

Lighthouse MCP服务器提供内置参考资源，包含网页性能、无障碍访问、SEO和安全的基本指南和最佳实践：

🎯 策略提示

🔧 提示参数详情

• 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"]）

💻 使用示例

基础用法

基本性能审计

// 获取整体性能得分
{
  "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"
  }
}

使用提示进行分析

// 分析审计结果并提供针对性建议
{
  "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"
  }
}

🎯 使用场景

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

🔧 技术细节

服务器使用以下技术构建：

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

🤝 贡献

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

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

📄 许可证

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

🔒 安全

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

📞 支持

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

🙏 致谢

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

由 Daniel Sogl 用心打造 ❤️