webperf-interaction

WebPerf：インタラクションとアニメーション

Chrome DevTools でウェブパフォーマンスを測定する JavaScript スニペットです。

スクリプトの実行

1. mcp__chrome-devtools__evaluate_script でスクリプトを実行し、返されたオブジェクトを読み取ります。スクリプトはコンソールに出力しないため、返されたオブジェクトが結果です。結果には、references/schema.md の説明にある script、status、指標データ（value、rating、details、items、issues）が含まれます。
2. status が "tracking" の場合、スクリプトはページの監視を続けます。操作を行った後、別の mcp__chrome-devtools__evaluate_script 呼び出しで getDataFn に指定された関数（例：getINP()）を呼び出し、返されたオブジェクトを読み取ります。
3. status が "error" または "unsupported" の場合は、error を確認します。ページがまだ読み込まれていないか、ブラウザーが API に対応していない可能性があります。

Chrome DevTools MCP を使わない場合は、webperf-snippets CLI で同じスニペットを実行します。この CLI はヘッドレス Chromium でページを読み込み、同じ結果オブジェクトを出力します。実行コマンドは npx webperf-snippets <url> --snippet <Name> --json です。ここで <Name> は .js を除いたスクリプト名です。Playwright と Chromium が必要です（npm install --save-dev webperf-snippets playwright を実行し、その後 npx playwright install chromium を実行してください）。トラッキング用スニペットでは、操作を実行するために --interact-script <file> を指定します。

スクリプト

• scripts/DOM-Size-and-Depth.js — DOM のサイズと深さ
• scripts/Forced-Synchronous-Layout.js — 強制同期レイアウトの検出
• scripts/Input-Latency-Breakdown.js — 入力レイテンシの内訳
• scripts/Interactions.js — インタラクション
• scripts/Layout-Shift-Loading-and-Interaction.js — レイアウトシフトのトラッキング
• scripts/Long-Animation-Frames-Helpers.js — LoAF ヘルパー
• scripts/Long-Animation-Frames-Script-Attribution.js — 長いアニメーションフレームのスクリプト帰属分析
• scripts/Long-Animation-Frames.js — 長いアニメーションフレーム（LoAF）
• scripts/LongTask.js — 長いタスク
• scripts/Scroll-Performance.js — スクロールパフォーマンス分析

よくあるワークフロー

インタラクションパフォーマンスの包括的な監査

ユーザーがインタラクション分析または「応答性を監査して」と依頼した場合：

1. Interactions.js - タイミングとともにすべてのユーザーインタラクションを一覧表示します
2. Input-Latency-Breakdown.js - インタラクションの各フェーズを分析します
3. Long-Animation-Frames.js - アニメーションフレームをブロックする処理を検出します
4. LongTask.js - メインスレッドをブロックする長いタスクを特定します
5. Scroll-Performance.js - スクロールの滑らかさを測定します

INP の詳細分析

INP が遅い場合（>200ms）、またはユーザーが「INP をデバッグして」「インタラクションが遅い」と依頼した場合：

1. Interactions.js - どのインタラクションが遅いかを特定します
2. Input-Latency-Breakdown.js - 入力遅延、処理時間、表示遅延に分けて分析します
3. Long-Animation-Frames.js - インタラクションをブロックする 50ms 超のアニメーションフレームを探します
4. Long-Animation-Frames-Script-Attribution.js - ブロックの原因となっているスクリプトを特定します
5. Long-Animation-Frames-Helpers.js - 詳細なタイミング情報と帰属分析用ヘルパーを取得します

スクロールのジャンク調査

ユーザーが「スクロールがカクつく」「スクロールがぎこちない」「スクロールパフォーマンスに問題がある」と報告した場合：

