[object Object]

Interaction to Next Paint (INP) は、Web ページの全体的なインターフェイスの応答性を評価するために導入された公式の Google Core Web Vital 指標です。

ページ読み込み時の最初のインタラクションのみを評価する初回入力遅延 (FID) とは異なり、INP は、ユーザーがページにアクセスする全期間を通じて発生するすべてのユーザーインタラクション (クリック、タップ、およびキーボード入力) の遅延を観察します。

回答優先のまとめ

Interaction to Next Paint (INP) は、ユーザーがページを操作 (クリック、タップ、またはキーを押す) してからブラウザーが更新されたビジュアルフレームを画面に表示するまでの経過時間を測定する Core Web Vital メトリクスです。INP 遅延は、入力遅延、処理期間、およびプレゼンテーション遅延の 3 つのサブ部分で構成されます。合格 INP スコアは、実際のユーザーの訪問の 75 パーセンタイルで 200 ミリ秒以下です。2024 年 3 月、INP は Google の検索ランキングアルゴリズムにおける First Input Delay (FID) を正式に置き換えました。

INP スコアのしきい値と評価スケール

応答性の高いユーザーエクスペリエンスを提供するには、Web ページは、実際のユーザーのフィールド訪問の 75 パーセンタイルで評価される INP の次の Core Web Vitals しきい値を満たしている必要があります。

良い: $\le 200\text {ms} $ (緑) - ユーザーにとって瞬時に感じられる、高速で滑らかな UI 応答。
改善の必要性: $> 200\text {ms} $ および $\le 500\text {ms} $ (オレンジ色) - ユーザーエンゲージメントに影響を与える、クリックまたはタップ時の顕著な遅延。
悪い: $> 500\text {ms} $ (赤) - 深刻なインターフェイスのフリーズとメインスレッドのブロックにより、ユーザーのフラストレーションと高い直帰率が発生します。

INP レイテンシ	パフォーマンス評価	ユーザーエクスペリエンスへの影響	Google 検索ランキングのステータス
$\le 200\text {ms} $	良い	タップまたはクリックすると即座に視覚的なフィードバックが得られます。	Core Web Vitals 評価の完全合格点。
$201\text {ms} - 500\text {ms} $	改善が必要	インタラクションの遅延。UI 状態の更新に顕著な遅延が発生します。	競合キーワードではランキングペナルティが発生する可能性があります。
$> 500\text {ms} $	悪い	応答しないボタン、フリーズした UI、メインスレッドのデッドロック。	Core Web Vitals 評価に不合格。アクティブランキングペナルティ。

INP インタラクションレイテンシの 3 つの要素

ユーザーが Web ページ上の要素を操作するとき、INP によって測定される合計インタラクションレイテンシーは、次の 3 つの連続したフェーズで構成されます。

入力遅延: ユーザーが物理的な操作 (クリック、タップ、またはキーの押下) を開始してから、ブラウザーのメインスレッドが関連するイベントハンドラーの実行を開始するまでの経過時間。入力遅延は主に、ページの読み込み中またはコンポーネントの再レンダリング中に実行される長時間のバックグラウンド JavaScript タスクによるメインスレッドの輻輳によって発生します。
処理時間: そのインタラクションのすべての登録済みイベントリスナー内で JavaScript コードの実行に費やした時間 ( onclick 、 onkeydown 、またはフレームワークのリアクティブ状態更新ハンドラーなど)。
プレゼンテーション遅延: イベントハンドラーの完了後、ブラウザーがスタイルの再計算、レイアウト、更新されたピクセルのペイント、およびユーザーのディスプレイハードウェアでの次のビジュアルフレームの表示を完了するまでの経過時間。

数学的には、単一インタラクションの合計 INP レイテンシーは次のように表されます。

$$\text{INP レイテンシー} = \text{入力遅延} + \text{処理時間} + \text{プレゼンテーション遅延}$$

Google が 2024 年 3 月に FID を INP に置き換えた理由

最初の入力遅延 (FID) は、ページ上の最初のインタラクションの入力遅延コンポーネントのみを測定しました。FID は、メインスレッドのブロックによって最初のインタラクションが妨げられているページを特定するのに役立ちましたが、次の 2 つの大きな技術的制限がありました。

