以前、チーム内の勉強会で少し調べたことがあったのでそれをまとめてみました。
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）について色々と調べてみたいなと思います。