Chrome DevTools MCP登場 ─ Gemma 3とつないでブログを診断してみた

導入 & MCP紹介
プチテスト：Gemma 3で計測してみた
Lighthouseとの比較
所感とユースケース
おまけ：インストール方法とプロンプト例
1. プロンプト例

導入 & MCP紹介

AIエージェントが外部ツールとやりとりするための共通規格「MCP（Model Context Protocol）」は、ここ最近ラインナップがじわじわ拡大しています。これまでにも web-search MCP を試して「AIから直接ウェブ検索」、Blender MCP を動かして「AIが3Dモデルを直接編集」といった体験をしてきました。

そして今回新たに登場したのが Chrome DevTools MCP。名前のとおり、あの開発者ツールをAI経由で操作できるようにするサーバーです。DOMの検査やネットワークログの取得、さらにはパフォーマンス監査まで──これまでは人間が手作業で確認してきた領域を、AIがリクエストベースで叩けるようになります。

今回はこのChrome DevTools MCPをローカル環境のGemma 3に装着し、自分のブログを「AIによるパフォーマンス診断」にかけてみました。

プチテスト：Gemma 3で計測してみた

まずは手元のGemma 3から、Chrome DevTools MCPに「パフォーマンス監査して」と指示を送ってみました。
実行コマンドはシンプルで、performance_start_trace を叩くだけ。するとLCP（Largest Contentful Paint）やCLS（Cumulative Layout Shift）といった指標が返ってきます。

最初の試行では「Chromeの実行ファイルが見つからない」と愚痴をこぼされる場面もありましたが（笑）、数回やり直すうちに以下のような数値が出ました。

LCP: 約2.2秒
CLS: 0.9
TBT: 約2.2秒
TTI: 約1.4秒
Verdict: 「Good」

さらに「トップ5改善案」として、画像の最適化、キャッシュ設定、サーバー応答時間短縮、Lazy Load導入、CSS/JSのMinify といった改善ポイントも提示してくれます。

…が、実行のたびに数値がブレたり、時には雛形のような改善案しか返さなかったりと、まだ安定性には課題がありそうです。

Lighthouseとの比較

一方で、同じサイトをChrome DevToolsの Lighthouse で計測すると──結果は堂々の 95点。
LCPもTBTも申し分なく、CLSもきれいにゼロ。公式の診断ツールでは「十分に高速で健全」と判定されました。

つまり、MCP経由でGemma 3に計測させると「Good〜Needs work」あたりをウロウロ、でもLighthouse公式だと95点の優等生──というギャップが生まれたわけです。

この差は「シミュレーション環境での一貫性を重視するLighthouse」と、「実行環境に左右されやすいMCP実測」の違いが大きいと考えられます。
AIが返してきた数値は面白いけれど、公式レポートでの安心感はやはり別格です。

https://b.aries67.com/ の Lighthouse 計測結果

所感とユースケース

Chrome DevTools MCPをGemma 3に接続してみて感じたのは、「未来の片鱗は見えたが、まだ荒削り」というところです。
確かにAIが自動でパフォーマンス診断を返してくれるのは便利ですし、将来的には n8n などの自動化ワークフローに組み込んで「自分のサイトを毎朝チェック」 といった使い方も現実味を帯びてきます。

ただ、実行ごとに結果が揺れたり、時には雛形のような改善提案しか返さなかったりと、信頼できる監査スキームにするにはまだ時間がかかりそう です。

そして何より──もしこの不安定な計測結果を根拠に SEO営業 でもしようものなら、大惨事間違いなし。
今のところは「新しいMCPを試してみた」という話題ネタとして楽しむのがちょうど良いでしょう。

おまけ：インストール方法とプロンプト例

「自分でも触ってみたい」という方向けに、Chrome DevTools MCP の導入方法を簡単にまとめておきます。

前提として Node.js と npm が利用できる環境が必要です。

# Chrome DevTools MCP のインストールと実行
npx chrome-devtools-mcp@latest

これで MCP サーバーが立ち上がり、AIエージェント（Gemma 3など）から DevTools にアクセスできるようになります。
設定ファイルの mcpServers セクションに以下を追記すればOKです。

"mcpServers": {
  "chrome-devtools": {
    "command": "npx",
    "args": ["chrome-devtools-mcp@latest"]
  }
}

あとはエージェントに「performance_start_trace」などを呼び出させれば、パフォーマンス計測やDevToolsの各種機能を試すことができます。

プロンプト例

起動後、AIエージェントに次のように指示できます。

Run a single-pass performance audit on https://example.com  
Return LCP, CLS, TBT, TTI and a one-line verdict (Good/Needs work/Poor for each).  
Then list top 5 opportunities with concrete fixes and estimated impact.  
Do not run multiple iterations.

これで、指定したサイトに対してパフォーマンス監査が実行され、Lighthouse相当の数値や改善提案が返ってきます。