Lighthouse MCP

Lighthouse MCP服务器

一种模型上下文协议（MCP）服务器，使用Google Lighthouse提供全面的web性能审计和分析功能。该服务器使LLM和AI代理能够执行详细的网站性能评估、可访问性审计、SEO分析、安全检查和核心网络生命监控。

🌟 主要特点

• 🚀 性能分析：完成Lighthouse审核，包括核心Web生命周期、性能评分和优化建议
• ♿ 可访问性审计：WCAG合规性检查和可访问性评分分析
• 🔍 SEO分析：搜索引擎优化审计和最佳实践建议
• 🔒 安全评估：HTTPS、CSP和安全漏洞扫描
• 📊 资源分析：JavaScript、CSS、图像和字体优化机会
• 📱 移动与桌面：具有节流选项的设备之间的比较分析
• ⚡ 核心网页指标：LCP、FID、CLS监测，带阈值检查
• 🎯 绩效预算：自定义性能阈值和预算监控
• 📚 参考资源：针对web性能、可访问性、SEO和安全性的内置指南和最佳实践

🛠️ 需求

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

持久Chrome配置文件（登录会话）

如果您需要经过身份验证的会话，请使用持久的Chrome配置文件启动并运行以下命令：

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

您可以通过以下方式传递额外的Chrome标志 --chrome-flag例如 --chrome-flag=--disable-gpu. 如果标志值以开头 -- 并匹配已知的选项名称，首选 --chrome-flag=... 以避免将其解析为顶级选项。 配置文件模式禁用Lighthouse的存储重置，以便Cookie和本地存储在运行之间保持不变。 如果 --user-data-dir 指向一个缺失的目录，它将被创建并被视为一个新的配置文件。 集 --profile-path 到中显示的配置文件路径 chrome://version （例如。 .../Default). 注意：Chrome的远程调试需要一个非默认的用户数据目录，因此请重用一个专用的配置文件目录，而不是系统默认目录。 你也可以通过 --user-data-dir + --profile-directory 如果你愿意，可以分开。 附上 --chrome-port 单独使用并不能保存存储；包含一个配置文件标志以保持会话。

CLI选项

MCP服务器支持的运行时标志：

• `--profile-path

：使用配置文件路径 chrome://version` （自动导出用户数据目录+配置文件名）

• `--user-data-dir

`：为持久会话重用Chrome配置文件目录

• --profile-directory ：在用户数据目录中选择配置文件
• `--chrome-path

：Chrome/Chromium可执行文件的显式路径（覆盖自动检测；也尊重 CHROME_PATH` 环境变量）

• --chrome-flag 或 --chrome-flag=：传递额外的Chrome标志（可重复）
• `--chrome-port

或 --remote-debugging-port `：附加到启用远程调试的现有Chrome实例

• --headless：强制无头模式
• --no-headless：强制模式

WSL2/自定义Chrome路径

如果拾取了错误的Chrome二进制文件（例如Windows Chrome而不是WSL2上的Linux二进制文件），请显式设置路径：

# Via CLI flag
npx @danielsogl/lighthouse-mcp@latest --chrome-path /usr/bin/google-chrome

# Via environment variable
CHROME_PATH=/usr/bin/google-chrome npx @danielsogl/lighthouse-mcp@latest

在MCP配置中：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest", "--chrome-path", "/usr/bin/google-chrome"]
    }
  }
}

E2E烟雾测试（剖面图）

使用持久配置文件运行真正的审计（使用现有的配置文件目录，必要时登录一次）：

npm run smoke:profile -- --url https://example.com \
  --profile-path "
" \
  --no-headless

E2E烟雾测试（附在现有铬合金上）

在启用远程调试的情况下启动Chrome：

/path/to/GoogleChromeExecutable \
  --remote-debugging-port=9222 \
  --user-data-dir /path/to/chrome-profile

替换 /path/to/GoogleChromeExecutable 使用您平台的Chrome/Chromium二进制路径。

然后将Lighthouse附加到该实例：

npm run smoke:profile -- --url https://example.com --chrome-port 9222

为了在连接时保留存储空间，请传递配置文件路径，以便Lighthouse保留Cookie/本地存储：

npm run smoke:profile -- --url https://example.com \
  --chrome-port 9222 \
  --profile-path "
"

在VS代码中安装

Manual VS Code Installation

您还可以使用VS Code CLI安装Lighthouse MCP服务器：

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

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

