INP診断プレイグラウンド
イベントチェーンをモデル化して Interaction to Next Paint を解析します。
PerformanceEventTiming のJSONを貼り付けるかイベントを手動で作ると、INPの集計が即座に表示されます。
インタラクションイベントを追加
PerformanceEventTiming 由来のJSONを追加するか、イベントを作成してください。
ツール概要
Interaction to Next Paint をフィールドデータを待たずに見積もり、イベントチェーンから改善策を検討できます。
使い方
- PerformanceEventTiming JSONを取り込むか、イベントを手動で追加。
- 処理時間や表示遅延を調整し、ラボ調査に近いプロファイルを再現。
- p75や最悪ケースを確認し、次のアクションをチームと共有。
活用例
- 実験を出す前に対策案をプロトタイピング。
- INP劣化を再現可能なチェーンとして記録。
- デザイナーやPMへINP構成要素を視覚的に説明。
ポイント・知識
- Chrome Trace Viewer と併用して実際のフレームを検証。
- 実ユーザーデータのパーセンタイルと定期的に突き合わせましょう。
- 書き出したCSVをバグトラッカーに添付すると共通言語化に役立ちます。