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 許可證。

🤝 貢獻

歡迎貢獻代碼！請隨時提交拉取請求。