Lighthouse MCP Server

Lighthouse MCP Server

Google Lighthouse を使用した包括的なウェブパフォーマンス監査および分析機能を提供する Model Context Protocol（MCP）サーバーです。このサーバーにより、LLM や AI エージェントは、ウェブサイトのパフォーマンス評価、アクセシビリティ監査、SEO 分析、セキュリティチェック、Core Web Vitals の監視を詳細に実施できます。

🌟 主な機能

• 🚀 パフォーマンス分析：Core Web Vitals、パフォーマンススコア、最適化の推奨事項を含む Lighthouse の完全な監査
• ♿ アクセシビリティ監査：WCAG 準拠の確認とアクセシビリティスコアの分析
• 🔍 SEO 分析：検索エンジン最適化の監査とベストプラクティスの推奨事項
• 🔒 セキュリティ評価：HTTPS、CSP、セキュリティ脆弱性のスキャン
• 📊 リソース分析：JavaScript、CSS、画像、フォントの最適化機会
• 📱 モバイルとデスクトップの比較：スロットリングオプションを使用したデバイス間の比較分析
• ⚡ Core Web Vitals：しきい値の確認を含む LCP、INP、CLS の監視
• 🎯 パフォーマンス予算：カスタムのパフォーマンスしきい値と予算の監視
• 🤖 エージェントによるブラウジング：AI エージェントにページがどれだけ適切に対応しているかを調べる Lighthouse 13 の監査（WebMCP ツール、エージェントのアクセシビリティツリー、llms.txt）
• 🧩 構造化出力：すべてのツールが outputSchema を宣言し、検証済みの structuredContent を返すため、クライアントは解析が必要な JSON 文字列ではなく、型付きデータを取得できます
• 📚 参考リソース：ウェブパフォーマンス、アクセシビリティ、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",
        "<profile-path>",
        "--no-headless"
      ]
    }
  }
}

--chrome-flag を使って、追加の Chrome フラグを渡せます。たとえば --chrome-flag=--disable-gpu です。 フラグの値が -- で始まり、既知のオプション名と一致する場合は、トップレベルのオプションとして解析されないように、--chrome-flag=... を使用してください。 プロファイルモードでは Lighthouse によるストレージのリセットが無効になるため、Cookie とローカルストレージは実行間で保持されます。 --user-data-dir が存在しないディレクトリを指している場合、そのディレクトリが作成され、新しいプロファイルとして扱われます。 --profile-path には chrome://version に表示される Profile Path（例：.../Default）を設定してください。 注：Chrome のリモートデバッグにはデフォルト以外のユーザーデータディレクトリが必要です。そのため、システムのデフォルトではなく、専用のプロファイルディレクトリを再利用してください。 必要であれば、--user-data-dir と --profile-directory を個別に指定することもできます。 --chrome-port のみで接続してもストレージは保持されません。セッションを維持するには、プロファイルフラグも指定してください。

CLI オプション

MCP サーバーでサポートされている実行時フラグ：

• --profile-path <path>：chrome://version の Profile Path を使用します（ユーザーデータディレクトリとプロファイル名を自動的に取得します）
• --user-data-dir <path>：永続セッション用に Chrome プロファイルディレクトリを再利用します
• --profile-directory <name>：ユーザーデータディレクトリ内のプロファイルを選択します
• --chrome-path <path>：Chrome／Chromium 実行ファイルのパスを明示的に指定します（自動検出より優先されます。CHROME_PATH 環境変数も使用できます）
• --chrome-flag <flag> または --chrome-flag=<flag>：追加の Chrome フラグを渡します（繰り返し指定できます）
• --chrome-port <port> または --remote-debugging-port <port>：リモートデバッグを有効にして起動した既存の Chrome インスタンスに接続します
• --headless：ヘッドレスモードを強制します
• --no-headless：ヘッドありモードを強制します

ログ

Lighthouse のログは stderr に出力されます。MCP クライアントのログが大量にならないよう、サーバーではログレベルを error に設定しています。デバッグ時（Chrome の起動に失敗した場合など）は、LIGHTHOUSE_LOG_LEVEL を silent、info または verbose に設定してください。

LIGHTHOUSE_LOG_LEVEL=verbose npx @danielsogl/lighthouse-mcp@latest

WSL2／カスタム Chrome パス

誤った Chrome バイナリが選択される場合（例：WSL2 で Linux バイナリではなく Windows 版 Chrome が選択される場合）は、パスを明示的に設定してください。

# 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 "<profile-path>" \
  --no-headless

E2E スモークテスト（既存の Chrome への接続）

リモートデバッグを有効にして 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 "<profile-path>"

VS Code へのインストール

# 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"]}'

Cursor へのインストール

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

Windsurf へのインストール

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

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

🔧 利用可能なツール

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

🏁 監査ツール

⚡ パフォーマンスツール

🔍 分析ツール

🔒 セキュリティツール

💬 利用可能なプロンプト

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

