Core Web Vitalsの新指標、Interaction to Next Paint（INP）とは？
Core Web Vitalsとは？
Core Web Vitalsは、ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する一連の指標です。その指標には大きく三つがあり、LCP(Largest Contentful Paint）、FID(First Input Delay）、CLS(Cumulative Layout Shift）があります。ただし、インタラクティブ性の尺度であるFIDは実際のユーザー経験とはギャップがあり、その限界を乗り越えるため、Chrome開発者グループは2022年Core Web Vitalsの新指標、INPという概念を紹介し、2024年3月からFIDのに代わりにCore Web Vitalsの指標として採用すると発表しました。
Interaction to Next Paint（INP）とは？
Interaction to Next Paint (INP) はユーザーインターフェースの応答性を測定するWEBパフォーマンス・メトリックです。特にクリックイベントやキープレスなどのユーザーインタラクションが行われてから、UIがアップデートされるまでどのぐらい時間がかかったのかを主に測ります。
UIがアップデートされるまでは、以下の３段階を踏みます。
- インプット遅延（Input Delay）: バックグラウンドタスクの実行を待つ。
- 処理時間（Processing Time）: Javascriptのイベントハンドラの実行。
- 画面表示遅延（Presentation Delay）: ページレイアウトを再計算して、ページコンテンツを描く。
応答性が良いということは、ページが相互作用に素早く反応することです。言い換えると、ブラウザが次のフレームをレンダリングする視覚的フィードバックが早いということです。 視覚的フィードバックで実際にカートにアイテムが追加されたか、探索メニューが開かれたか、ログインフォームの内容がサーバーで認証されているかなどが分かります。
ある相互作用は他のものより長くかかります。 特に複雑な相互作用は、ユーザーに何かが起こっているか示すため、一部の初期視覚的フィードバックを素早く見せるのが大事です。次のペイントが行われている間に初期視覚的フィードバックを見せるのがに適します。
なので、INPの目的は、相互作用の全ての最終効果（例：他の非同期作業のネットワーク取得やUIアップデート）を測定することではなく、次のペイントまでブロックされる時間を測定することです。 視覚的フィードバックが遅くなると、ユーザーのアクションにページが応答していないという印象を与えがちないです。
INPの目標はユーザーが行うほとんどの相互作用について、ユーザーが相互作用を開始したときから次のフレームが描かれるまでの時間間隔をできるだけ短くすることです。
次のビデオで、右側の例はアコーディオンが開く即時に視覚的フィードバックが提供されます。 応答性が悪いと、ユーザー経験が悪いため、入力に対して想定しない応答が色々発生する可能性があります。
反応性の高いユーザー経験を提供しているかどうか確認するためには、モバイルとデスクトップ機器を含み、記録されたページロードの75番目の百分位数で測定するのが適切なしきい値となります。
- INPが200ミリ秒以下なら、ページの応答性が高い。
- INPが200ミリ秒超過、500ミリ秒未満なら、ページの応答性を改善する必要がある。
- INPが500秒以上なら、ページの応答性が悪い。
Interaction to Next Paint（INP)とFirst Input Delay（FID)の違い
INPは全てのページ相互作用を考慮する反面、FIDは最初の相互作用だけを考慮しています。 また、FIDは最初の相互作用の入力遅延のみを測定するため、イベントハンドラの処理時間や次のフレーム表示までかかる遅延時間は測りません。
FIDもロード応答性のメトリックの一つであり、ページロード中、最初のインタラクションで何の遅延が発生しないと良い第一印象が残されます。
それに比べ、INPはユーザーインタラクションの全体範囲を扱います。全ての相互作用を抽出、分析して応答性を包括的に評価しますので、より信頼性が高い指標になります。
INPの測定方法
現場(実際のユーザー環境)用のツール、もしくはLight Houseなどの実験環境用のツールなど、INPは様々なツールを通じて測定できます。
現場用
実験関係用
- 開発者ツールのLighthouseタブ
- Lighthouse npm module
- Lighthouse User Flows
- Web Vitals extension for Chrome
INPの改善方法
実験環境で相互作用が遅い箇所を見つかったら、次のステップは改善することです。相互作用の遅延は大きく以下の三つに分けられます。
- インプット遅延（The input delay)：ユーザーがページ内の要素と相互作用を始める時から相互作用のイベントコールバックが行い始めた時までの遅延を指します。
- 処理時間（The processing time)：イベントコールバックが終わるまでかかる時間のことです。
- プレゼンテーション遅延（The presentation delay)：相互作用の視覚的フィードバックである次のフレームをブラウザが画面上で表示するまでの遅延時間を指します。
上記の三つのフェーズが合わせて総相互作用の遅延時間（レイテンシー）になります。相互作用の各フェーズが遅延時間に影響を与えますので、できる限り処理時間を削減してそれぞれの相互作用部分を最適化するのが大事です。
(1) インプットの遅延させる要素を減らす
メインスレッドのCPU処理を小さく分けて、その量を減らす方が望ましいです。Light Houseなどの実験環境でTotal Blocking Time(TBT)メトリックを確認すると、ユーザー相互作用をブロックするバックグラウンド処理が見つけられます。
例えば、第３者コードを必要な時に限って読み込むことで、INPに悪影響を与える不要の処理を減らせます。
(2) CPU処理を最適化する
そのためにブラウザが最も時間をかかっている箇所を探す必要があります。
Reactのプロゼクトならコンポーネントの要らない再レンダーリングを避けた方が良いでしょう。
CPU処理がレイアウト作業に集中されていれば、再レイアウトされないように修正するのもできます。
ユーザーインプットに重いJavascriptの処理があれば、CPU処理が始まる前にUIをアプデートしてみるのも考えられます。
- 先にスピナーを見せ、後でsetTimeoutコールバックなどを活用した非同期処理を行う
- CPU使用率の高い作業はWeb workerなどを利用して別のスレッドに分ける
alert, confirm のようなネイティブプロムプトは避ける
alert のようなJavascriptnのネイティブメソッドはユーザーにメッセージを見せてくれる簡単な方法ですが、ページのメインスレッドをブロックする原因にもなります。プロムプトが無くなるまでに、相互作用の全般が遅延される恐れがありますので、ご注意ください。
(3) プレゼンテーション遅延を改善する
プレゼンテーションの遅延量はページの複雑さ及びページのアプデート量に影響を受けます。
ページコンテンツのレンダーリングが遅い場合はabove the fold領域の重要コンテンツを先に表示する戦略も考えられます。
参考資料：
Discussion