mcpField
P
pagespeed-insights-mcp

pagespeed-insights-mcp

ローカル
github.com/ruslanlap開発ツール772 日前に更新

pagespeed-insights-mcp について

pagespeed-insights-mcpは、Google PageSpeed InsightsとCrUXでウェブ性能を調べる開発者やチーム向けのMCPサーバーです。6つのワークフローツールでラボデータと実ユーザーデータを組み合わせ、診断、比較、優先度付きの改善案を提示します。

主な機能

  1. 01PageSpeed Insightsによるページ分析
  2. 02URLまたはオリジン別のCrUX実ユーザーデータ
  3. 03Lighthouse監査と診断
  4. 04複数ページおよび一括比較
  5. 05ベースラインと回帰の追跡
  6. 06優先度付き修正案とビジュアルレポート

活用シーン

  1. 01ページ読み込みが遅い原因の特定
  2. 02ステージングと本番の性能比較
  3. 03保存したベースラインとの変化の追跡
  4. 04実ユーザーのCore Web Vitalsの確認

MCP 対応

互換性のあるAIクライアントに、性能分析用の6つのワークフローツールとMCPプロンプト、リソースを提供します。利用にはGoogle APIキーが必要です。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"ruslanlap-pagespeed-insights": {
"command": "npx",
"args": [
"-y",
"pagespeed-insights-mcp"
],
"env": {
"GOOGLE_API_KEY": "<GOOGLE_API_KEY>"
}
}
}
}
起動コマンドnpx -y pagespeed-insights-mcp
設定が必要な環境変数
GOOGLE_API_KEYシークレットGoogle API key with PageSpeed Insights API enabled

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmpagespeed-insights-mcp2.2.0

ツール

6

掲載時のツール一覧 · 1 週間前に更新

パラメーター型必須説明
urlstringはい公開 http(s) URL。例:https://example.com/products。
runsintegerいいえ異なる測定の回数。中央値とばらつきが必要な場合は 3~5 回を使用します。
localestringいいえen や uk-UA などの BCP-47 ロケール。
reportenumいいえ返されるインサイトの量と形式。summary | full | recommendations | audit | performance-map
strategyenumいいえLighthouse のデバイスプロファイル。デフォルトは mobile です。mobile | desktop | both
categoriesarrayいいえリクエストする Lighthouse カテゴリ。
responseFormatenumいいえmarkdown は簡潔で読みやすく、json は機械可読です。structuredContent からも取得できます。markdown | json

詳細

PageSpeed Insights MCP サーバー

Buy Me A Coffee

Google PageSpeed Insights と Chrome UX Report の API に対応した6 つのツールを備える MCP サーバーです。Claude、Cursor、または MCP 対応の AI クライアントから、ウェブパフォーマンスを直接分析、比較、最適化できます。

⚡ クイックスタート(コピーして貼り付け)

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "npx",
      "args": ["-y", "pagespeed-insights-mcp"],
      "env": { "GOOGLE_API_KEY": "your-google-api-key" }
    }
  }
}

Google Cloud Console で無料の API キーを取得し、Claude Desktop の claude_desktop_config.json に貼り付けて再起動します。これで完了です。(Codex/OpenAI の設定、Docker)

npm version npm downloads MCP Toplist Glama MCP Pagespeed Insights MCP server

PageSpeed MCP のチャットデモ PageSpeed MCP のターミナルデモ

GitHub Package Version CI Documentation Live Demo License: Apache-2.0

🔥 他との違い

多くの PageSpeed MCP サーバーは、「URL に対して PSI を実行する」という1 つのツールをラップしています。このサーバーは、パフォーマンスワークフロー全体を網羅する6 つのワークフローツールを提供します。スコアだけでなく、実行可能な改善計画も提示します。

  • 充実したツールセット:ページ分析、CrUX の実ユーザーデータ(URL とオリジン)、Lighthouse 監査、複数ページとバッチの比較、ベースライン、回帰の追跡
  • 詳細な診断:要素単位、ネットワーク、JavaScript、画像最適化、レンダリングを妨げる要因、サードパーティの影響を分析
  • 実行可能な出力:生の Lighthouse データを優先順位付きの修正案に変換する推奨エンジンに加え、スクリーンショットのビジュアル分析も提供
  • 実用的な追加機能:繰り返し実行する場合のキャッシュや、AI エージェントが行動に移せるよう調整されたスマートな推奨機能
  • 実績ある品質:npm で公開され、公式 MCP レジストリ と Glama に掲載。Vitest で CI テスト済み

