AIアシスタントにWebページの情報を取得させるとき、毎回Chromeを起動していませんか？単純なドキュメント取得に10秒以上かかっているなら、それは「絵を飾るのに大型ハンマーを使う」ようなものです。本記事では、軽量なMCPサーバーを使って、静的コンテンツの取得を劇的に高速化する方法を紹介します。
この記事のポイント
- Chrome DevTools MCPは動的コンテンツ向けで、静的ドキュメント取得には過剰
- mcp-server-fetchとduckduckgo-mcp-serverで200ms以下の高速取得が可能
- 用途に応じてツールを使い分けることで、AIワークフローを最適化できる
なぜChromeでのフェッチは遅いのか
Chrome DevTools MCPは非常に強力なツールです。JavaScript重視のSPAのデバッグ、DOM要素の検査、スクリーンショットの取得、動的コンテンツとのインタラクションなど、複雑なWeb操作に対応しています。
しかし、以下のような単純な作業には向いていません：
- 静的なドキュメントの取得
- APIレスポンスの取得
- Markdownファイルの読み込み
- JSレンダリングが不要なクイック検索
例えば「OpenAI APIのchat completionsエンドポイントについて調べて」と頼んだとき、Chrome DevTools経由では以下のような処理が走ります：
- Chromeの起動
- ページ全体のレンダリング
- JavaScriptの実行
- スクリーンショットの取得
- ピクセルの処理
- 回答の生成
本質的にはテキストファイルを取得するだけなのに、これでは10秒以上かかってしまいます。食料品を買いに行くのに大型トラックを使うようなものです。
解決策：シンプルなフェッチ用の「高速レーン」
解決策は、2つの軽量MCPサーバーを使うことです。ブラウザもJavaScriptレンダリングも不要で、フェッチしてすぐに結果を返します。
| サーバー | 用途 |
|---|---|
| mcp-server-fetch | 既知のURLからコンテンツを取得 |
| duckduckgo-mcp-server | Web検索でURLを見つける |
この2つを組み合わせることで、検索からコンテンツ取得までをシームレスに行えます。
パフォーマンス比較
実際のパフォーマンス差は以下の通りです：
| 操作 | Chrome DevTools | 直接フェッチ |
|---|---|---|
| APIドキュメント取得 | 約10-15秒 | 約200ms |
| トークンオーバーヘッド | スクリーンショット、DOM | クリーンなテキスト |
| リソース使用量 | フルブラウザ | HTTPリクエストのみ |
約75倍の高速化が実現できます。さらに、トークン消費も大幅に削減されるため、コスト面でも効率的です。
使い分けの指針
Chrome DevTools MCPを使うべき場面
- JavaScriptで動的に生成されるコンテンツの取得
- ページのビジュアル確認が必要な場合
- フォーム入力やボタンクリックなどのインタラクション
- SPAのデバッグ
Fetchサーバーを使うべき場面
- API公式ドキュメントの参照
- 静的なWebページの内容取得
- JSONやMarkdownファイルの取得
- 素早い情報検索
知っておくと便利なTips
- 複数のMCPサーバーを並行して設定しておき、タスクに応じて使い分けると効率的
- duckduckgo-mcp-serverで検索し、見つかったURLをmcp-server-fetchで取得する連携が強力
- 静的コンテンツか動的コンテンツか判断に迷ったら、まずFetchサーバーを試してみる
まとめ
「MCP Rubber Duck」シリーズの第3弾となる本記事では、静的コンテンツ取得の最適化について解説しました。Chrome DevTools MCPは強力ですが、すべての場面で最適とは限りません。単純なドキュメント取得には、mcp-server-fetchやduckduckgo-mcp-serverといった軽量サーバーを使うことで、75倍もの高速化が可能です。AIワークフローを構築する際は、「このタスクに本当にブラウザが必要か？」と自問してみてください。適材適所のツール選択が、効率的なAI活用の鍵となります。
📎 元記事: https://dev.to/nesquikm/stop-launching-chrome-to-fetch-a-json-file-give-your-ducks-a-fast-lane-704
コメント