Lighthouse MCP

🚀 Lighthouse MCP

Google Lighthouseのパフォーマンス分析を行うためのモデルコンテキストプロトコル（MCP）サーバーとCLIツールです。

✨ 主な機能

• 🚀 パフォーマンス分析：Core Web Vitalsを含む包括的なパフォーマンス指標を提供します。
• 🔍 深層分析：重要なリクエストチェーン、未使用コードの検出、パフォーマンスパターンの分析が可能です。
• 📊 複数のカテゴリ：パフォーマンス、アクセシビリティ、ベストプラクティス、SEOの各カテゴリでの分析ができます。
• 🎯 実行可能な推奨事項：パフォーマンス向上のための優先順位付きの提案を提供します。
• 💻 CLIとライブラリ：コマンドラインツールとして使用することも、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

Options:
  -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('Core Web Vitals:', analysis.metrics);
  console.log('推奨事項:', analysis.recommendations);
}

MCPサーバーの使用法

MCPサーバーは、AIモデルがLighthouse分析を実行するためのツールを提供します。

# MCPサーバーを起動
lhmcp --mcp

ツールのアーキテクチャ (L1/L2/L3)

ツールは3層アーキテクチャで構成されています。

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

# 開発中にCLIを実行
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            # CLIエントリポイント
├── test/                 # テストファイル
├── CLAUDE.md            # アーキテクチャガイド
└── package.json

出力例

🔍 Analyzing https://example.com...
   Device: mobile
   Categories: performance, accessibility, best-practices, seo

✅ Analysis completed in 15.2s

# Deep Performance Analysis

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

## Performance Scores
- **Performance:** 95/100
- **Accessibility:** 100/100
- **Best Practices:** 100/100
- **SEO:** 100/100

## Core Web Vitals
- **LCP:** 1234ms
- **FCP:** 456ms
- **CLS:** 0.001
- **TBT:** 50ms

## Prioritized Recommendations
### 🟡 Optimize images
**Category:** Performance
**Impact:** Could save 200KB and improve load time by 0.5s

使用されている技術

📄 ライセンス

MIT

コントリビューションは大歓迎です！プルリクエストを送信してください。