あなたのAIエージェントがCore Web Vitalsの超能力を手に入れました
Claude CodeをCoreDashのフィールドデータに接続しましょう。数百万のページロードから最悪のボトルネックを特定し、Chromeで根本原因をトレースして、修正コードを記述します。自律型（Agentic）Webパフォーマンス — 単なるレポートではなく、変更すべき実際のコード行を提示します。
2分でインストール CoreDashの無料トライアルを開始 »Trusted by market leaders · Client results
AIパフォーマンスツールの抱えるデータ問題
ほとんどのAIエージェントはLighthouseに最適化しています。しかし、それはGoogleがランキングに使用しない、シミュレートされたデバイスでの合成スコアに過ぎません。真に役立つWebパフォーマンスAIエージェントは、Googleと同じデータから始めます。つまり、低スペックのスマートフォン、不安定な接続環境、そして開発マシンの画面外に広がる、リアルユーザーのデータです。
Lighthouseはランキングシグナルではない
Googleは、実際のChromeユーザーから28日間にわたって収集されたCrUXのフィールドデータに基づいてランキングを行います。Lighthouseで完璧なスコアを出していても、フィールドデータでは不合格となるケースは日常茶飯事です。実際、モバイルサイトの52%がフィールドにおいて少なくとも1つのCore Web Vitalsの基準を満たしていません。
盲目的なエージェントは盲目的な修正を行う
リアルユーザーデータがなければ、AIエージェントはどのページが遅いのか、どの要素がボトルネックなのか、あるいはその修正が本当に役立ったのかを知るすべがありません。単にシミュレーションを最適化して作業を終えてしまいますが、実際のユーザーの体感とは異なります。
手動での調査には何時間もかかる
データのセグメント化、仮説の構築、トレースの実行、確認、修正案の作成。シニア・パフォーマンス・エンジニアでさえ、1つの問題につき2〜4時間を費やします。これを、サイト上のすべての遅いページに掛け合わせてみてください。
INPはラボ環境では全くシミュレートできません。 Interaction to Next Paintは、リアルユーザーがページとどのようにやり取りしたかを測定します。どこをタップするか、どれくらいの速度でスクロールするか、どのデバイスを持っているかといったリアルユーザーの行動を再現できる合成ツールはありません。LighthouseはINPをレポートすらしていません。AIエージェントがLighthouseを実行しているだけなら、最悪のインタラクティビティ問題に対して盲目となります。唯一のデータソースはフィールドデータなのです。
2つの信頼できる情報源: フィールドデータとブラウザの証拠の融合
CWV Superpowersは、CoreDashのリアルユーザーデータと的を絞ったChromeトレースを組み合わせます。フィールドデータは何が遅いのかを伝え、Chromeはなぜ遅いのかを教えてくれます。
CoreDashがエージェントに「何が遅いか」を伝える
CoreDashは、すべてのリアルユーザーからのすべてのページロードを追跡します。すべての指標は、問題を引き起こしている正確な要素に帰属します。サンプリングや上限はありません。
CoreDashがdiv.hero > img.mainにおいて、全体の52%をLoad Delayが占める4.2秒のLCPをレポートした場合、エージェントはどこを見るべきかを正確に把握します。推測ではなく、何百万もの実際のセッションから得られた測定値です。
このスキルは、LCP要素、要素タイプ、優先度ステータス、フェーズ内訳、INPインタラクションターゲット、LOAFスクリプト、CLSシフト要素、デバイスタイプ、訪問者タイプ、ネットワーク速度、7日間のトレンドなど、25以上のCoreDashディメンションをクエリします。
Chromeがエージェントに「なぜ遅いのか」を教える
CWV Superpowersは、Fast 3Gおよび4倍のCPUスロットリングというモバイルエミュレーションを使用してページにアクセスします。そして、CoreDashが特定したボトルネックのフェーズのみをトレースします。
Load Delayがボトルネックですか？エージェントはネットワークウォーターフォールを調べ、ディスカバリーギャップを探します。Render Delayですか？ブロッキングスクリプトやフォントの読み込み遅延を探します。
結果として得られるのは、フィルムストリップのスクリーンショット、ネットワークウォーターフォール、そしてフィールドデータが明らかにした根本原因を説明する的を絞った証拠です。
絶対的なしきい値ではなく、相対的な割合に基づく推論
Lighthouseは「Render Delayは350msです」と教えてくれますが、それが問題なのでしょうか？全く分かりません。CWV Superpowersは、合計時間の最大割合を消費しているフェーズをボトルネックとして特定します。
INPが350msだとします。Input Delay 70ms (20%)、Processing 80ms (23%)、Presentation 200ms (57%)です。単体で見れば200msは問題なさそうに聞こえますが、ここではPresentationがボトルネックです。ここを修正すれば大きく改善されます。Input Delayを最適化してもほとんど効果はありません。
これにより、パフォーマンス改善作業において最もよくある間違いである「間違った箇所を修正してしまう」ことを防ぎます。
5つのステップ: 「何かが遅い」からコード修正まで
質問してみてください。5つのステップを経た後には、リアルユーザーの証拠に裏打ちされた修正コードが手に入ります。
1. 検出 (Discovery)
CoreDashデータをスキャンし、最悪のページや指標を見つけ出します。poor（不良）評価、モバイル、トラフィックの多いページ、そして長い不良テールを隠しているp75スコアを優先します。
2. 診断 (Diagnosis)
指標をフェーズごとに分解します。LCP: TTFB、Load Delay、Load Time、Render Delay。INP: Input Delay、Processing、Presentation。割合（パーセンテージ）に基づいてボトルネックを特定します。
3. Chromeトレース
モバイルエミュレーションでページにアクセスします。ステップ2で特定したボトルネックのフェーズのみをトレースします。ネットワークウォーターフォール、フィルムストリップ、およびブロッキングリソースの証拠をキャプチャします。
4. 根本原因
要素、原因、CoreDashの指標、およびChromeが確認した内容という2つの情報源を1つのステートメントに統合します。一切の曖昧さはありません。
5. 修正またはレポート
ファイル、行、要素、ビフォー/アフターを含むコード修正を適用するか、チャートと証拠を含む自己完結型のHTMLレポートを生成するか、またはその両方を行うかを選択できます。
25以上のディメンション: フィールドデータがカバーするあらゆる角度
これらは、エージェントがクエリを実行する実際のCoreDashのディメンションです。単なる概要ではなく、全体像です。
LCP (Largest Contentful Paint)
LCP要素 要素タイプ 優先度ステータス TTFBフェーズ Load Delay Load Time Render DelayINP (Interaction to Next Paint)
INPターゲット Input Delay Processing Presentation LOAFスクリプト ロード状態CLS (Cumulative Layout Shift)
シフト要素 シフト原因 シフトタイミングセグメント
デバイスタイプ 国 ブラウザ OS 接続 訪問者タイプ ページパストレンド
7日間の変化 28日間のベースライン リグレッション検出診断: すべてのCore Web Vitalsにおけるフェーズレベルの内訳
単なるスコアではありません。CoreDashからのリアルユーザーの属性情報を使用して、すべての指標をフェーズごとに分解します。
AIによるLCP修正: Largest Contentful Paint診断
4つのフェーズ内訳: TTFB、Load Delay、Load Time、Render Delay。どのフェーズが合計時間の最大割合を消費しているかを特定します。
要素の特定: 正確なLCP要素、そのタイプ（画像、テキスト、背景画像、動画）、および優先度ステータス（fetchpriority、レイジーローディング）を特定します。
典型的な修正: preloadヒントの追加、ヒーロー画像からのレイジーローディングの削除、画像フォーマットの最適化、レンダリングブロック・スクリプトの修正。
AIによるINP修正: Interaction to Next Paint診断
3つのフェーズ内訳: Input Delay、Processing、Presentation。ラボ環境ではシミュレートできない唯一の指標であり、フィールドデータのみが情報源となります。
スクリプトの特定: Long Animation Frames (LOAF) が、正確なJavaScriptファイルとその実行時間を特定します。さらに、インタラクションが発生した時のページのロード状態も把握します。
典型的な修正: メインスレッドへのyield、評価の遅延、イベントハンドラーの分割、巨大なDOMに対するcontent-visibilityの適用。
CLS: Cumulative Layout Shift
5つの原因パターン: 寸法指定のない画像、フォントのスワップ、動的に挿入されるコンテンツ、遅延ロードされるリソース、レイアウトプロパティに対するCSSアニメーション。
クロスディメンション分析: モバイル対デスクトップ、新規対リピーター、高速対低速ネットワークを比較し、原因を絞り込みます。
典型的な修正: width/heightの追加、font-display: optional、min-heightによる領域確保、top/leftの代わりにtransformを使用。
根本原因レポートの記述例
「画像の最適化を検討してください」といった抽象的なものではありません。これが実際の出力です。レビューしてマージできるほど具体的です。
根本原因 (Root cause):
/product/running-shoes-42 におけるLCP画像 div.hero-banner > img.product-main は、preloadヒントがなく、fetchpriority="high" が設定されていないため、1,980ms遅れて発見されています。
CoreDashの証拠:
モバイル（p75）においてLCPは3,820ms（poor）です。ボトルネックは1,980ms（全体の52%）のLoad Delayです。優先度ステータス: 3（プリロードされていない）。トレンド: 7日間で+340ms悪化。
Chromeの証拠:
ネットワークウォーターフォールは、HTMLの最初のバイトから画像リクエストまでの間に1,940msのギャップがあることを示しています。画像はCSSでのみ参照されており、プリロードスキャナーからは見えません。
修正案:
templates/product.html の12行目に <link rel="preload" href="/images/hero.jpg" as="image" fetchpriority="high"> を追加します。47行目のimg要素に fetchpriority="high" を設定します。
一般的なAIのアドバイス:
「LCP画像にfetchpriorityを追加し、クリティカルなリソースの適切なプリロードを確実にすることを検討してください。」
CWV Superpowersの場合:
要素: div.hero-banner > img.product-main
ファイル: templates/product.html, 47行目
証拠: LCP時間の52%がLoad Delay（CoreDash p75）。1,940msのディスカバリーギャップ（Chromeウォーターフォール）。
修正案: ビフォー/アフターの差分を含む2行のコード変更。
比較: CWV Superpowersの実力
ツールが異なれば解決する問題も異なります。それぞれのツールが実際に何を行うかを以下に示します。
| 機能 | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| データソース | リアルユーザー（28日間のフィールドデータ） | 単一のラボセッション | シミュレートされた単一ロード |
| INP測定 | ✓ 実際のインタラクション | ✗ リアルユーザーなし | ✗ 測定不可 |
| フェーズ内訳 | ✓ LCP、INP、CLSフェーズ | ~ 手動での分析 | ✗ スコアのみ |
| 要素の特定 | ✓ 正確な要素 + 優先度 | ~ 見るべき場所を知っていれば | ~ 一般的な提案 |
| 相対的割合の推論 | ✓ パーセンテージによるボトルネック | ✗ 絶対値 | ✗ 絶対値 |
| セグメント比較 | ✓ デバイス、国、ブラウザ | ✗ 単一の設定 | ✗ 単一の設定 |
| トレンド検出 | ✓ 7日間の変化 | ✗ 特定時点のみ | ✗ 特定時点のみ |
| Chromeトレース | ✓ フェーズに絞ったトレース | ✓ フルアクセス | ✗ ブラウザなし |
| コード修正 | ✓ ファイル + 行 + 差分 | ~ エージェント依存 | ~ 一般的なアドバイス |
注記: Chrome DevTools MCPは補完的な役割を果たします。CWV Superpowersは、フィールドデータがボトルネックを特定した後の的を絞ったトレースにこれを使用します。これらは連携して使用すると最大の効果を発揮します。
レポート: SlackへのドロップやJiraへの添付
自己完結型のHTMLです。依存関係やビルドのステップは不要です。すべてがインライン化された1つのファイルに収まっています。
完全なレポート（Chrome使用）
色分けされた指標カード、フェーズ内訳チャート、重要な瞬間（初回描画、LCP、ロード完了）のフィルムストリップ・スクリーンショット、ネットワークウォーターフォールのSVG、根本原因分析、そしてビフォー/アフターのコードを含む推奨される修正内容が含まれます。
RUMのみのレポート
同じ指標カードとフェーズ内訳に加えて、要素の特定と根本原因分析が含まれます。フィルムストリップやウォーターフォールはありませんが、フィールドデータが信頼できる情報源であるため、診断の品質は全く同じです。
任意のMCPクライアントで動作
Claude Code: 自動化されたワークフローを備えたフルスキル。検出、診断、Chromeトレース、コード修正、レポート生成までカバーします。最も推奨されます。
Cursor: CoreDash MCPを利用したプラグインのインストール。エディタ内で完全な診断とコード修正を行います。
VS Code, Windsurf, Gemini CLI: HTTP MCPサーバーをサポートするあらゆるクライアントがCoreDashに接続できます。同じフィールドデータ、同じ要素の特定情報が得られます。
Client Success
Don't just take my word for it
Head of Digital, Rituals
"We used to break performance every other sprint. He set up budgets in our pipeline. Haven't had a regression since."
Head of Platform, Adevinta
45% reduction in blocking time across 15 marketplaces. INP from 440ms to 64ms on Fotocasa alone. Google wrote up the results on web.dev.
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
VP Product, Expedia Group
"We had 80+ third-party scripts and were failing CWV on every major property. Arjen got us passing without touching our ad revenue."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
Engineering Manager, Zalando
"Every other audit we've had gave us a list of problems. This one told us exactly what to fix first and why."
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
2分で実行開始
ターミナルでの自動化されたCore Web Vitals診断。データが流れている状態のCoreDashアカウントが必要です。無料枠でも機能します。
Claude Code
claude mcp add --transport http coredash \
https://app.coredash.app/api/mcp \
--header "Authorization: Bearer cdk_YOUR_API_KEY"
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower
claude --chrome
最大のCWVの問題を見つけて修正して。 CoreDash → Project Settings → API Keys (MCP) からAPIキーを取得します。一度だけ表示されます。SHA-256ハッシュとして保存される読み取り専用キーです。
Cursor
/plugin-add cwv-superpowers
.cursor/mcp.jsonにCoreDashを追加します:
{
"mcpServers": {
"coredash": {
"url": "https://app.coredash.app/api/mcp",
"headers": {
"Authorization": "Bearer cdk_YOUR_API_KEY"
}
}
}
} その他のMCPクライアント
エンドポイント: https://app.coredash.app/api/mcp
ヘッダー: Authorization: Bearer cdk_YOUR_API_KEY
VS Code（Copilotエージェントモード）、Windsurf、Gemini CLI、Claude Desktop、その他あらゆるHTTP MCPクライアントで動作します。1つのMCP Webパフォーマンスエンドポイントで、すべてのエージェントに対応します。
よくある質問
CWV Superpowersを使用するにはChromeを起動している必要がありますか？
いいえ。Chromeトレースは任意です。Chromeがなくても、CoreDashのデータのみに基づいて、完全なフィールドデータ診断、フェーズ内訳、要素の特定、およびコード修正の提案を得ることができます。Chromeを使用すると、フィルムストリップ・スクリーンショット、ネットワークウォーターフォール、および根本原因の視覚的な確認が追加されます。どちらのモードでもレポートは生成されます。
AIエージェントでLighthouseを実行するのと何が違うのですか？
Lighthouseは、あなたのマシン上でシミュレートされた単一のロードを実行します。CWV Superpowersは、CoreDashから28日分のリアルユーザーデータ（実際のデバイス、実際のネットワーク、実際のインタラクション）を使用します。実際のユーザーのタップからINPを測定します（Lighthouseでは不可能です）。セグメント（モバイル対デスクトップ、インド対米国など）を比較します。そして、単なる絶対的なスコアではなく、相対的な割合に基づく推論を用いてボトルネックとなるフェーズを特定します。
どのAIコーディングエージェントがサポートされていますか？
MCP（Model Context Protocol）サーバーをサポートする、Webパフォーマンス向けAIコーディングエージェントならどれでも対応しています。Claude Codeには、自動化された5段階のワークフローを備えた専用スキルがあります。Cursor、VS Code（Copilotエージェントモード）、Windsurf、Gemini CLI、Claude Desktopは、CoreDashのHTTP MCPエンドポイントを介して接続します。取得できるフィールドデータと要素の特定情報は、すべてのクライアントで同一です。
CoreDashは無料ですか？
CoreDashにはCWV Superpowersで機能する無料枠があります。サイトからデータが流れている状態（CoreDashのscriptタグを追加）である必要があります。無料枠にはサンプリングやページビューの上限はありません。MCPアクセスのためのAPIキーはすべてのプランで利用可能です。
クライアントのサイトに使用できますか？
はい。各CoreDashプロジェクトに対して専用のAPIキーがあります。各クライアントサイトにCoreDashを追加し、読み取り専用のAPIキーを生成してMCPクライアントを設定します。エージェントは該当プロジェクトのデータのみを参照します。CWV SuperpowersはMITライセンスであるため、商用利用に関する制限はありません。
オープンソース。ロックインなし。
検査および拡張が可能なCore Web Vitalsの自動化。オーケストレーター、診断モジュール、Chromeトレーシングロジック、およびレポートテンプレートはすべてGitHubに公開されています。仕組みを読み、フォークし、拡張し、ぜひ貢献してください。
無料トライアルを開始 GitHubで見る