pagespeed-insights-mcp について
pagespeed-insights-mcpは、Google PageSpeed InsightsとCrUXでウェブ性能を調べる開発者やチーム向けのMCPサーバーです。6つのワークフローツールでラボデータと実ユーザーデータを組み合わせ、診断、比較、優先度付きの改善案を提示します。
主な機能
- 01PageSpeed Insightsによるページ分析
- 02URLまたはオリジン別のCrUX実ユーザーデータ
- 03Lighthouse監査と診断
- 04複数ページおよび一括比較
- 05ベースラインと回帰の追跡
- 06優先度付き修正案とビジュアルレポート
活用シーン
- 01ページ読み込みが遅い原因の特定
- 02ステージングと本番の性能比較
- 03保存したベースラインとの変化の追跡
- 04実ユーザーのCore Web Vitalsの確認
MCP 対応
互換性のあるAIクライアントに、性能分析用の6つのワークフローツールとMCPプロンプト、リソースを提供します。利用にはGoogle APIキーが必要です。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
6掲載時のツール一覧 · 1 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| url | string | はい | 公開 http(s) URL。例:https://example.com/products。 |
| runs | integer | いいえ | 異なる測定の回数。中央値とばらつきが必要な場合は 3~5 回を使用します。 |
| locale | string | いいえ | en や uk-UA などの BCP-47 ロケール。 |
| report | enum | いいえ | 返されるインサイトの量と形式。summary | full | recommendations | audit | performance-map |
| strategy | enum | いいえ | Lighthouse のデバイスプロファイル。デフォルトは mobile です。mobile | desktop | both |
| categories | array | いいえ | リクエストする Lighthouse カテゴリ。 |
| responseFormat | enum | いいえ | markdown は簡潔で読みやすく、json は機械可読です。structuredContent からも取得できます。markdown | json |
詳細
PageSpeed Insights MCP サーバー
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)
🔥 他との違い
多くの 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
📖 目次
- ⚡ クイックスタート(コピー&ペースト)
- 🔥 他との違い
- ⚙️ クライアント設定
- 📊 出力例
- 📚 ドキュメント
- 📝 リリースノート
- 🎯 必要な理由
- ✨ 機能
- 🚀 クイックインストール
- 🔑 Google API キーの取得
- ⚙️ Claude Desktop の設定
- 💻 使い方
- 利用可能なツール
- MCP プロンプト(スラッシュコマンド)
- MCP リソース
- ✨ 豊かな視覚表現と美しい出力
- 開発
- トラブルシューティング
- 要件
- セキュリティ
- 謝辞
- ライセンス
- サポート
⚙️ クライアント設定
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 Paint | 11.9 s | 🔴 低評価 |
| Largest Contentful Paint | 13.4 s | 🔴 低評価 |
| Total Blocking Time | 30 ms | 🟢 優秀 |
| Cumulative Layout Shift | 0.07 | 🟢 良好 |
| Speed Index | 11.9 s | 🔴 低評価 |
CrUX のフィールドデータ — 実ユーザー、github.com のオリジン(スマートフォン):
| 指標 | p75(実ユーザー) |
|---|---|
| First Contentful Paint | 1.9 s |
| Largest Contentful Paint | 2.2 s |
| Interaction to Next Paint | 243 ms |
| Cumulative Layout Shift | 0.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)。
- Unicode スコアバー:進捗を視覚化します(
-
💬 MCP ネイティブのプロンプト(スラッシュコマンド):
- Claude Desktop、Cursor、Cline のスラッシュメニューで利用できる対話型プロンプト:
/performance-audit:優先順位を付けた改善策を提示する、4 ステップのパフォーマンス診断です。/release-comparison:ステージング環境と本番環境の差分を検証し、明確な GO / NO-GO の判断を提示します。/core-web-vitals-deepdive:実ユーザーの CrUX フィールドデータと、シミュレーションによる Lighthouse ラボデータを詳しく比較します。
- Claude Desktop、Cursor、Cline のスラッシュメニューで利用できる対話型プロンプト:
-
📚 MCP ネイティブのリソース:
- ツールを実行せずに参照できるコンテキスト URI:
pagespeed://web-vitals-guide:2026 年の Core Web Vitals のしきい値と最適化のプレイブックです。pagespeed://baselines:回帰の追跡に使用する、ローカルに記録されたパフォーマンスのベースラインです。
- ツールを実行せずに参照できるコンテキスト URI:
-
🧪 エンタープライズグレードのテストスイートとレジリエンス:
- テスト範囲を拡大し、21 のテストスイートと304 のテストを実施しています(すべて合格)。
- 高いカバレッジ基準:96.43% のステートメントカバレッジ、85.82% の分岐カバレッジ(フォーマッター、リソース、ベースラインは
100%)。 - CI と
prepublishOnlyで、lint、typecheck、test、buildをクリーンな状態で一度に実行します。
-
v2 のコアアーキテクチャ:
- ワークフロー指向の 6 つの
pagespeed_*ツールが、従来の v1 のエンドポイント形状の 19 個のツールに置き換わりました。すべてのデータツールは、構造化された結果を Markdown または JSON で出力できます。
- ワークフロー指向の 6 つの
この 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 認証情報の設定ページ**に直接アクセスして、プロジェクトのキーをすばやく作成できます。
手順
- Google Cloud Console にアクセスします(またはクイックセットアップリンクを使用します)。
- 新しいプロジェクトを作成するか、既存のプロジェクトを選択します。
- PageSpeed Insights API を有効にします:
- APIs & Services → Library に移動します。
- "PageSpeed Insights API" を検索し、Enable をクリックします。
- API キーを作成します:
- APIs & Services → Credentials に移動します。
- Create Credentials → API Key をクリックします。
- 生成されたキーをコピーし、設定で
GOOGLE_API_KEYとして指定します。
⚙️ 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_page | 1 ページの Lighthouse ヘルスチェック、完全なレポート、推奨事項、監査結果、または Mermaid マップ(report)。 |
pagespeed_diagnose_page | 1 つの観点に絞った調査:visual、elements、network、javascript、images、render-blocking、または third-parties。 |
pagespeed_get_field_data | page または origin の CrUX 実ユーザー Core Web Vitals。 |
pagespeed_compare_pages | 2 つのページを比較するか、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_map | pagespeed_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_impact | pagespeed_diagnose_page を対応する focus とともに使用します |
crux_summary、get_origin_crux | pagespeed_get_field_data を scope=page または origin とともに使用します |
compare_pages、compare_baseline | pagespeed_compare_pages を mode=pages または baseline とともに使用します |
batch_analyze、clear_cache | pagespeed_analyze_batch、pagespeed_clear_cache |
full_report | pagespeed_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-audit | Lighthouse の概要、CrUX フィールドデータ、対象を絞った診断、優先順位付きの修正チケットを含む、4 ステップのパフォーマンストリアージをガイドします。 | url(必須)、strategy(mobile / desktop) |
release-comparison | リリース前の比較を自動化します。ステージングと本番環境を比較し、指標の変化の方向と、明確なリリース可否の推奨(GO / NO-GO)を示します。 | productionUrl(必須)、stagingUrl(必須)、strategy |
core-web-vitals-deepdive | LCP、INP、CLS について、実ユーザーの CrUX 指標と合成 Lighthouse ラボスコアの差の根本原因を調査します。 | url(必須)、scope(page / origin) |
MCP リソース
標準の MCP リソース URI から、リファレンスガイドやローカルの状態に直接アクセスできます。
| リソース URI | MIME タイプ | 内容 |
|---|---|---|
pagespeed://web-vitals-guide | text/markdown | LCP、INP、CLS、FCP、TTFB、TBT の公式 2026 年版 Core Web Vitals のしきい値(良好/改善が必要/不良)。 |
pagespeed://baselines | application/json | pagespeed_compare_pages によって記録された、ローカルに保存済みのパフォーマンスベースライン。 |
✨ リッチなビジュアルと美しい出力
Claude Desktop、Cursor、Cline に返される出力は、洗練された美しい書式になっています。
- Unicode スコアバー:進捗をゲージで可視化します(例:
\█████████████░░░` 85/100 🟢 (良好)`)。 - Core Web Vitals スコアカード:公式の2026年目標に対応した、ステータスバッジ付きの見やすい表です(
🟢 良好、🟡 要改善、🔴 不良)。 - README シールドバッジ:リポジトリに直接コピーして貼り付けられるMarkdownバッジです(
[](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を作成してください。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。