1. Scroll-Performance.js - スクロールの滑らかさとフレーム落ちを測定します
2. Long-Animation-Frames.js - ジャンクの原因となるフレーム（>50ms）を検出します
3. Layout-Shift-Loading-and-Interaction.js - スクロール中のレイアウトシフトを確認します
4. Long-Animation-Frames-Script-Attribution.js - スクロール中に実行されるスクリプトを特定します

メインスレッドのブロック分析

ページの応答性が低い場合、またはユーザーが「ページがフリーズするのはなぜ」と尋ねた場合：

1. LongTask.js - メインスレッドをブロックする 50ms 超のタスクをすべて一覧表示します
2. Long-Animation-Frames.js - アニメーションフレームのタイミングと照合します
3. Long-Animation-Frames-Script-Attribution.js - ブロックの原因を特定のスクリプトに割り当てます
4. webperf-loading スキルと相互参照します：
   • JS-Execution-Time-Breakdown.js（スクリプトの解析／実行時間）
   • First-And-Third-Party-Script-Info.js（ブロックの原因となるサードパーティを特定）

インタラクション中のレイアウトシフト

ユーザーから「クリックすると要素が動く」と報告された場合や、インタラクション中にCLSの問題が発生した場合：

1. Layout-Shift-Loading-and-Interaction.js - 読み込み時とインタラクション時のシフトを切り分けます
2. Interactions.js - シフトと個別のインタラクションの相関を確認します
3. CLS.js（Core Web Vitals スキルから） - CLSの合計値を測定します
4. webperf-media スキルと照合します：
   • Image-Element-Audit.js（寸法が指定されておらず、シフトの原因となる画像）

アニメーションのパフォーマンス分析

アニメーションが遅く感じられる場合や、ユーザーから「アニメーションのパフォーマンスをデバッグして」と依頼された場合：

1. Long-Animation-Frames.js - レンダリングに時間がかかりすぎているフレームを特定します
2. Long-Animation-Frames-Helpers.js - フレームのタイミングを詳細に分析します
3. Long-Animation-Frames-Script-Attribution.js - フレームを遅延させているスクリプトを特定します
4. Scroll-Performance.js - スクロールアニメーションが関係する場合に実行します
5. DOM-Size-and-Depth.js - DOMが大規模または深いことで、スタイルとレイアウトの各処理が高コストになっていないか確認します

インタラクションに対するサードパーティスクリプトの影響

インタラクションが遅く、サードパーティスクリプトが疑われる場合：

1. Long-Animation-Frames-Script-Attribution.js - 長いフレームに含まれるサードパーティスクリプトを特定します
2. LongTask.js - 長いタスクの発生頻度を測定します
3. webperf-loading スキルと照合します：
   • First-And-Third-Party-Script-Info.js（すべてのサードパーティスクリプトを一覧表示します）
   • First-And-Third-Party-Script-Timings.js（スクリプトの読み込みによる影響を測定します）
   • Script-Loading.js（ブロッキングスクリプトを確認します）

判断ツリー

結果に応じて後続のスニペットを自動実行するには、この判断ツリーを使用します：

Interactions.js の実行後

• 200msを超えるインタラクションがある場合 → 遅いインタラクションに対して Input-Latency-Breakdown.js を実行します。また、公式のINP測定には webperf-core-web-vitals:INP.js も実行します
• 200msを超えるインタラクションが多い場合 → メインスレッドが混雑しています。次を実行します：
  1. Long-Animation-Frames.js（ブロッキングフレーム）
  2. LongTask.js（長いタスク）
  3. Long-Animation-Frames-Script-Attribution.js（原因となるスクリプト）
• 特定の種類のインタラクション（例：クリックとキーボード操作）のみ遅い場合 → その種類のインタラクションに焦点を当てます
• ページの読み込み中にインタラクションが発生する場合 → webperf-loading:JS-Execution-Time-Breakdown.js と照合します

Input-Latency-Breakdown.js の実行後