🎬 インタラクティブデモを見る → — アニメーション付きの例で、ツールの動作を確認できます 代替 URL:https://ruslanlap.github.io/pagespeed-insights-mcp/demo.html

📖 目次

⚙️ クライアント設定

Claude Desktop

claude_desktop_config.json に追加します:

{
  "mcpServers": {
    "pagespeed-insights": {
      "command": "npx",
      "args": ["-y", "-p", "pino-pretty", "-p", "pagespeed-insights-mcp", "pagespeed-insights-mcp"],
      "env": {
        "GOOGLE_API_KEY": "your-google-api-key-here"
      }
    }
  }
}
Codex / OpenAI

設定に追加します(TOML):

[mcp_servers.pagespeed-insights]
command = "npx"
args = [
  "-y",
  "-p",
  "pino-pretty",
  "-p",
  "pagespeed-insights-mcp",
  "pagespeed-insights-mcp"
]
env = { GOOGLE_API_KEY = "your-google-api-key-here" }

注: 適切なログ形式で出力するには、pino-pretty パッケージが必要です。上記の設定では、npx を通じて自動的にインストールされます。

Grok Build の場合(config.toml)

~/.grok/config.toml(グローバル)または <repo>/.grok/config.toml(プロジェクト単位、優先度高)に追加します:

[mcp_servers.pagespeed-insights]
command = "npx"
args = ["-y", "-p", "pino-pretty", "-p", "pagespeed-insights-mcp", "pagespeed-insights-mcp"]
env = { GOOGLE_API_KEY = "${GOOGLE_API_KEY}" }
enabled = true

# Recommended companion professional MCPs (add once):
# [mcp_servers.github]      — PRs, issues, code search
# [mcp_servers.context7]    — fresh library docs (Upstash)
# [mcp_servers.serena]      — semantic code intelligence (uses your .serena/ if present)

プロジェクト単位の例(ローカルの dist/index.js とより厳密な Serena 設定を使用するため、このリポジトリの .grok/config.toml に記述します):

[mcp_servers.pagespeed-insights]
command = "node"
args = ["/home/ubuntuvm/Projects/pagespeed-insights-mcp/dist/index.js"]
env = { GOOGLE_API_KEY = "${GOOGLE_API_KEY}", NODE_ENV = "development" }

Grok セッション内での確認:

  • /mcps(または Ctrl+L → MCP タブ)→ pagespeed-insights が「running」と表示されていることを確認します
  • ツールを使用します:pagespeed-insights__pagespeed_analyze_page、pagespeed-insights__pagespeed_get_field_data など(名前空間付き)

📊 出力例

github.com に対する実際の pagespeed_analyze_page の結果です — Lighthouse をモバイルで1回実行したものです。CrUX の数値は scope: "origin" を指定した pagespeed_get_field_data から取得しています:

Lighthouse のラボスコア:

カテゴリスコア状態
パフォーマンス(モバイル)54/100🔴 低評価
パフォーマンス(デスクトップ)52/100🔴 低評価

主要指標(モバイル):

指標値評価
First Contentful Paint11.9 s🔴 低評価
Largest Contentful Paint13.4 s🔴 低評価
Total Blocking Time30 ms🟢 優秀
Cumulative Layout Shift0.07🟢 良好
Speed Index11.9 s🔴 低評価

CrUX のフィールドデータ — 実ユーザー、github.com のオリジン(スマートフォン):

指標p75(実ユーザー)
First Contentful Paint1.9 s
Largest Contentful Paint2.2 s
Interaction to Next Paint243 ms
Cumulative Layout Shift0.02