📊 分析プロンプト

📚 利用可能なリソース

Lighthouse MCP サーバーには、重要なガイドラインとベストプラクティスを含む参照リソースが組み込まれています。

🎯 戦略プロンプト

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

• auditResults：Lighthouse ツールによる JSON 形式の監査結果
• focusArea：重点を置く特定のカテゴリ（"performance"、"accessibility"、"seo"、"best-practices"、"agentic-browsing"）
• beforeAudit / afterAudit：変更前と変更後の Lighthouse 監査結果
• changesImplemented：監査間に実施した変更の説明
• currentMetrics：監査から得られた現在のパフォーマンス指標
• targetGoals：具体的なパフォーマンス目標またはビジネス目標
• timeframe：改善を実施する期間
• framework：フロントエンドフレームワークまたは技術スタック
• constraints：技術的またはビジネス上の制約
• websiteType：Web サイトの種類（例：eコマース、ブログ、企業サイト）
• targetAudience：ターゲットオーディエンスまたは市場に関する情報
• complianceLevel：WCAG 準拠レベル（"AA" または "AAA"）
• userGroups：アクセシビリティを考慮する特定のユーザーグループ

📋 パラメーターの詳細

共通パラメーター

• url（必須）：分析する Web サイトの URL
• device：対象デバイス（"desktop" または "mobile"、デフォルト："desktop"）
• includeDetails：監査の詳細情報を含めます（デフォルト：false）
• throttling：ネットワーク／CPU のスロットリングを有効にします（デフォルト：false）

固有のパラメーター

• categories：監査する Lighthouse のカテゴリ（["performance", "accessibility", "best-practices", "seo", "agentic-browsing"]）
• threshold：メトリクスのカスタムしきい値（例：{"lcp": 2.5, "inp": 200, "cls": 0.1}）
• budget：パフォーマンス予算の上限（例：{"performanceScore": 90, "largestContentfulPaint": 2500}）
• resourceTypes：分析するリソースの種類（["images", "javascript", "css", "fonts", "other"]）
• minBytes：分析対象とするファイルサイズの最小しきい値（デフォルト：2048）
• checks：実行するセキュリティチェック（["https", "csp", "hsts", "origin-isolation", "clickjacking", "trusted-types", "third-party-cookies", "deprecations"]）

💡 使用例

基本的なパフォーマンス監査

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

Core Web Vitals の分析

// 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,
      "inp": 200,
      "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"
  }
}

🎯 ユースケース

• パフォーマンス監視：パフォーマンスと Core Web Vitals を自動で追跡・監視します
• アクセシビリティへの準拠：WCAG 2.1 への準拠を確認し、修正方法を提示します
• SEO の最適化：技術的な SEO 監査と検索エンジン最適化の推奨事項を提示します
• セキュリティ評価：脆弱性をスキャンし、セキュリティのベストプラクティスへの準拠を検証します
• リソースの最適化：バンドルを分析し、最適化の機会を特定します
• パフォーマンス予算：パフォーマンス予算を自動で監視し、アラートを通知します
• CI/CD 連携：品質ゲートを自動化し、パフォーマンスのリグレッションを検出します

🏗️ アーキテクチャ

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

• Model Context Protocol SDK：MCP サーバーの実装に使用します
• Google Lighthouse：ウェブパフォーマンスの監査に使用します
• Chrome Launcher：ブラウザーの自動化に使用します
• TypeScript：型安全性と、より優れた開発者エクスペリエンスのために使用します
• Zod：実行時のスキーマ検証に使用します

🧪 テスト

npm run test:run      # unit tests
npm run test:coverage # unit tests with coverage
npm run test:e2e      # end-to-end tests

エンドツーエンドテストスイートは、サーバーをビルドし、実際の MCP クライアントを使って stdio 経由で起動したうえで、ループバックで配信されるフィクスチャページに対して実際の Lighthouse 監査を実行します。Chrome がインストールされている必要があります。標準以外の場所にインストールされている場合は、CHROME_PATH を設定してください。

🤝 コントリビューション

コントリビューションを歓迎します。詳しくはコントリビューションガイドをご覧ください。

• コードスタイルと規約
• テスト要件
• プルリクエストの手順
• 開発環境のセットアップ

📜 ライセンス

このプロジェクトは MIT ライセンスの下で公開されています。詳細はLICENSEファイルをご覧ください。

🔒 セキュリティ

セキュリティ上の問題については、セキュリティポリシーをご覧ください。

📞 サポート

• 🐛 バグの報告：GitHub Issues
• 💬 ディスカッション：GitHub Discussions
• 📧 メール：[email protected]

🙏 謝辞

• 優れた監査エンジンを提供してくれた Google Lighthouse チーム
• Model Context Protocol の仕様を提供してくれた Anthropic
• 継続的な刺激と貢献をもたらしてくれるオープンソースコミュニティ

❤️ を込めて Daniel Sogl が開発