• 入力遅延が50msを超える場合 → メインスレッドがビジーでした。次を実行します：
  1. Long-Animation-Frames.js（何が処理をブロックしていたか）
  2. LongTask.js（インタラクション前の長いタスク）
• 処理時間が100msを超える場合 → イベントハンドラーの負荷が高くなっています。次を実行します：
  1. Long-Animation-Frames-Script-Attribution.js（該当するスクリプト）
  2. webperf-loading:First-And-Third-Party-Script-Info.js（サードパーティの関与）
• 表示遅延が50msを超える場合 → レンダリングがボトルネックです。次を実行します：
  1. Long-Animation-Frames.js（フレームのレンダリング時間）
  2. Layout-Shift-Loading-and-Interaction.js（レイアウト処理の有無）

Long-Animation-Frames.js の実行後

• 50msを超えるフレームが多い場合 → 原因を特定するため、Long-Animation-Frames-Script-Attribution.js を実行します
• 100msを超えるフレームがある場合 → 重大なブロッキングが発生しています。次を実行します：
  1. Long-Animation-Frames-Script-Attribution.js（詳細な原因分析）
  2. LongTask.js（関連する長いタスク）
  3. webperf-loading:JS-Execution-Time-Breakdown.js（スクリプト実行のコスト）
• スクロール中にフレームが発生する場合 → 影響を測定するため、Scroll-Performance.js を実行します
• ページの読み込み中にフレームが発生する場合 → webperf-loading:Event-Processing-Time.js と照合します

Long-Animation-Frames-Script-Attribution.js の実行後

• サードパーティスクリプトが長いフレームの原因の場合 → 次を実行します。
  1. webperf-loading:First-And-Third-Party-Script-Info.js（すべてのサードパーティスクリプトを一覧表示）
  2. webperf-loading:Script-Loading.js（読み込み戦略を確認）
  3. 問題のあるスクリプトの遅延実行または削除を推奨します
• ファーストパーティスクリプトが長いフレームの原因の場合 → 次を推奨します。
  • コード分割
  • イベントハンドラーのデバウンス／スロットリング
  • 重い計算に Web Workers を使用
• 強制的なリフロー／レイアウトが検出された場合 → DOM 操作のパターンを分析します
• スタイルの再計算またはレイアウトに時間がかかっている場合 → ツリーのサイズを確認するため、DOM-Size-and-Depth.js を実行します

LongTask.js の実行後

• 長いタスクが多数（>5）ある場合 → メインスレッドが逼迫しています。次を実行します。
  1. Long-Animation-Frames-Script-Attribution.js（詳細な原因特定）
  2. webperf-loading:JS-Execution-Time-Breakdown.js（スクリプト実行の分析）
  3. webperf-loading:First-And-Third-Party-Script-Info.js（負荷の高いスクリプトを特定）
• 長いタスクが 500ms を超える場合 → 重大なブロッキングが発生しています。次を調査します。
  • 同期的なサードパーティスクリプト
  • Web Workers を使用しない重い計算
  • 過剰な DOM 操作
• 長いタスクが操作と相関している場合 → 影響を確認するため、Interactions.js を実行します

DOM-Size-and-Depth.js の実行後

• 要素の総数が > 1400 の場合 → 長いリストの仮想化と、画面外のコンテンツのオンデマンド読み込みを推奨します
• 深さが > 32 の場合 → コンポーネントによって追加されたラッパー要素のフラット化を推奨します
• 単一の親要素に > 60 個の子要素がある場合 → そのコンテナーにページネーションまたは仮想化を推奨します
• DOM が制限内でも操作が遅い場合 → 原因となるスクリプトを特定するため、Long-Animation-Frames-Script-Attribution.js を実行します

Scroll-Performance.js の実行後

• スクロール FPS が < 30 の場合 → 深刻なカクつきが発生しています。次を実行します。
  1. Long-Animation-Frames.js（スクロール中のフレームのブロッキング）
  2. Long-Animation-Frames-Script-Attribution.js（スクロール中に実行されるスクリプト）
  3. Layout-Shift-Loading-and-Interaction.js（スクロール中のレイアウト処理）