安装后，Lighthouse MCP服务器将可用于VS Code中的GitHub Copilot代理。

在游标中安装

Manual Cursor Installation

首选 Cursor Settings → MCP → Add new MCP Server.将其命名为“灯塔”，使用 command 使用命令键入 npx @danielsogl/lighthouse-mcp@latest:

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

安装在Windsurf中

Manual Windsurf Installation

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

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

在Claude桌面中安装

Claude Desktop Installation

遵循MCP安装 引导，使用以下配置：

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

🔧 可用工具

Lighthouse MCP服务器提供以下工具用于全面的web分析：

🏁 审计工具

⚡ 性能工具

🔍 分析工具

🔒 安全工具

💬 可用提示

Lighthouse MCP服务器包括可重复使用的提示，帮助LLM提供结构化分析和建议：

📊 分析提示

📚 可用资源

Lighthouse MCP服务器提供内置参考资源，其中包含基本指南和最佳实践：

🎯 战略提示

🔧 提示参数详细信息

• auditResults：Lighthouse工具的JSON审计结果
• focusArea：要关注的特定类别("performance", "accessibility", "seo", "best-practices", "pwa")
• beforeAudit / afterAudit：变更前后灯塔审计结果
• 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：要审核的灯塔类别(["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"])

💡 用法示例

基本绩效审计

// Get overall performance score
{
  "tool": "get_performance_score",
  "arguments": {
    "url": "https://example.com",
    "device": "mobile"
  }
}

核心网络生命分析

// Check Core Web Vitals with custom thresholds
{
  "tool": "get_core_web_vitals",
  "arguments": {
    "url": "https://example.com",
    "device": "mobile",
    "includeDetails": true,
    "threshold": {
      "lcp": 2.5,
      "fid": 100,
      "cls": 0.1
    }
  }
}

安全评估

// Comprehensive security audit
{
  "tool": "get_security_audit",
  "arguments": {
    "url": "https://example.com",
    "checks": ["https", "csp", "hsts"]
  }
}

资源优化

// Find optimization opportunities
{
  "tool": "analyze_resources",
  "arguments": {
    "url": "https://example.com",
    "resourceTypes": ["images", "javascript"],
    "minSize": 1024
  }
}

使用参考资源

访问内置指南和最佳实践：

// Get Core Web Vitals thresholds
{
  "resource": {
    "uri": "lighthouse://performance/core-web-vitals-thresholds"
  }
}

// Access WCAG accessibility guidelines
{
  "resource": {
    "uri": "lighthouse://accessibility/wcag-guidelines"
  }
}

// Get framework-specific optimization guides
{
  "resource": {
    "uri": "lighthouse://frameworks/optimization-guides"
  }
}

使用提示进行分析

// Analyze audit results with focused recommendations
{
  "prompt": "analyze-audit-results",
  "arguments": {
    "auditResults": "{...lighthouse audit json...}",
    "focusArea": "performance"
  }
}

// Create a performance improvement plan
{
  "prompt": "create-performance-plan",
  "arguments": {
    "currentMetrics": "{...current performance metrics...}",
    "targetGoals": "Achieve 90+ performance score and sub-2s LCP",
    "timeframe": "3 months"
  }
}

// Compare before/after audit results
{
  "prompt": "compare-audits",
  "arguments": {
    "beforeAudit": "{...before audit results...}",
    "afterAudit": "{...after audit results...}",
    "changesImplemented": "Implemented lazy loading and image optimization"
  }
}

🎯 用例

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

🏗️ 建筑

服务器是使用以下方式构建的：

• 模型上下文协议SDK：用于MCP服务器实施
• 谷歌灯塔：用于网络性能审计
• Chrome启动器：用于浏览器自动化
• TypeScript：用于类型安全和更好的开发人员体验
• 萨德：用于运行时架构验证

🤝 贡献

欢迎投稿！请阅读我们的 贡献指南 有关以下内容的详细信息：

• 代码样式和标准
• 测试要求
• 拉取请求流程
• 开发设置

📜 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🔒 安全

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

📞 支持

• 🐛 错误报告:
• 💬 讨论:
• 📧 电子邮件: security@codingrules.ai

🙏 致谢

• Google Lighthouse团队为优秀的审计引擎
• 模型上下文协议规范的拟人化
• 开源社区提供持续的灵感和贡献

______________________________________________________________________

建于❤️ 通过 丹尼尔·索格尔