インタラクション to Next Paint (INP) は、クリック、タップ、キーの押下などのユーザーのインタラクションに Web サイトがどれだけ早く反応するかを測定します。 このスコアカード ルールは、ユーザーをイライラさせたり、エンゲージメントやコンバージョンに悪影響を与える可能性のある応答性の問題を特定して修正するのに役立ちます。
このスコアカードルールについて
次のペイント ルールへのこのインタラクションは、デジタル エクスペリエンス成熟度モデルのレベル 2 (プロアクティブ) の一部です。ページがユーザー インタラクションに迅速に応答するかどうかを評価し、スムーズで応答性の高いユーザー エクスペリエンスを保証します。
これが重要である理由:インタラクションの応答が遅いと、インターフェースが遅くて応答がないように感じられ、ユーザーが複数回クリックしたり、タスクを放棄したり、アプリケーションに対する信頼を失ったりする原因になります。INP スコアが速いということは、ユーザーにとってインターフェースが軽快で信頼できるものであることを示します。
このルールの仕組み
このルールは、ページのインタラクションから次のペイントまでの (INP) 時間の 75 番目のパーセンタイルが 200 ミリ秒を超えているかどうかを評価します。これは、Google の「良好な」応答性の閾値です。 INP は、ユーザーがインタラクションを開始してからブラウザが次のビジュアル更新を表示するまでの時間を測定します。
重要な注意: INP は秒単位ではなくミリ秒単位で測定されます。メトリクスは、ページ訪問中の最悪のインタラクション応答性をキャプチャします。
スコアを理解する
- パス（緑）： 75番目のパーセンタイルINPが200ms以下（良好）
- 不合格（赤）: 75 パーセンタイル INP が 200 ミリ秒を超える（改善が必要または不良）
- 目標:最適なユーザー体験のために INP 時間を 200ms 未満に達成
Google の INP 閾値:
- 良好: 200ms以下
- 改善が必要: 200ms～500ms
- 悪い: 500ミリ秒以上
INP の測定内容: INP は、クリック、タップ、キーボード入力などのユーザー インターフェイス インタラクションの応答性をキャプチャします。 インタラクションの開始からブラウザがユーザーに視覚的な応答を提示できるまでの時間を測定します。
インタラクションの応答性を理解する
INP は、インタラクション処理の 3 つのフェーズを測定します。
入力遅延
ユーザーインタラクション（クリック／タップ）からイベントハンドラーが起動するまでの時間
- メインスレッドが他のタスクでビジー状態になっていることが原因です
- JavaScriptの実行時間を短縮することで改善できる
処理時間
イベントハンドラの実行とアプリケーション状態の更新に費やされた時間
- JavaScriptコード実行とDOM更新を含む
- 効率的なコードとアルゴリズムを通じて最適化できる
プレゼンテーションの遅延
ハンドラが完了してからブラウザが視覚的な更新を表示するまでの時間
- スタイル計算、レイアウト、ペイント操作が含まれます
- CSSを最適化し、DOMの複雑さを軽減することで改善できます
INPが遅い場合の一般的な原因
- 重いJavaScriptの実行:複雑な計算がメインスレッドをブロックする
- 大規模なDOM操作:レイアウトの再計算を必要とする大規模な変更
- 非効率的なイベントハンドラ:クリック/タップハンドラ内のコードが適切に最適化されていない
- サードパーティのスクリプト:インタラクション処理を妨害する外部コード
INPスコアを向上させる方法
スコアにインタラクションの応答性が低いと表示された場合は、次の手順に従ってパフォーマンスを最適化してください。
1. 遅いインタラクションを特定する
- New Relicブラウザ監視を使用: INPデータを確認して、どのインタラクションが最も遅いかを特定します
- インタラクションパターンを分析する:クリック、フォーム入力、ナビゲーションなど、どのユーザーアクションの応答性が低いかを把握する
- デバイスとネットワークのパターンを確認する:低速 INP が特定のデバイスまたは接続タイプに影響しているかどうかを判断します。
- 重要なインタラクションを優先する:ユーザーのタスクとコンバージョンに不可欠なインタラクションに焦点を当てる
2. JavaScriptのパフォーマンスを最適化する
メインスレッドのブロッキングを減らす:
setTimeout()またはrequestIdleCallback()- 負荷の高い計算タスクにはWebワーカーを使用する
- 必要なJavaScriptだけをロードするためのコード分割を実装する
イベント ハンドラーを最適化します。
- スクロールやサイズ変更などの頻繁なイベントをデバウンスする
- 多くの要素でパフォーマンスを向上させるには、イベント委任を使用します。
- イベントハンドラーの外でDOMと計算をキャッシュする
- インタラクションハンドラでの同期操作を避ける
コード効率を向上:
- JavaScript のパフォーマンスをプロファイリングしてボトルネックを特定する
- アルゴリズムとデータ構造を最適化する
- 未使用のコードと依存関係を削除する
- 効率的なDOM操作技術を使用する
3. レンダリングパフォーマンスを最適化する
レイアウトのスラッシングを軽減:
- レイアウトの再計算を最小限に抑えるためにDOMの読み取りと書き込みをバッチ処理する
- レイアウトプロパティの代わりに、アニメーションに CSS トランスフォームと不透明度を使用する
- 長いリストに仮想スクロールを実装する
- 強制的な同期レイアウト操作を避ける
CSS を合理化:
- 複雑なCSSセレクターを最小限に抑える
- スタイル計算を必要とするDOM要素の数を減らす
- CSSコンテインメントを使用してレンダリング作業を分離する
- CSSアニメーションとトランジションを最適化する
4. パフォーマンスのベストプラクティスを実装する
最新の Web API を使用します。
- オフスクリーンコンテンツに
content-visibility実装する - スムーズなアニメーションには
requestAnimationFrame()使用します - ブラウザのキャッシュとサービスワーカーを活用する
- 適切なリソースの優先順位付けを実施する
監視とテスト:
- Chrome DevTools のパフォーマンス パネルを使用してインタラクションをプロファイリングする
- さまざまなデバイス、特に低価格のモバイルデバイスでテストする
- New Relic Browserを使用してリアルユーザー監視を実装する
- INP回帰検出のアラートを設定する
実装ガイダンス
INP監視の設定
- Core Web Vitalsデータ収集を有効にしてNew Relicブラウザ監視を設定する
- ユーザー体験の目標に基づいて適切な測定値を設定する
- 最適化を実施する前にベースライン測定を確立する
- さまざまなページやユーザーセグメントにわたる INP パフォーマンスを追跡するためのダッシュボードを作成します。
実用的なアラートの作成
INP パフォーマンス低下のアラートを設定します。
- Good閾値: 75番目のパーセンタイルが200msを超えた場合
- Poor 閾値: 75 番目のパーセンタイルが 500ms を超えるときの重大なアラート
- 傾向監視:前週比 20% の劣化を集計
- セグメント固有のアラート:モバイルとデスクトップのパフォーマンスを個別に監視
最適化ワークフローの構築
- 定期的な評価: INP パフォーマンス データの毎月のレビューをスケジュールします。
- 優先順位付けのフレームワーク:トラフィックが多くINPスコアが低いページに重点を置く
- A/Bテスト:ユーザーセグメントを使用して最適化をテストし、改善を検証します。
- エスカレーションプロセス:閾値を超えた場合にエンジニアリングが関与するための明確なパスを定義する
重要な考慮事項
カスタム評価:これらのガイドラインは基礎を提供しますが、アプリケーションごとに異なります。特定のユーザー体験の目標とビジネス目標に基づいて INP のパフォーマンスを評価します。 パフォーマンス目標を設定するときは、ユーザー ベース、典型的なインタラクション パターン、重要なユーザー ジャーニーを考慮してください。
継続的な改善: Web パフォーマンスの最適化は継続的なプロセスです。ユーザーの期待、ブラウザの機能、Web 標準は常に進化しています。定期的に INP 戦略を見直し、測定基準を更新し、最適化手法を適応させて、優れたインタラクション応答性を維持します。
総合的なアプローチ: INP は、包括的なパフォーマンス戦略の一部として使用すると最も効果的に機能します。他のCore Web Vitals (CLS および LCP) および従来のパフォーマンス メトリクスと組み合わせて、ユーザー エクスペリエンスを完全に可視化します。
次のステップ
このスコアカード ルールを実装すると次のようになります。
- L3 Core Web Vitals LCPスコアカードルールを確認して、Core Web Vitalsの最適化を完了します。
- JavaScript エラー追跡を調べてインタラクションの問題を特定します
- 包括的なフロントエンド監視のためにAJAX 監視を実装する
- 体系的なデジタルエクスペリエンスの最適化のためのエクスペリエンス実装ロードマップを検討する