実行ごとに結果は異なります — Lighthouse のラボデータにはばらつきがあります(1回の実行は1サンプルです)。中央値を得るには runs: 3-5 を使用してください。

ラボデータとフィールドデータ:Lighthouse は接続を制限します(そのためモバイルは54/100です)。一方、CrUX は実際の GitHub 訪問者が体験する状況を示します — どちらのデータも、このサーバーのツールから直接取得できます。

📚 ドキュメント

オンラインで詳細なドキュメントを公開しています。

👉 ドキュメントサイト全体を見る

docs/ ディレクトリ内の Markdown ファイルを直接確認することも、ローカルで mkdocs serve を実行することもできます。

📝 リリースノート

現在のリリース:この README の先頭にあるバージョンバッジをご覧ください。

最新のハイライト:
  • ✨ 洗練されたビジュアルフォーマッター:

    • Unicode スコアバー:進捗を視覚化します(█████████████░░░ 85/100 🟢 Good)。ひと目で状況を把握できます。
    • Core Web Vitals スコアカード:Google の公式 2026 年ガイドラインに基づいて分類した、見やすい Markdown テーブルです(🟢 Good、🟡 Needs Improvement、🔴 Poor)。
    • GitHub Shield バッジ:リポジトリの README にそのままコピーして貼り付けられる Markdown バッジです。web.dev の分析への直接リンクも含まれます。
    • 最新の Mermaid アーキテクチャマップ:コントラストが高く、ダークモードでも見やすい、ノードを色分けしたフローチャートです。
    • 推奨事項のコールアウト:優先度を視覚的にまとめたカードです(🔴 High | 🟡 Medium | 🟢 Low | Impact: High)。
  • 💬 MCP ネイティブのプロンプト(スラッシュコマンド):

    • Claude Desktop、Cursor、Cline のスラッシュメニューで利用できる対話型プロンプト:
      • /performance-audit:優先順位を付けた改善策を提示する、4 ステップのパフォーマンス診断です。
      • /release-comparison:ステージング環境と本番環境の差分を検証し、明確な GO / NO-GO の判断を提示します。
      • /core-web-vitals-deepdive:実ユーザーの CrUX フィールドデータと、シミュレーションによる Lighthouse ラボデータを詳しく比較します。
  • 📚 MCP ネイティブのリソース:

    • ツールを実行せずに参照できるコンテキスト URI:
      • pagespeed://web-vitals-guide:2026 年の Core Web Vitals のしきい値と最適化のプレイブックです。
      • pagespeed://baselines:回帰の追跡に使用する、ローカルに記録されたパフォーマンスのベースラインです。
  • 🧪 エンタープライズグレードのテストスイートとレジリエンス:

    • テスト範囲を拡大し、21 のテストスイートと304 のテストを実施しています(すべて合格)。
    • 高いカバレッジ基準:96.43% のステートメントカバレッジ、85.82% の分岐カバレッジ(フォーマッター、リソース、ベースラインは 100%)。
    • CI と prepublishOnly で、lint、typecheck、test、build をクリーンな状態で一度に実行します。
  • v2 のコアアーキテクチャ:

    • ワークフロー指向の 6 つの pagespeed_* ツールが、従来の v1 のエンドポイント形状の 19 個のツールに置き換わりました。すべてのデータツールは、構造化された結果を Markdown または JSON で出力できます。

この README の先頭にあるバッジは、リリースのたびに(npm バージョン、GitHub パッケージバージョン、ダウンロード数)自動的に更新されます。手動で編集する必要はありません。

リリース履歴の全容については、CHANGELOG.md を参照してください。

🎯 このツールが必要な理由

課題 1 —「ページの表示が遅いのに、原因がわからない」 PageSpeed Insights を開いて大量のデータを見ても、何から修正すればよいのかわかりません。この MCP は、ノイズを取り除く 6 つの目的別ワークフローを AI アシスタントに提供します。レンダリングを妨げているリソース、2 MB を無駄にしている画像、メインスレッドの時間を 1.5 秒消費しているサードパーティスクリプトを特定し、影響度に基づいて優先順位を付けます。「サイトが遅い理由は?」と尋ねれば、40 項目の指標ダッシュボードではなく、優先順位付きの修正リストが返ってきます。

