AIエージェントがCore Web Vitalsのスーパーパワーを獲得しました
Claude CodeをCoreDashのfield dataに接続します。数百万回のページ読み込みから最悪のボトルネックを特定し、Chromeで根本原因をトレースして、修正コードを記述します。エージェントによるWebパフォーマンス最適化は、レポートの作成ではなく、変更すべき実際のコード行を提示します。
2分でインストール CoreDashの無料トライアルを開始 »Trusted by market leaders · Client results
AIパフォーマンスツールが抱えるデータの問題
大半のAIエージェントはLighthouseのスコアを最適化します。これはシミュレートされたデバイスでの合成スコアであり、Googleはランキングに使用していません。本当に役立つWebパフォーマンスAIエージェントは、Googleと同じデータから出発します。それは、低スペックのスマートフォンを使う実ユーザー、不安定な通信環境、そしてあなたの開発マシンがアクセスしたことのない地域からのデータです。
Lighthouseはランキングシグナルではありません
Googleは過去28日間の実際のChromeユーザーからのCrUXのfield dataに基づいてランキングを決定します。完璧なLighthouseスコアと不合格のフィールドスコアが同時に発生することは日常茶飯事です。モバイルサイトの52%は、実際の環境において少なくとも1つのCore Web Vitalsで不合格になっています。
盲目的なエージェントは盲目的な修正を行う
実ユーザーのデータがなければ、AIエージェントはどのページが遅いのか、どの要素がボトルネックなのか、修正に効果があったのかを把握できません。シミュレーションを最適化して終わらせてしまいます。実際のユーザーの評価は異なります。
手動での調査には何時間もかかる
データをセグメント化する。仮説を立てる。トレースを実行する。確認する。修正案を作成する。シニアパフォーマンスエンジニアは1つの問題につき2〜4時間を費やします。サイト上のすべての遅いページについて、これを掛け合わせてみてください。
INPをラボでシミュレートすることは完全に不可能 Interaction to Next Paintは、実ユーザーがページに対してどのように操作を行うかを測定します。どこをタップするか、どれだけ速くスクロールするか、どのデバイスを手にしているかなど、実ユーザーの行動を再現できる合成ツールはありません。LighthouseはINPを報告すらしていません。AIエージェントがLighthouseを使用している場合、最も深刻なインタラクティビティの問題に気づくことはできません。field dataが唯一のデータソースです。
2つの信頼できる情報源：field dataとブラウザの証拠の融合
CWV Superpowersは、CoreDashの実ユーザーデータと、ターゲットを絞ったChromeトレースを組み合わせます。field dataが何が遅いのかを伝え、Chromeがなぜ遅いのかを伝えます。
CoreDashはエージェントに何が遅いかを伝えます
CoreDashは、すべての実ユーザーのすべてのページ読み込みを追跡します。すべての指標は、問題の原因となっている正確な要素に関連付けられます。サンプリングや上限はありません。
CoreDashが、div.hero > img.mainでLoad Delayが合計時間の52%を占め、LCPが4.2秒であると報告した場合、エージェントは正確にどこを調べるべきかを把握します。これは推測ではなく、数百万の実際のセッションからの測定値です。
このスキルは25以上のCoreDashディメンションをクエリします。LCP要素、要素タイプ、優先度状態、フェーズ内訳、INPインタラクションターゲット、LOAFスクリプト、CLSシフト要素、デバイスタイプ、訪問者タイプ、ネットワーク速度、7日間のトレンドです。
Chromeはエージェントになぜ遅いのかを伝えます
CWV Superpowersは、モバイルエミュレーション（Fast 3G、4倍のCPUスロットリング）を使用してページにアクセスします。そして、CoreDashが特定したボトルネックのフェーズのみをトレースします。
Load Delayがボトルネックの場合、エージェントはネットワークウォーターフォールを調べて検出の遅れを探します。Render Delayの場合、render blockingなスクリプトやフォントの読み込み遅延を探します。
その結果、フィルムストリップのスクリーンショット、ネットワークウォーターフォール、そしてfield dataが明らかにした根本原因を説明する的を絞った証拠が得られます。
絶対的なしきい値ではなく、割合による推論
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. 検出
CoreDashデータをスキャンして、最悪のページと指標を見つけます。低い評価、モバイル、トラフィックの多いページ、そして長い不合格のテールを隠しているp75スコアを優先します。
2. 診断
指標をフェーズに分解します。LCPはTTFB、Load Delay、Load Time、Render Delayです。INPはInput Delay、Processing、Presentationです。割合によってボトルネックを特定します。
3. Chromeトレース
モバイルエミュレーションでページにアクセスします。ステップ2で特定したボトルネックのフェーズのみをトレースします。ネットワークウォーターフォール、フィルムストリップ、およびブロックしているリソースの証拠をキャプチャします。
4. 根本原因
2つの証拠ソースを1つのステートメントに結合します。要素、原因、CoreDashの指標、そしてChromeが確認した内容です。曖昧さはありません。
5. 修正またはレポート
用途に合わせて選択します。ファイル、行、要素、変更前後を示してコードの修正を適用するか、チャートと証拠を含む自己完結型のHTMLレポートを生成するか、あるいはその両方を行います。
25以上のディメンション：field dataが網羅するすべての角度
これらはエージェントがクエリする実際の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、lazy loading）。
典型的な修正： preloadヒントの追加、ヒーロー要素からのlazy loadingの削除、画像フォーマットの最適化、render blockingスクリプトの修正。
AIによるINPの修正：Interaction to Next Paintの診断
3フェーズの内訳： Input Delay、Processing、Presentation。ラボでシミュレートできない唯一の指標です。field dataが唯一のデータソースです。
スクリプトの属性付け： Long Animation Frames（LOAF）が正確なJavaScriptファイルと実行時間を特定します。加えて、インタラクションが発生した際のページの読み込み状態も示します。
典型的な修正： main threadへのyield、評価の遅延、イベントハンドラの分割、巨大なDOMに対するcontent-visibility。
CLS: Cumulative Layout Shift
5つの原因パターン： サイズ指定のない画像、フォントの入れ替え、動的に挿入されたコンテンツ、遅れて読み込まれるリソース、レイアウトプロパティに対するCSSアニメーション。
クロスディメンション： モバイル対デスクトップ、新規対リピート訪問者、高速対低速ネットワークを比較して原因を絞り込みます。
典型的な修正： width/heightの追加、font-display: optional、min-heightの確保、top/leftの代わりにtransformの使用。
根本原因の出力例
「画像の最適化を検討してください」といったものではありません。これが実際の出力です。レビューしてマージできるほど具体的です。
根本原因:
/product/running-shoes-42のLCP画像 div.hero-banner > img.product-main は、preloadヒントがなく、fetchpriority="high"も設定されていないため、検出が1,980ms遅れています。
CoreDashの証拠:
モバイルのp75でLCPは3,820ms（Poor）です。Load Delayがボトルネックとなっており、1,980ms（全体の52%）を占めています。優先度状態：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ウォーターフォール）。
修正: 変更前後を示すdiffを含む、2行のコード変更。
比較：CWV Superpowersの位置付け
ツールごとに解決する問題は異なります。ここでは、それぞれのツールが実際に何を行っているかを比較します。
| 機能 | CoreDash + CWV Superpowers | Chrome DevTools MCP | PSI / Lighthouse MCP |
|---|---|---|---|
| データソース | 実ユーザー（28日間のfield data） | 単一のラボセッション | シミュレートされた単一の読み込み |
| INP測定 | ✓ 実際のインタラクション | ✗ 実ユーザーなし | ✗ 測定不可 |
| フェーズ内訳 | ✓ LCP、INP、CLSフェーズ | ~ 手動分析 | ✗ スコアのみ |
| 要素の属性付け | ✓ 正確な要素と優先度 | ~ 見るべき場所を知っていれば | ~ 一般的な提案 |
| 割合による推論 | ✓ %によるボトルネック特定 | ✗ 絶対値 | ✗ 絶対値 |
| セグメント比較 | ✓ デバイス、国、ブラウザ | ✗ 単一構成 | ✗ 単一構成 |
| トレンド検出 | ✓ 7日間の変動 | ✗ 特定時点のみ | ✗ 特定時点のみ |
| Chromeトレース | ✓ フェーズごとにターゲット化 | ✓ 完全なアクセス | ✗ ブラウザなし |
| コード修正 | ✓ ファイル＋行＋diff | ~ エージェント依存 | ~ 一般的なアドバイス |
注： Chrome DevTools MCPは補完的なものです。CWV Superpowersは、field dataがボトルネックを特定した後に、ターゲットを絞ったトレースのためにこれを使用します。これらは組み合わせて使うのが最適です。
レポート：Slackへの投稿やJiraへの添付
自己完結型のHTMLです。依存関係やビルドステップはありません。すべてがインライン化された1つのファイルです。
完全なレポート（Chromeあり）
色分けされた指標カード、フェーズ内訳チャート、重要な瞬間（first paint、LCP、loaded）のフィルムストリップのスクリーンショット、ネットワークウォーターフォールのSVG、根本原因分析、そして変更前後のコードを含む推奨される修正案です。
RUMのみのレポート
同じ指標カードとフェーズ内訳に加えて、要素の属性付けと根本原因分析を含みます。フィルムストリップやウォーターフォールはありませんが、field dataが真の情報源であるため、診断の質は同じです。
あらゆるMCPクライアントで動作
Claude Code: 自動化されたワークフローを備えた完全なスキル。検出、診断、Chromeトレース、コード修正、レポート生成を行います。推奨。
Cursor: CoreDash MCPを利用したプラグインインストール。エディタ内で完全な診断とコード修正を行います。
VS Code、Windsurf、Gemini CLI: HTTP MCPサーバーをサポートするすべてのクライアントがCoreDashに接続します。同じfield data、同じ属性付けが利用できます。
Client Success
Don't just take my word for it
Head of Engineering, Swift
"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."
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."
Product Lead, Miro
"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."
Lead Developer, Alza
"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."
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."
VP Engineering, Loop
"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."
VP Engineering, People Inc
"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."
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.
CTO, DPG Media
"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."
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."
2分でセットアップ完了
ターミナルでの自動化されたCore Web Vitals診断。データが流れているCoreDashアカウントが必要です。無料枠でも機能します。
Claude Code
claude mcp add --transport http coredash https://app.coredash.app/api/mcp
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers
claude --chrome
最大のCWVの問題を見つけて修正してください。 初回接続時に/mcpを実行し、coredashを選択してAuthenticateを選びます。ブラウザでCoreDashのログイン画面が開き、プロジェクトを選択して承認すると、Claude Codeは自動更新される短寿命のOAuthトークン（1時間のアクセス、30日間の更新）を保存します。これはいつでも取り消し可能です。キーを貼り付ける必要はありません。
ヘッドレスやCIでの使用にAPIキーを希望しますか？CoreDashのProject Settings → API Keys (MCP)から生成したAPIキーを、--header "Authorization: Bearer cdk_YOUR_API_KEY"としてコマンドに追加します。表示は一度だけです。SHA-256ハッシュとして保存されます。読み取り専用です。
Cursor
/plugin-add cwv-superpowers
CoreDashを.cursor/mcp.jsonに追加します:
{
"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のトレースはオプションです。これなしでも、CoreDashのデータのみに基づいて、完全なfield data診断、フェーズ内訳、要素の属性付け、およびコード修正の提案が得られます。Chromeを使用すると、フィルムストリップのスクリーンショット、ネットワークウォーターフォール、および根本原因の視覚的な確認が追加されます。どちらのモードでもレポートは生成されます。
AIエージェントでLighthouseを実行するのとはどう違うのですか？
Lighthouseは、あなたのマシンで1回だけ合成ロードを実行します。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エンドポイント経由で接続します。field dataと属性付けは、すべてのクライアントで同一です。
CoreDashは無料ですか？
CoreDashにはCWV Superpowersで機能する無料枠があります。あなたのサイトからデータが流れている必要があります（CoreDashのscriptタグを追加してください）。無料枠にはサンプリングやページビューの上限はありません。MCPアクセス用のAPIキーは、すべてのプランで利用できます。
これをクライアントのサイトに使用できますか？
はい。CoreDashの各プロジェクトで、専用のMVP APIキーを無制限に作成できます。クライアントの各サイトにCoreDashを追加し、読み取り専用のAPIキーを生成してMCPクライアントを設定します。エージェントはそのプロジェクトのデータのみにアクセスします。CWV SuperpowersはMITライセンスであるため、商用利用に制限はありません。
オープンソース。ロックインなし。
検査や拡張が可能なCore Web Vitalsの自動化。オーケストレーター、診断モジュール、Chromeトレースロジック、およびレポートテンプレートはすべてGitHubにあります。仕組みを読んでください。フォークしてください。拡張してください。コントリビュートしてください。
無料トライアルを開始 GitHubで見る