Interaction to Next Paint (INP)とは？

Interaction to Next Paint (INP)とはなんでしょうか？グーグルのコアウェブバイタルに追加されると言っているので見ておきましょう。

Interaction to Next Paint (INP) は、2024 年 3 月に First Input Delay (FID) に代わる保留中の Core Web Vital メトリクスのことです。INP は、Event Timing API からのデータを使用して応答性を評価します。インタラクションによってページが応答しなくなると、ユーザーエクスペリエンスは低下します。 INP は、ユーザーがページに対して行ったすべてのインタラクションのレイテンシを監視し、すべて (またはほぼすべて) のインタラクションがそれ以下であった単一の値を報告します。 INP が低いということは、ページがユーザーインタラクションのすべて (または大部分) に一貫して迅速に応答できたことを意味します。

Chromeの利用データによると、ユーザーのページ滞在時間の90%は、読み込み後に費やされます。したがって、ページのライフサイクル全体を通して、応答性を慎重に測定することが重要です。これがINPの評価基準です。

優れた応答性とは、ページがそのページとのインタラクションに素早く反応することを意味します。ページがインタラクションに反応すると、その結果は視覚的なフィードバックとなり、ブラウザが表示する次のフレームに表示されます。視覚的なフィードバックは、例えば、オンラインショッピングカートに追加した商品が本当に追加されたかどうか、モバイルナビゲーションメニューが開いたかどうか、ログインフォームの内容がサーバーによって認証されているかどうか、などを教えてくれます。

いくつかのインタラクションは当然、他のインタラクションよりも時間がかかりますが、特に複雑なインタラクションの場合、何かが起こっていることをユーザーに知らせる合図として、最初の視覚的なフィードバックを素早く提示することが重要です。次のペイントまでの時間は、これを行う最も早い機会である。したがって、INPの意図は、インタラクションの最終的な効果（ネットワークフェッチや他の非同期操作によるUIの更新など）をすべて測定することではなく、次のペイントがブロックされている時間を測定することです。視覚的なフィードバックを遅らせることで、ページが彼らのアクションに反応していないという印象をユーザーに与えている可能性があります。

INPの目標は、ユーザーがインタラクションを開始してから次のフレームが描画されるまでの時間を、ユーザーが行うすべての、あるいはほとんどのインタラクションにおいて、可能な限り短くすることです。

次のビデオでは、右の例でアコーディオンが開いていることを即座に視覚的にフィードバックしています。また、応答性が悪いと、ユーザーがエクスペリエンスが壊れていると考えるため、入力に対して意図しない反応が何度も起こる可能性があることを示しています。

INPとは？

INPは、ユーザーがページを訪問する間に発生するすべてのクリック、タップ、キーボード操作の待ち時間を観察することで、ユーザーインタラクションに対するページの総合的な応答性を評価する指標です。最終的なINPの値は、観察されたインタラクションの中で最も長いもので、外れ値は無視されます。

INPの算出方法に関する注記

上述したように、INPはページとのすべてのインタラクションを観察することで計算される。ほとんどのサイトでは、最も遅延のひどいインタラクションがINPとして報告されます。しかし、インタラクションの数が多いページでは、ランダムなしゃっくりによって、そうでなくても反応の良いサイトで異常に高いインタラクションが発生することがあります。インタラクションの数が多ければ多いほど、この可能性は高くなります。これに対抗し、そのようなタイプのページの実際の反応性をよりよく測定するために、50のインタラクションごとに1つの最も高いインタラクションを無視します。大半のページ体験は50以上のインタラクションがないので、最悪のインタラクションを報告します。そして、すべてのページビューの75パーセンタイルが通常通り報告され、さらに、大多数のユーザーが経験する値かそれ以上の値を与えるために、異常値を取り除きます。

良いINPスコアとは？

応答性の指標に「良い」とか「悪い」といったラベルを貼ることは難しい。一方では、優れた応答性を優先する開発手法を奨励したい。一方で、達成可能な開発期待を設定するためには、人々が使用するデバイスの能力にはかなりのばらつきがあるという事実を考慮しなければなりません。

良好なレスポンスでユーザー体験を提供していることを確認するために、モバイルデバイスとデスクトップデバイスを区分し、現場で記録されたページロードの75パーセンタイルを測定するのがよいしきい値となります：

INPが200ミリ秒以下または200ミリ秒の場合は、ページの応答性が良好であることを意味します。
INPが200ミリ秒以上、500ミリ秒以下は、ページの応答性に改善が必要であることを意味します。
INPが500ミリ秒を超える場合は、ページの応答性が悪いことを意味します。

インタラクションとは？

ブラウザは、チェックボックス、ラジオボタン、CSSによるコントロールなど、JavaScript以外のコントロールによってインタラクティビティを提供する。

INPに関しては、以下のインタラクションタイプのみが観察される：

マウスによるクリック。
タッチスクリーンを使ったデバイスのタップ。
物理キーボードまたはオンスクリーンキーボードのキーを押す。

INPはファースト・インプット・ディレイ（FID）とどう違うのか？

INPがすべてのページのインタラクションを考慮するのに対して、First Input Delay (FID)は最初のインタラクションだけを考慮します。また、最初のインタラクションの入力遅延のみを測定し、イベントハンドラの実行時間や次のフレームを表示する遅延は測定しません。

FIDがロード反応の指標でもあることを考えると、その根拠は、ロード段階でページと行われる最初のインタラクションで、知覚できる入力遅延がほとんどない場合、そのページは良い第一印象を与えたということです。

INPは第一印象以上のものです。すべてのインタラクションをサンプリングすることで、応答性を総合的に評価することができ、INPはFIDよりも信頼できる全体的な応答性の指標となります。

INP値が報告されない場合は？

ページがINP値を返さないことはあり得る。これにはいくつかの理由が考えられます：

ページはロードされたが、ユーザがクリックやタップ、キーボードのキーを押さなかった。
ページがロードされたが、ユーザーがクリックやタップ、キーボードの使用を伴わないジェスチャーを使ってページとインタラクトした。例えば、スクロールやホバーオーバーは、INPの計算方法には含まれません。
検索クローラーやヘッドレスブラウザなど、ページと対話するためのスクリプトが作成されていないボットがページにアクセスしている。