課題 2 —「パフォーマンスの低下を本番環境にリリースしてしまう」 チームの開発ペースが速く、毎日デプロイしている一方で、マージのたびに誰も Lighthouse の完全な監査を実行していません。Core Web Vitals の低下に気づいたときには、すでに回帰が本番環境に反映されています。この MCP を使えば、開発者は誰でも Claude/Cursor に URL を貼り付けるだけで、ラボデータ、Chrome の実ユーザーから得られたフィールドデータ(CrUX)、要素単位の CLS/LCP デバッグを含む完全な監査を数秒で取得できます。デスクで回帰を検出できるか、3 日後に SEO チームから Slack メッセージを受け取って初めて知るかの違いです。

✨ 機能

主な機能
  • 🚀 Google PageSpeed Insights を使用したウェブページのパフォーマンス分析
  • 📱 マルチプラットフォーム対応:モバイルデバイスとデスクトップデバイス
  • 🔍 包括的な指標を含む詳細な Lighthouse レポート
  • 📊 主要なパフォーマンス指標をまとめた簡易レポート
  • 🎯 優先度スコアと実行可能な修正案を含むスマートな推奨事項
  • 💾 API 呼び出しを減らし、パフォーマンスを向上させるインテリジェントなキャッシュ
  • 🌍 ローカライズ:複数の言語に対応
  • ⚡ 簡単なインストール:1 つのコマンドでセットアップ
  • 🐳 コンテナ化したデプロイに対応する Docker サポート
高度な分析ツール(新機能!)
  • 📸 ビジュアル分析 - スクリーンショット、フィルムストリップ、全ページキャプチャ
  • 🎯 要素レベルのデバッグ - 問題の原因となっている特定の DOM 要素を見つけます
  • 🌐 ネットワークウォーターフォール - リクエストのタイミングとリソースの読み込みを詳細に分析します
  • ⚡ JavaScript プロファイリング - 実行の内訳と未使用コードの検出
  • 🖼️ 画像の最適化 - 正確な削減量を含む画像固有の問題
  • 🚫 レンダリングブロック分析 - 重要なリクエストチェーンと依存関係
  • 🔌 サードパーティの影響 - プロバイダー別に分類したスクリプトの影響
  • 📊 完全監査 - すべてのカテゴリを対象とする Lighthouse の完全監査

🚀 すぐにインストール

オプション 1:自動インストール(推奨)
# Set environment variable
export GOOGLE_API_KEY=your-google-api-key
curl -sSL https://raw.githubusercontent.com/ruslanlap/pagespeed-insights-mcp/master/scripts/install.sh | bash

インストーラーは、デフォルトで公開 npm パッケージ(pagespeed-insights-mcp)を使用します。代わりにスコープ付きの GitHub Packages ビルドをインストールするには、先に GitHub Packages の認証を設定してから、次を実行してください。

curl -sSL https://raw.githubusercontent.com/ruslanlap/pagespeed-insights-mcp/master/scripts/install.sh | \
  PAGESPEED_INSIGHTS_MCP_PACKAGE=@ruslanlap/pagespeed-insights-mcp bash
オプション 2:npm または GitHub Packages 経由
npm(公開レジストリ)から
# Global installation from npm
npm install -g pagespeed-insights-mcp

# Or use without installation
npx pagespeed-insights-mcp
GitHub Packages から
# First configure authentication (see GITHUB_PACKAGES.md for details)
# Then install globally
npm install -g @ruslanlap/pagespeed-insights-mcp

注: このパッケージは npm と GitHub Packages の両方で利用できます。

  • npm の場合:npm install pagespeed-insights-mcp を使用します
  • GitHub Packages の場合:npm install @ruslanlap/pagespeed-insights-mcp を使用します(GitHub 認証が必要です)

GitHub Packages からのインストール手順について詳しくは、GITHUB_PACKAGES.md を参照するか、GitHub Packages のページをご覧ください。

