ページの読み込み速度を改善するにあたって重要なのは、実際の状況をChromeデベロッパーツールの「パフォーマンス」や「ネットワーク」から確認して把握した上で対策を考えていくことです。
この作業を人間の目で見て行なってもいいのですが、今はAIがデベロッパーツールの中身を見ることができるので、AIに見てもらって具体的な提案をしてもらうところまで自動化してみましょう！
調査から提案までの全体像
様々な前提知識が必要かもしれませんが、ひとまず登場人物を整理しておきます。難しいと思った方は深く理解せず先に進んでしまっても問題ございません。
登場人物としては、以下の通りです。
- AI搭載エディタ（VS Code、Cursorなど）
- AIエージェント
- Chrome DevTools MCP
- Chromeブラウザ
AI搭載エディタ
AI搭載エディタは、チャットでAIエージェントを動かす仕組みを備えたエディタを指します。VS CodeやCursorがよく使われるエディタになります。
無料で開始はできますが、十分に使うためには基本的には有料という前提で捉えてもらえると良いかと思います。
VS Codeについてはもう少しだけ補足すると、VS CodeにGitHub Copilotの拡張機能を導入することで、AI搭載型に変わります。料金を支払うのはVS Codeに対してではなくGitHub Copilotに対してです。
- GitHub Copilot 料金：https://github.com/features/copilot/plans?locale=ja
- Cursor 料金：https://cursor.com/ja/pricing
AIエージェント
AIエージェントは、タスクを遂行してくれるAIのようなイメージを持ってもらえたらと思います。ほぼ先ほどのエディタの紹介とイコールではあるのですが、登場人物として「エディタ」と「AI」ということで分類したような形です。
AIにはモデルがありまして、ちょっとずつ得意なこと苦手なことが違ってきます。その時々によってトレンドは変わってくるのですが、コーディングに強いとされているのは「Claude」です。
Chrome DevTools MCP
Chrome DevTools MCPは、AIに対して「Chromeのデベロッパーツール見たりブラウザを操作してもいいですよ！」という権限を与えられるツールのようなイメージです。
MCPはここだけで使われている用語ではなく、Model Context Protocolの略でAIとツールを繋ぐための統一的な仕組みになります。Anthropic社が提唱しました。
Googleカレンダーに繋いで自分の予定をAIに管理してもらったり、Slackに繋いで代わりに投稿してもらったり、Figmaに繋いでデザインデータからコーディングしてもらったり、とChromeに限らず様々なツールと繋ぐことが可能です。
少し横にそれましたが、Chrome DevTools MCPは、MCPの仕組みを使ってChrome DevToolsと繋ぐための仕組みです。
AIがChromeを見て行動することが可能になります。
Chromeブラウザ
AIがChromeの情報を見にいきますので、パソコンにChromeブラウザが入っていることが前提となります。
Chrome DevTools MCPを設定しよう
今回はGitHub Copilotが入っているVS Codeに設定する方法を確認していきましょう。
上部のメニューの「表示」から「コマンド パレット」を開きます。
「MCP: ユーザー構成を開く」を入力して開きます。
mcp.jsonが開かれるはずです。ここにchrome-devtoolsを設定しましょう。
{
"inputs": [],
"servers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}設定できたら、以下を入力して動作を確認してみましょう。「表示」から「チャット」を開きます。
チャットに以下を入力して実行しましょう。
Please check the LCP of web.dev.
すると、AIが処理を開始してくれます。ブラウザが立ち上がり「https://web.dev/」が開いてLCPを確認してくれるはずです。
許可が求められたら実行しても問題ないタスクかを確認して許可していきます。以下の場合は「https://web.dev/」を開いていいですか？と聞かれている様子です。
結果を返してくれました！LCPの値や内訳、評価なども教えてくれていることが分かります。
この結果でも十分そうですが、もっと次に繋がるように詳細を返してもらうように依頼の仕方を変えていきましょう。
具体的なアクションに繋がる提案をしてもらおう
「Please check the LCP of web.dev.」と依頼するだけでも十分に結果を返してくれることが分かりました。ただ、これだけだと具体的に何を改善すれば良いかが分かりません。
もう少し依頼の仕方を変えて、具体的なアクションに繋がる提案をしてもらえるようにしましょう。
LCPの調査と具体的な提案をお願いするプロンプト
このプロンプト自体もAIに整理してもらいながら作ったものです。要点としては、以下の通りです。
- 結果はレポートとして返してもらう
- Markdown形式でファイルとしても出力してもらう
- シミュレーションの前提条件をつける（少し環境を落としてボトルネックを判断しやすく）
- 調査してもらう内容は、「TTFB 内訳」と「リソースのタイムライン」「レンダリング遅延の要因」
- ボトルネックを洗い出して優先度を分ける
- それぞれのボトルネックに対する具体的な改善策
- 最後に、特に優先して対応する対策を3つに絞る
あなたは Web パフォーマンス解析の専門家として振る舞ってください。
chrome-devtoolsのMCPを通じて取得できる情報（Performance, Network など）を使って、
以下の構成のレポートを Markdown で出力してください。
# 目的
LCP の結果と内訳をもとに、ボトルネックとなっているリソースと処理を特定し、
Web コーダーがすぐに手を動かせる改善策まで提示すること。
# 前提
- 対象読者は HTML/CSS/JS を扱える Web コーダーです。
- 専門用語は使ってよいですが、簡単な補足説明も書いてください。
- すべて日本語で出力してください。
# 調査対象URL
{ここに URL を入れる}
# 測定条件（重要）
以下の条件でのシミュレーションを前提にレポートを作成してください。
- **CPU：4× slower（4倍減速）**
- **Network：Fast 4G（高速 4G）**
- ネットワークのキャッシュ無効化にチェック
- DevMode MCP での計測ログを信頼ソースとして使用する
# レポート構成
0. ファイル名
- 調査対象URLをもとに、以下のルールでレポートのファイル名を決めて、最初に記載してください。
- ドメイン名とパスの「.（ドット）」と「/（スラッシュ）」を「_（アンダーバー）」に変える
- 接頭辞に「performance_」をつける
- 拡張子は `.md`
- 例：https://www.example.com/about.html → `performance_www_example_com_about_html.md`
出力例：
- ファイル名：`performance_www_example_com_about_html.md`
1. ページ概要
- ページ URL
- 測定環境（CPU4× slow、Fast4G）
- 計測データの元（DevMode MCP）
2. LCP サマリ
- LCP の値（秒）
- LCP 要素の種類と簡潔な説明
- LCP 発生時刻（navigationStart からの ms）
- LCP 発生時点までに完了している主なリソース
3. HTML ドキュメント TTFB 内訳
- DNS / 接続 / TLS / リクエスト送信 / 応答待ち / コンテンツダウンロード
- 各フェーズの時間(ms)を表で示し、特に長い部分についてコメントしてください。
4. LCP までに読み込まれているリソースのタイムライン
- navigationStart から LCP 発生までに開始されたリクエストを、
開始時刻の早い順に一覧表としてください。
- 表の列:
- 開始時刻(ms)
- リソース名（パスの末尾 40 文字程度）
- 種類（HTML/CSS/JS/Image/Font/Other）
- 転送サイズ(KB)
- ダウンロード完了までの時間(ms)
- レンダリングブロッキングかどうか（Yes/No）
- 特に「レンダリングブロッキングで、かつ時間が長い」ものを
数個ピックアップして解説してください。
5. レンダリング遅延の要因
- LCP 付近のメインスレッドの "long task" を抽出し、
実行時間が長いもの上位 5 件を表にしてください。
- レイアウト・スタイル再計算・スクリプト実行が
どの程度 LCP を遅らせているかを定性的にコメントしてください。
6. ボトルネックと改善の優先度
- High / Medium / Low の 3 段階で、ボトルネックを箇条書きにしてください。
- 各項目ごとに:
- 問題の概要
- なぜ LCP / UX を悪化させているか
- 関連するリソースや処理
7. 具体的な改善策（Web コーダー向け）
- High 優先度のボトルネックそれぞれについて、
実装レベルでの改善策を箇条書きで提案してください。
- 例:
- 「ファーストビューに不要な JS の `<script>` を `defer` にする」
- 「LCP 画像に `priority` / `fetchpriority=high` を指定する」
- 「共通 CSS をクリティカル CSS と遅延 CSS に分割する」など
- 「サーバー設定やインフラ変更が必要なもの」と
「コーダーがフロント側の修正で解決できるもの」を分けてください。
8. まとめ
- 最初に取り組むべきアクションを 3 つに絞って列挙してください。
出力形式は Markdown とし、表は Markdown のテーブルで作成してください。実際に依頼してみる
ファイルを生成して欲しいので、プロジェクトを用意しておきます。空のフォルダを作ってドラッグ&ドロップでVS Codeにプロジェクトフォルダとして開いておきます。
「performance-test」というフォルダを作りました。
これをVS Codeにドラッグ&ドロップで開きます。中身は空ですがエクスプローラーに認識されました。
では、先ほどのプロンプトで依頼してみましょう。調査対象URLにはこのブログのURLを入れてみます。ファイルを編集して欲しいのでモードはAgentにしておきましょう。
- モードの設定：
Agent - モデルの選択：
Cloaud Sonnet 4（※ 自由に選択してください）
調査する項目が増えるので先ほどより時間はかかると思います。自分は1分〜2分くらいでした。AIの分析が終わると、Markdownファイルにレポートを作成してくれます。「保持」ボタンを押しましょう。
エクスプローラーから作成してくれたレポートを右クリック→プレビューを開くで開いてみます。
すると、以下のように見やすい形でレポートを開くことができます。
上の方は調査結果です。「7. 具体的な改善策」や「8. まとめ」が具体的な改善の提案となります。最後の3つの提案を見ると「1. CSS統合とクリティカルCSS抽出」「2. LCP画像の最適化」「3. Google Fontsの最適化」が残っていました。確かにと思う内容な気はします。
最終的な判断は人間する
AIに作業をお願いすることは人間の作業を代行してもらうイメージです。AIは調査と提案までの役割で、最終的な判断は人間が行います。
つまり、AIに依頼して調査した結果や提案内容の妥当性を判断できるスキルは人間に必要ということです。ブラウザが画面を描画するまでの流れや、LCPの内訳など、自分でも理解できていると、よりAIの提案に納得感を持って対応していけるのかなと思います。
Webに関する主な指標（Core Web Vitals）が「合格」であれば対応は不要かも
今回は分かりやすくするためにパソコンの性能を落として調査しています。そのためLCPの速度が十分でないとAIが判断している可能性があります。
もし実際のユーザーの環境で「Webに関する主な指標（Core Web Vitals）」が「合格」の判定であれば、今回の結果は「さらに突き詰めたい場合の対応」という認識で保留にしても問題ないかと個人的には思っています。
ちなみに、当ブログは「合格」していそうです🎉
おわりに
Chrome DevTools MCPを使うことで、「人の目でひとつずつ確認していた作業」を AI に任せられるようになり、調査から改善案までの流れを大きく効率化できそうです。
ただし、AI が出してくれた結果をどう解釈し、どこから着手するかを判断するのは最終的には人間です。ブラウザが描画する仕組みや LCP の内訳など、基礎を理解しているほど、AI の提案の意図が掴みやすくなるのかなと思っています。
今回はパフォーマンスに着目して紹介しましたが、他にもWeb制作の工程の中でChromeを目視で確認しながら行なっている作業がいくつかあります。それらも「Chrome DevTools MCP」を活用することでどのように効率化されるか見ていきましょう！（準備中）
