Lighthouse MCP Server

🚀 Lighthouse MCP Server

このLighthouse MCPサーバーは、Google Lighthouseを利用して包括的なウェブパフォーマンスの監査と分析機能を提供します。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の場合
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"]}'

Cursorでのインストール

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

Windsurfでのインストール

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

Claude Desktopでのインストール

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

✨ 主な機能

• 🚀 パフォーマンス分析: Core Web Vitals、パフォーマンススコア、および最適化の推奨事項を含む完全なLighthouse監査
• ♿ アクセシビリティ監査: WCAG準拠チェックとアクセシビリティスコア分析
• 🔍 SEO分析: 検索エンジン最適化監査とベストプラクティスの推奨事項
• 🔒 セキュリティ評価: HTTPS、CSP、およびセキュリティ脆弱性スキャン
• 📊 リソース分析: JavaScript、CSS、画像、およびフォントの最適化の機会
• 📱 モバイルとデスクトップの比較: スロットリングオプションを使用したデバイス間の比較分析
• ⚡ Core Web Vitals: LCP、FID、CLSの監視と閾値チェック
• 🎯 パフォーマンス予算: カスタムパフォーマンス閾値と予算監視
• 📚 参照リソース: ウェブパフォーマンス、アクセシビリティ、SEO、およびセキュリティの組み込みガイドラインとベストプラクティス

🔧 利用可能なツール

Lighthouse MCPサーバーは、包括的なウェブ分析のために以下のツールを提供します。

🏁 監査ツール

⚡ パフォーマンスツール

🔍 分析ツール

🔒 セキュリティツール

💬 利用可能なプロンプト

Lighthouse MCPサーバーには、LLMが構造化された分析と推奨事項を提供するのに役立つ再利用可能なプロンプトが含まれています。

📊 分析プロンプト

📚 利用可能なリソース

🎯 戦略プロンプト

🔧 プロンプトパラメータの詳細

• auditResults: LighthouseツールからのJSON監査結果
• focusArea: 焦点を当てる特定のカテゴリ ("performance", "accessibility", "seo", "best-practices", "pwa")
• beforeAudit / afterAudit: 変更前後のLighthouse監査結果
• changesImplemented: 監査間で行われた変更の説明
• currentMetrics: 監査からの現在のパフォーマンスメトリクス
• targetGoals: 特定のパフォーマンス目標またはビジネス目標
• timeframe: 改善を実施するためのタイムライン
• framework: フロントエンドフレームワークまたはテクノロジースタック
• constraints: 技術的またはビジネス的な制約
• websiteType: ウェブサイトのタイプ (例: e-commerce、blog、corporate)
• 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"
  }
}

Core Web Vitals分析

// カスタム閾値でCore Web Vitalsをチェックする
{
  "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
  }
}

参照リソースの利用

組み込みのガイドラインとベストプラクティスにアクセスします。

// Core Web Vitalsの閾値を取得する
{
  "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"
  }
}

🎯 ユースケース

• パフォーマンス監視: 自動化されたパフォーマンス追跡とCore Web Vitalsの監視
• アクセシビリティ準拠: WCAG 2.1準拠チェックと改善ガイダンス
• SEO最適化: 技術的なSEO監査と検索エンジン最適化の推奨事項
• セキュリティ評価: 脆弱性スキャンとセキュリティベストプラクティスの検証
• リソース最適化: バンドル分析と最適化の機会の特定
• パフォーマンス予算: 自動化されたパフォーマンス予算監視とアラート
• CI/CD統合: 自動化された品質ゲートとパフォーマンスの回帰検出

🏗️ アーキテクチャ

このサーバーは以下を使用して構築されています。

• Model Context Protocol SDK: MCPサーバーの実装
• Google Lighthouse: ウェブパフォーマンス監査
• Chrome Launcher: ブラウザ自動化
• TypeScript: 型安全性と開発者体験の向上
• Zod: ランタイムスキーマ検証

🤝 コントリビューション

コントリビューションは歓迎されます！ 詳細については、コントリビューションガイドをお読みください。

• コードスタイルと標準
• テスト要件
• プルリクエストのプロセス
• 開発環境のセットアップ

📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細については LICENSE ファイルを参照してください。

🔒 セキュリティ

セキュリティ問題については、セキュリティポリシーを参照してください。

📞 サポート

• 🐛 バグレポート: GitHub Issues
• 💬 ディスカッション: GitHub Discussions
• 📧 メール: security@codingrules.ai

🙏 謝辞

• 優れた監査エンジンを提供してくれたGoogle Lighthouseチーム
• Model Context Protocol仕様を提供してくれたAnthropic
• 継続的なインスピレーションとコントリビューションを提供してくれたオープンソースコミュニティ

Built with ❤️ by Daniel Sogl