🔧 設定

MCP サーバーで PageSpeed Insights API にアクセスするには、Google API キーが必要です。

# Set environment variable
export GOOGLE_API_KEY=your-google-api-key

# Windows
$env:GOOGLE_API_KEY="your-google-api-key"

# Or pass directly when running
GOOGLE_API_KEY=your-google-api-key npx pagespeed-insights-mcp
📝 MCP 設定例
Claude Desktop(pino-pretty ログ出力を使用):
"pagespeed-insights": {
  "command": "npx",
  "args": [
    "-y",
    "-p",
    "pino-pretty",
    "-p",
    "pagespeed-insights-mcp",
    "pagespeed-insights-mcp"
  ],
  "env": {
    "GOOGLE_API_KEY": "your-google-api-key-here"
  }
}
Codex(pino-pretty ログ出力を使用):
[mcp_servers.pagespeed-insights]
command = "npx"
args = [
  "-y",
  "-p",
  "pino-pretty",
  "-p",
  "pagespeed-insights-mcp",
  "pagespeed-insights-mcp"
]
env = { GOOGLE_API_KEY = "your-google-api-key-here" }

注: これらの例では、ログの書式を整えるために pino-pretty を使用しています。整形済みログを使用しない本番環境向けの設定については、以下のログ記録セクションを参照してください。

Google Antigravity

設定ファイルの例はexamplesディレクトリにあります。

オプション 3:Docker
docker build -t pagespeed-insights-mcp .
docker run -e GOOGLE_API_KEY=your-key pagespeed-insights-mcp

🔑 Google API キーの取得

この MCP サーバーを使用するには、PageSpeed Insights API を有効にした Google API キーが必要です。

ヒント

⚡ クイックセットアップリンク: **Google Cloud 認証情報の設定ページ**に直接アクセスして、プロジェクトのキーをすばやく作成できます。

手順
  1. Google Cloud Console にアクセスします(またはクイックセットアップリンクを使用します)。
  2. 新しいプロジェクトを作成するか、既存のプロジェクトを選択します。
  3. PageSpeed Insights API を有効にします:
    • APIs & Services → Library に移動します。
    • "PageSpeed Insights API" を検索し、Enable をクリックします。
  4. API キーを作成します:
    • APIs & Services → Credentials に移動します。
    • Create Credentials → API Key をクリックします。
    • 生成されたキーをコピーし、設定で GOOGLE_API_KEY として指定します。

Google Cloud Console API Key Setup

⚙️ Claude Desktop の設定

設定ファイルのパス:macOS ~/Library/Application Support/Claude/claude_desktop_config.json · Windows %APPDATA%\Claude\claude_desktop_config.json · Linux ~/.config/claude/claude_desktop_config.json — JSON については、上記の⚙️ クライアント設定を参照してください。編集後は Claude Desktop を再起動してください。

💻 使用方法

設定後、以下のようなコマンドを Claude に尋ねるだけで使用できます。

🔍 ページ全体の分析
Analyze the performance of https://example.com
📱 モバイルデバイスの分析
Analyze https://example.com for mobile devices with all categories
⚡ パフォーマンスの概要
Get a quick performance report for https://example.com
🖥️ デスクトップ分析
Analyze https://example.com performance for desktop devices
🌐 複数カテゴリの分析
Perform a full audit of https://example.com including SEO, accessibility, and best practices
🎯 パフォーマンスに関するスマートな推奨事項
Get smart recommendations for improving https://example.com performance
💾 キャッシュ管理
Clear the cache to get fresh data for all subsequent requests
📸 ビジュアル分析
Get visual analysis for https://example.com showing screenshots and loading timeline
🎯 要素レベルのデバッグ
Show me which specific elements are causing performance issues on https://example.com
🌐 ネットワークウォーターフォール分析
Analyze the network requests and resource loading for https://example.com
⚡ JavaScript のパフォーマンス
Get JavaScript execution breakdown for https://example.com
🖼️ 画像最適化の機会
Show me which images need optimization on https://example.com
🚫 レンダリングを妨げるリソース
Find render-blocking resources on https://example.com
🔌 サードパーティスクリプトの影響
Analyze third-party script impact on https://example.com performance
📊 Lighthouse の完全な監査
Run a full audit including accessibility, SEO, and best practices for https://example.com

