Lighthouse MCP

🚀 Lighthouse MCP

Lighthouse MCP 是一个用于 Google Lighthouse 性能分析的模型上下文协议（MCP）服务器和命令行工具。它能够提供全面的性能分析，帮助开发者优化网页性能。

✨ 主要特性

• 🚀 性能分析：提供包括核心网页指标在内的全面性能指标。
• 🔍 深度分析：可进行关键请求链分析、未使用代码检测以及性能模式分析。
• 📊 多类别评估：涵盖性能、可访问性、最佳实践和 SEO 等多个类别。
• 🎯 可操作建议：为性能改进提供优先级建议。
• 💻 命令行工具与库：既可以作为命令行工具使用，也可以集成到 Node.js 应用程序中。
• 🤖 MCP 服务器：支持模型上下文协议，实现基于 AI 的分析。

📦 安装指南

# 全局安装
npm install -g lighthouse-mcp

# 或在项目中使用
npm install lighthouse-mcp

💻 使用示例

命令行工具使用

基础用法

# 分析网站
lhmcp https://example.com

# 启动 MCP 服务器
lhmcp --mcp

选项说明

lhmcp <url> [options]
lhmcp --mcp

选项:
  -d, --device <device>     设备类型：mobile（默认）或 desktop
  -c, --categories <list>   要测试的类别（逗号分隔）
                            默认值：performance,accessibility,best-practices,seo
  --chains                  包含关键链分析
  --unused                  包含未使用代码分析
  --json                    输出原始 JSON 数据，而非格式化文本
  --mcp                     以 MCP 服务器模式启动
  -h, --help               显示此帮助信息

示例

# 桌面端分析
lhmcp https://example.com --device desktop

# 包含关键链和未使用代码的全面分析
lhmcp https://example.com --chains --unused

# 导出为 JSON 文件
lhmcp https://example.com --json > report.json

# 仅分析特定类别
lhmcp https://example.com -c performance,seo

库的使用

import { runLighthouse } from 'lighthouse-mcp';
import { performDeepAnalysis } from 'lighthouse-mcp';

// 运行 Lighthouse 分析
const result = await runLighthouse('https://example.com', {
  device: 'mobile',
  categories: ['performance', 'accessibility']
});

if (result.isOk()) {
  // 执行深度分析
  const analysis = performDeepAnalysis(result.value);
  
  console.log('性能得分:', analysis.scoreAnalysis.summary?.performance);
  console.log('核心网页指标:', analysis.metrics);
  console.log('建议:', analysis.recommendations);
}

MCP 服务器使用

MCP 服务器为 AI 模型提供了执行 Lighthouse 分析的工具：

# 启动 MCP 服务器
lhmcp --mcp

工具架构（L1/L2/L3）

工具采用三层架构组织：

• L1 - 收集层：直接执行 Lighthouse 并收集原始数据的工具：
  • l1_collect_single：对单个 URL 执行 Lighthouse 分析。
  • l1_collect_multi：并行分析多个 URL。
  • l1_collect_comparative：收集数据进行比较分析。
• L2 - 分析层：直接分析收集的日志和报告的工具：
  • l2_critical_chain：分析关键请求链。
  • l2_unused_code：检测并量化未使用的 JavaScript 和 CSS。
  • l2_deep_analysis：深度性能指标分析。
  • l2_score_analysis：系统的得分和改进分析。
  • l2_third_party_impact：衡量第三方脚本的影响。
  • l2_progressive_third_party：渐进式第三方阻塞分析。
• L3 - 解释层（未来规划）：需要人工洞察或 AI 模型推理的工具：
  • l3_optimization_strategy：优化策略规划（计划中）。
  • l3_business_impact：业务影响评估（计划中）。
  • l3_custom_recommendations：自定义建议（计划中）。

📚 详细文档

开发步骤

# 克隆仓库
git clone https://github.com/yourusername/lighthouse-mcp.git
cd lighthouse-mcp

# 安装依赖
pnpm install

# 构建项目
pnpm build

# 运行测试
pnpm test

# 类型检查
pnpm typecheck

# 代码检查
pnpm lint

# 在开发环境中运行命令行工具
pnpm cli -- https://example.com

项目结构

lighthouse-mcp/
├── src/
│   ├── analyzers/         # 分析模块
│   │   ├── criticalChain.ts
│   │   ├── unusedCode.ts
│   │   ├── thirdParty.ts
│   │   └── ...
│   ├── core/             # 核心功能
│   │   ├── lighthouse.ts
│   │   ├── browser.ts
│   │   └── config.ts
│   ├── tools/            # MCP 工具（L1/L2/L3 层）
│   │   ├── l1-collect-*.ts      # L1: 数据收集
│   │   ├── l2-*.ts              # L2: 直接分析
│   │   └── index.ts
│   ├── types/            # TypeScript 类型
│   └── cli.ts            # 命令行工具入口
├── test/                 # 测试文件
├── CLAUDE.md            # 架构指南
└── package.json

输出示例

🔍 正在分析 https://example.com...
   设备：mobile
   类别：performance, accessibility, best-practices, seo

✅ 分析在 15.2 秒内完成

# 深度性能分析

**URL:** https://example.com/
**时间戳:** 2025-09-08T12:00:00.000Z

## 性能得分
- **性能:** 95/100
- **可访问性:** 100/100
- **最佳实践:** 100/100
- **SEO:** 100/100

## 核心网页指标
- **LCP:** 1234ms
- **FCP:** 456ms
- **CLS:** 0.001
- **TBT:** 50ms

## 优先级建议
### 🟡 优化图片
**类别:** 性能
**影响:** 可节省 200KB 并缩短加载时间 0.5 秒

所使用的技术

📄 许可证

本项目采用 MIT 许可证。

🤝 贡献

欢迎贡献代码！请随时提交拉取请求。