• スクロール FPS が 30-50 の場合 → 目立つカクつきが発生しています。次を調査します。
  • スクロールイベントハンドラー
  • パッシブイベントリスナー
  • CSS の will-change プロパティ
• スクロール FPS が > 50 の場合 → 良好ですが、スクロール中のレイアウトシフトを確認します

Layout-Shift-Loading-and-Interaction.js の実行後

• ページ読み込み中にシフトが発生する場合 → webperf-core-web-vitals:CLS.js と照合します
• 操作中にシフトが発生する場合 → INP と UX に影響します。次を調査します。
  1. 動的なコンテンツの挿入
  2. 寸法を指定せずに読み込まれる画像／広告
  3. フォントの切り替え（webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js を実行）
• スクロール中にシフトが発生する場合 → 影響を測定するため、Scroll-Performance.js を実行します

Long-Animation-Frames-Helpers.js の実行後

これはユーティリティスニペットです。結果を次の用途に使用します。

• フレームのタイミングを詳細に把握する
• スクリプトの原因を正確に特定する
• スタイル／レイアウト／ペイントの各フェーズを測定する
• 自動的な後続処理はありません。データを次の手順の判断に活用してください

パフォーマンス予算のしきい値

以下のしきい値に達した場合、追加分析を自動的に開始します。

INP のしきい値：

• 良好：≤ 200ms → モニタリングし、対応は不要です
• 改善が必要：200-500ms → Run Input-Latency-Breakdown.js を実行します
• 不良：> 500ms → INP の完全なデバッグワークフロー（5 snippets）を実行します

長いアニメーションフレーム：

• 警告：> 50ms → Run Long-Animation-Frames-Script-Attribution.js を実行します
• 重大：> 100ms → メインスレッドのブロックに関する完全なワークフローを実行します

長時間タスク：

• 警告：> 50ms → 発生頻度をモニタリングします
• 重大：> 200ms または 1 秒あたり 5 件超のタスク → アトリビューションとスクリプト分析を実行します

スクロールのパフォーマンス：

• 良好：≥ 50 FPS → モニタリングします
• 改善が必要：30-50 FPS → Run Long-Animation-Frames.js を実行します
• 不良：< 30 FPS → スクロールのカクつきに関する完全なワークフローを実行します

インタラクション頻度：

• 1 秒あたり 10 回を超えるインタラクションの場合 → ユーザーが積極的に操作しているため、INP の最適化を優先します
• 5 秒あたり 1 回未満のインタラクションの場合 → インタラクションの頻度が低いため、最初のインタラクションの応答性に注力します

複数指標の相関

複数のインタラクション指標が不良の場合：

• 長時間タスクと長いアニメーションフレームの両方が検出された場合 → 根本原因は共通しています：

  1. Run Long-Animation-Frames-Script-Attribution.js を実行します
  2. JavaScript の実行負荷が高い可能性があります
  3. コード分割または Web Workers を検討します

• INP が遅く、CLS が高い場合 → インタラクションによってレイアウトシフトが発生しています：

  1. Run Layout-Shift-Loading-and-Interaction.js を実行します
  2. シフトのタイミングとインタラクションのタイミングを照合します
  3. 動的なコンテンツの挿入がないか確認します

• スクロールのカクつきと長いアニメーションフレームが発生する場合 → スクロールハンドラーがメインスレッドをブロックしています：

  1. スクロール中に Run Long-Animation-Frames-Script-Attribution.js を実行します
  2. パッシブではないスクロールリスナーがないか確認します
  3. スクロールによってトリガーされるアニメーションを監査します

参考資料

• references/snippets.md — 各スクリプトの説明としきい値
• references/schema.md — スクリプト出力を解釈するための戻り値スキーマ