利用可能なツール(v2)

バージョン 2 では、以前のエンドポイント形式の 19 個のツールが、6 個のワークフローツールに置き換えられます。これは破壊的変更です。MCP クライアントのプロンプト、保存済みのツール呼び出し、インテグレーションを更新し、以下の名前を使用してください。データを返す各ツールは responseFormat(markdown、デフォルト、または json)を受け付け、MCP の structuredContent を返します。

ツール用途
pagespeed_analyze_page1 ページの Lighthouse ヘルスチェック、完全なレポート、推奨事項、監査結果、または Mermaid マップ(report)。
pagespeed_diagnose_page1 つの観点に絞った調査:visual、elements、network、javascript、images、render-blocking、または third-parties。
pagespeed_get_field_datapage または origin の CrUX 実ユーザー Core Web Vitals。
pagespeed_compare_pages2 つのページを比較するか、1 つのページを保存済みベースラインと比較します(mode)。
pagespeed_analyze_batch進捗通知に対応している場合は通知を行いながら、1~10 ページをトリアージします。
pagespeed_clear_cacheデプロイ後に、このプロセスのメモリ内 API キャッシュをクリアします。
v1 からの移行
v1 のツールv2 での置き換え
analyze_page_speed、get_performance_summary、get_recommendations、get_full_audit、get_performance_mappagespeed_analyze_page を report=full、summary、recommendations、audit、または performance-map とともに使用します
get_visual_analysis、get_element_analysis、get_network_analysis、get_javascript_analysis、get_image_optimization_details、get_render_blocking_details、get_third_party_impactpagespeed_diagnose_page を対応する focus とともに使用します
crux_summary、get_origin_cruxpagespeed_get_field_data を scope=page または origin とともに使用します
compare_pages、compare_baselinepagespeed_compare_pages を mode=pages または baseline とともに使用します
batch_analyze、clear_cachepagespeed_analyze_batch、pagespeed_clear_cache
full_reportpagespeed_analyze_page と pagespeed_get_field_data を実行します。ラボデータとフィールドデータは混在させず、明示的に分けて扱います。
例
{"url":"https://example.com","strategy":"mobile","report":"recommendations","responseFormat":"markdown"}
{"url":"https://example.com","focus":"render-blocking","responseFormat":"json"}
{"mode":"baseline","url":"https://example.com","strategy":"mobile","runs":3}
例

pagespeed-insights-mcp を使った Claude Desktop からの回答例 🔥🔥🔥

MCP プロンプト(スラッシュコマンド)

このサーバーは、Claude Desktop、Cursor、Cline のプロンプト/スラッシュメニュー(/)に自動的に表示される組み込みのMCP プロンプトを公開します。

プロンプト説明引数
performance-auditLighthouse の概要、CrUX フィールドデータ、対象を絞った診断、優先順位付きの修正チケットを含む、4 ステップのパフォーマンストリアージをガイドします。url(必須)、strategy(mobile / desktop)
release-comparisonリリース前の比較を自動化します。ステージングと本番環境を比較し、指標の変化の方向と、明確なリリース可否の推奨(GO / NO-GO)を示します。productionUrl(必須)、stagingUrl(必須)、strategy
core-web-vitals-deepdiveLCP、INP、CLS について、実ユーザーの CrUX 指標と合成 Lighthouse ラボスコアの差の根本原因を調査します。url(必須)、scope(page / origin)

MCP リソース

標準の MCP リソース URI から、リファレンスガイドやローカルの状態に直接アクセスできます。

リソース URIMIME タイプ内容
pagespeed://web-vitals-guidetext/markdownLCP、INP、CLS、FCP、TTFB、TBT の公式 2026 年版 Core Web Vitals のしきい値(良好/改善が必要/不良)。
pagespeed://baselinesapplication/jsonpagespeed_compare_pages によって記録された、ローカルに保存済みのパフォーマンスベースライン。