単一インタラクションスコープ: FID は、ページ読み込み後の後続のユーザーインタラクションをすべて無視し、複雑なシングルページアプリケーション (SPA) のクライアント側ナビゲーション中の遅延をキャプチャできませんでした。
不完全なレイテンシー測定: FID は入力遅延のみを測定し、処理時間とプレゼンテーション遅延を完全に無視しました。実行に 2,000 ミリ秒かかったイベントハンドラーは、最初の入力遅延が 50 ミリ秒未満であれば合格の FID スコアを受け取りました。

2024 年 3 月、Google は公式の Core Web Vital ランキング要素として FID を INP に正式に置き換えました。INP は、セッション中のすべてのインタラクションの 75 パーセンタイルを評価し、最新の Web アプリケーション全体での実際のユーザーエクスペリエンスのより包括的かつ現実的な評価を提供します。

対象となるユーザーインタラクションと対象外のイベント

INP は、ユーザーが即時の視覚的なフィードバックを期待する個別のユーザーインタラクションを測定します。どの相互作用が INP にカウントされるかを理解することは、診断プロファイリングに不可欠です。

測定された相互作用

マウスクリック: ボタン、リンク、フォームコントロール、またはカスタムインタラクティブコンポーネントをクリックします。
タッチスクリーンタップ: モバイルデバイスまたはタブレット上の要素をタップします。
キーボードを押す: 物理キーボードまたは仮想キーボードのキー ( Enter 、 Space 、またはテキスト入力の英数字キーなど) を押します。

非測定イベント

スクロールとパン: ページのスクロールや地図コンポーネントのパンは、INP 測定をトリガーしません。
ホバリング: クリックせずに要素上でマウスカーソルを移動することは、INP から除外されます。
ページ読み込みアニメーション: ユーザー入力なしで自動的にトリガーされる CSS アニメーションは、INP にはカウントされません。

高い INP スコアを最適化する実証済みの技術戦略

INP レイテンシーを 200 ミリ秒のしきい値未満に減らすには、エンジニアリングチームは次の技術的な最適化を実装する必要があります。

長いメインスレッドタスクを分割する: requestIdleCallback() 、 setTimeout() 、または scheduler.yield() を使用して、50 ミリ秒を超える実行タスクを小さなチャンクに分割し、ブラウザーがタスク実行ブロック間で受信したユーザー入力を即座に処理できるようにします。
フレームワーク状態更新の最適化: Vue 3 および Nuxt 4 アプリケーションでは、非同期コンポーネント境界または延期されたリアクティブな ref 更新を使用して、重要ではない UI の再レンダリングを延期します。
レイアウトスラッシングを最小限に抑える: DOM 要素を変更した直後に DOM ジオメトリプロパティ ( offsetHeight や getBoundingClientRect() など) を読み取らないようにします。これにより、同期レイアウトの再計算が強制されます。
DOM ツリーの深さを減らす: DOM ツリーが大きすぎると、プレゼンテーションの遅延中にスタイルの計算とレイアウトのコストが増加します。DOM 要素の合計数は、ページごとに 1,500 ノード未満に抑えてください。
サードパーティスクリプトの最適化: 重いサードパーティスクリプト (分析、広告ネットワーク、顧客チャットウィジェット) がメインスレッドを頻繁にハイジャックします。必須ではないサードパーティ製スクリプトを延期するか、Web ワーカーがオフロードします。

SimpleOps による継続的な INP モニタリング

SimpleOps は、合成 Lighthouse 監査と並行して Chrome UX レポート (CrUX) の実際のユーザーフィールドデータセットメトリクスをキャプチャすることにより、INP パフォーマンスを継続的に追跡します。SimpleOps は、Web サイトの 75 パーセンタイル INP が 200 ミリ秒を超えるたびにチームに自動的に警告を発し、アプリケーションの高速性、流動性、そして検索エンジンのランキング向けに最適化された状態を維持します。

[object Object]

ウェブサイトの高速性と操作性を確保