以前、チーム内の勉強会で少し調べたことがあったのでそれをまとめてみました。

INPとは

Interaction to Next Paint の略称
ユーザーが起こした操作に対する反応（interaction）の遅延を計測
※ユーザーの操作に対する視覚的な反応が発生するまでにかかる時間を示す

例えば、下のビデオでは、右のアコーディオンはクリックすれば開くという視覚的な反応がすぐに得られます。
しかし、左側のアコーディオンをクリックしたとしてもその際にすぐ反応を得られる訳ではないのでユーザーが壊れていると考え何度もクリックすることが予想されます。
その場合処理が実行されると、遅れた入力を処理するため、アコーディオンが予期せず開いたり閉じたりします。

要するに、ユーザーにとってそのサイトの中にある要素ひとつひとつが違和感のない挙動になっているかを評価する指標であると言えます。

FID（First Input Delay）との違い

FID：ユーザーが最初に入力をした際にブラウザが入力の処理を開始するまでの遅延時間を計測
INP：全てのInteractionが計測対象

INPが関係するinteraction

マウスのクリックに反応する要素
タッチスクリーンデバイスのタップに反応する要素
キーボードの押下に反応する要素

INPの判定基準

Interactionが50未満：最も遅延が大きいInteractionが判定対象
Interactionが50以上：98パーセンタイルのInteractionの遅延が判定対象

下の図が対象となるInteractionへの反応の遅延の判定に使われる基準になります。

INPの計測方法

既にGoogleがいくつかのツールを提供していますが、PageSpeed Insights を用いて計測することをお勧めします。INP のスコアを調べられるようになっているためとても便利です。

INPを改善する方法

coverage toolを使用して未使用のコードを削除
メソッドを切り分けて読み込み中に不要なJavaScriptを呼び出さない
低速のサードパーティーJavaScriptを特定する
処理の長いJavaScriptを最適化する
画像、CSSの改善

まとめ

普段は、バックエンドエンジニアとしてフロント部分の細かなUXについて調べたりという経験はありませんでしたが調べてみるとなかなか面白く今後もコアウェブバイタル（Core Web Vitals）について色々と調べてみたいなと思います。