Interaction to Next Paint (INP)

ref: Interaction to Next Paint (INP) - web.dev

概要

現在 3 つの Core Web Vitals としての指標があるが、Interaction to Next Paint (INP)の指標が実験的なメトリクスとして追加された

ページ上のユーザーのインタラクションを通してウェブ上での応答性を測定する(クリックなどのアクションから視覚的な要素が 1frame アウトプットされるまで)

  • クリック、タップ、ドラッグ、キーボード操作
  • ホバーやスクロールは無視される

INP の計測

単一のインタラクションのレイテンシー計測は以下の 3 つの期間の合計値で計測される

  1. 入力遅延(input delay)

ユーザーがページを操作してからイベントハンドラーが実行されるまでの時間

  1. 処理時間(processing time)

関連するイベントハンドラーでコードを実行するのにかかる合計時間

  1. 表示遅延(presentation delay)

イベントハンドラーの実行が終了してから、ブラウザーが次のフレームを表示するまでの時間

interaction to next paint

ページのインタラクション数に応じて判定基準が変わる

50 未満: 最も遅延が大きいインタラクションが判定対象 50 以上: ほとんどの場合は 98 パーセンタイルのインタラクションの遅延が判定対象

パーセントとパーセンタイルの違い

INP metrics

ページ遷移後にインタラクションが発生しなかった場合には計測はされない

計測

各種ツールで計測可能になっている

計測方法: https://developer.chrome.com/en/blog/inp-tools-2022/

core web vitals result

まだ実験的な機能なのでこの値が検索順位などに影響はしないが、今後は Core Web Vitals の 1 つの指標として加えられる日がくる