✨ リッチなビジュアルと美しい出力

Claude Desktop、Cursor、Cline に返される出力は、洗練された美しい書式になっています。

  • Unicode スコアバー:進捗をゲージで可視化します(例:\█████████████░░░` 85/100 🟢 (良好)`)。
  • Core Web Vitals スコアカード:公式の2026年目標に対応した、ステータスバッジ付きの見やすい表です(🟢 良好、🟡 要改善、🔴 不良)。
  • README シールドバッジ:リポジトリに直接コピーして貼り付けられるMarkdownバッジです([![PageSpeed Score](https://img.shields.io/badge/PageSpeed-95%2F100-success?style=flat-square&logo=lighthouse)](https://pagespeed.web.dev))。
  • 最新化されたMermaidアーキテクチャマップ:コントラストが高く、ダークモードに適した、ノードを色分けしたフローチャートです。

開発

開発中のログを見やすくするため、pino-prettyをグローバルにインストールすることをおすすめします。

npm install -g pino-pretty
# Development mode
npm run dev

# Build project
npm run build

# Run built server
npm start
MCP 環境でのログ記録/pino-pretty

この MCP サーバーはログ記録にpinoを使用し、NODE_ENV=developmentの場合にpino-prettyトランスポートを有効にします。

  • 最小限の設定ですぐに動作させたい場合(Claude、Codex など)は、次のように設定します。
NODE_ENV=production GOOGLE_API_KEY=your-google-api-key npx pagespeed-insights-mcp

または、MCP の設定で次のように指定します。

"pagespeed-insights": {
  "command": "npx",
  "args": ["pagespeed-insights-mcp"],
  "env": {
    "GOOGLE_API_KEY": "your-google-api-key-here",
    "NODE_ENV": "production"
  }
}
  • 開発時にnpxで見やすいログを出力したい場合は、npxを使ってサーバーと一緒にpino-prettyをインストールできます。
"pagespeed-insights": {
  "command": "npx",
  "args": [
    "-y",
    "-p",
    "pino-pretty",
    "-p",
    "pagespeed-insights-mcp",
    "pagespeed-insights-mcp"
  ],
  "env": {
    "GOOGLE_API_KEY": "your-google-api-key-here"
  }
}

トラブルシューティング

「Google API キーが指定されていません」

Claude Desktop の設定で、GOOGLE_API_KEY環境変数が設定されていることを確認してください。

「PageSpeed Insights API エラー:403」

Google Cloud プロジェクトで PageSpeed Insights API が有効になっていることを確認してください。

「無効な URL」

URL にプロトコルが含まれていることを確認してください。受け付けられるのはhttp://とhttps://のみです。それ以外のスキーム(file://、ftp://、javascript:など)は、スキーマレベルで拒否されます。

要件

  • Node.js 20.19.0以降(Node 18は2025年4月以降EOLとなっており、サポートされていません)。
  • PageSpeed Insights APIと(任意で)Chrome UX Report APIを有効にしたGoogle APIキー。

セキュリティ

セキュリティ上の問題は非公開で報告してください。公開のissueは作成しないでください。開示ポリシーと運用者向けのセキュリティ強化に関する注意事項については、SECURITY.mdをご覧ください。

謝辞

このプロジェクトの開発に大きく貢献してくださった@engmsaleh(Mohamed Saleh Zaied)に、心より感謝申し上げます。

また、このプロジェクトの成長と発展に、卓越したかけがえのない貢献をしてくださった@system-confにも、特別な感謝を申し上げます。献身的な取り組み、専門知識、継続的なサポートは大きな力となりました。皆さまなしでは、このプロジェクトは今日の姿にはなっていなかったでしょう。🙏

ライセンス

Apache-2.0 — LICENSEをご覧ください。貢献者はApache License 2.0に基づき、特許を許諾しています。

サポート

バグ報告や機能リクエストは、リポジトリでissueを作成してください。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。