無料＆オープンソース

あなたのAIエージェントがCore Web Vitalsのスーパーパワーを手に入れました

Claude CodeをCoreDashのフィールドデータに接続します。何百万ものページロードから最悪のボトルネックを見つけ、Chromeで根本原因をトレースし、修正コードを記述します。単なるレポートではなく、変更すべき実際のコード行を提示するエージェント型Webパフォーマンスです。

2分でインストール CoreDashの無料トライアルを開始 »
claude --chrome
25+
クエリされたRUMディメンション
28 days
のリアルユーザーデータ
5 agents
Claude、Cursor、Windsurf、VS Code、Gemini
0
使用されたLighthouseスコア

Trusted by market leaders · Client results

whowhatwearhappyhorizonharvardperionsnvmy work featured on web.devdpg mediacompareloopearplugsmonarcherasmusmcsaturnvpnmarktplaatskpnaleteianina carenestleadevintaebayfotocasaworkiva

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をレポートしたとき、エージェントはどこを見るべきかを正確に把握しています。推測ではなく、何百万もの実際のセッションからの測定値です。

このスキルは25以上のCoreDashディメンションをクエリします：LCP要素、要素タイプ、優先度ステータス、フェーズの内訳、INPインタラクションターゲット、LOAFスクリプト、CLSのシフト要素、デバイスタイプ、訪問者タイプ、ネットワーク速度、7日間のトレンド。

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. 発見

CoreDashデータをスキャンして、最悪のページとメトリクスを見つけます。低い評価、モバイル、トラフィックの多いページ、そして長い「Poor」の裾野を隠している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以上のディメンション：フィールドデータがカバーするあらゆる角度

これらは、エージェントがクエリする実際のCoreDashのディメンションです。サマリーではなく、全体像です。

LCP (Largest Contentful Paint)

LCP要素 要素タイプ 優先度ステータス TTFBフェーズ Load Delay Load Time Render Delay

INP (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、遅延読み込み）。

代表的な修正： プリロードヒントの追加、ヒーローからの遅延読み込みの削除、画像フォーマットの最適化、レンダリングブロック・スクリプトの修正。

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を使用。

実際の例

根本原因のステートメントはどのようなものか

「画像の最適化を検討してください」といったものではありません。これが実際の出力です。レビューしてマージできるほど具体的です。

根本原因：

/product/running-shoes-42 のLCP画像 div.hero-banner > img.product-main は、プリロードヒントがなく、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ウォーターフォール）。

修正： 変更前/変更後の差分を含む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あり）

色分けされたメトリクスカード、フェーズの内訳チャート、重要な瞬間（first paint、LCP、loaded）のフィルムストリップのスクリーンショット、ネットワークウォーターフォール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

Expedia Group

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."

Adevinta

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.

Zalando

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."

Alza

Lead Developer, Alza

★★★★★

"Transferred knowledge to our engineering team. We can now diagnose and resolve performance issues independently."

Rituals

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."

DPG Media

CTO, DPG Media

★★★★★

"He found bottlenecks in our component library that we'd missed for two years. Performance gains were visible within days."

Miro

Product Lead, Miro

★★★★★

"Our dashboards were choking on main-thread work. 25% reduction in CPU usage. Users noticed immediately."

Swift

Head of Engineering, Swift

★★★★★

"Layout shift on checkout eliminated entirely. Went from 0.4 to 0.02 CLS across mobile and desktop."

People Inc

VP Engineering, People Inc

★★★★★

"Seven brands, seven different stacks. Every single one got faster. No compromises on what makes each property unique."

Loop

VP Engineering, Loop

★★★★★

"Mobile load time down 800ms. 7% lift in checkout conversion. The ROI justified the investment immediately."

2分で実行可能

ターミナルでの自動化されたCore Web Vitals診断です。データが流れているCoreDashアカウントが必要です。無料枠でも機能します。

Claude Code

# 1. CoreDash MCPサーバーの追加
claude mcp add --transport http coredash \
  https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

# 2. CWV Superpowersのインストール
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# 3. Chromeで開始（オプション、推奨）
claude --chrome

# 4. 実行
私の最大のCWVの問題を見つけて修正してください。

CoreDash → Project Settings → API Keys (MCP) からAPIキーを取得します。一度だけ表示されます。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のデータのみに基づいた、完全なフィールドデータ診断、フェーズの内訳、要素アトリビューション、およびコード修正の提案を得ることができます。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エンドポイントを介して接続します。フィールドデータとアトリビューションは、すべてのクライアントで同一です。

CoreDashは無料ですか？

CoreDashには、CWV Superpowersで機能する無料枠があります。サイトからデータが流れている必要があります（CoreDashのスクリプトタグを追加してください）。無料枠にはサンプリングやページビューの上限はありません。MCPアクセスのためのAPIキーは、すべてのプランで利用可能です。

これをクライアントのサイトに使用できますか？

はい。各CoreDashプロジェクトに対して、無制限の 専用MVP APIキーを作成できます。各クライアントサイトにCoreDashを追加し、読み取り専用のAPIキーを生成して、MCPクライアントを構成します。エージェントは、そのプロジェクトのデータのみを参照します。CWV SuperpowersはMITライセンスであるため、商用利用に制限はありません。

MITライセンス

オープンソース。ロックインなし。

調査や拡張が可能なCore Web Vitalsの自動化です。オーケストレーター、診断モジュール、Chromeトレースロジック、およびレポートテンプレートはすべてGitHubにあります。仕組みを読んでください。フォークしてください。拡張してください。貢献してください。

無料トライアルを開始 GitHubで表示