Interaction to Next Paint（INP）

Jeremy Wagner

Chrome の使用状況データによると、ユーザーがページに費やす時間の 90% はページの読み込み後に費やされています。そのため、ページのライフサイクル全体でレスポンシブ性を慎重に測定することが重要です。これが INP 指標で評価されるものです。

応答性が良好とは、ページが操作に迅速に応答することを意味します。ページが操作に応答すると、ブラウザはペイントする次のフレームで視覚的なフィードバックを表示します。視覚的なフィードバックは、オンライン ショッピング カートに追加した商品が実際に追加されているかどうか、モバイル ナビゲーション メニューが開いているかどうか、ログイン フォームの内容がサーバーで認証されているかどうかなどをユーザーに伝えます。

操作によっては、他の操作よりも時間がかかるものがありますが、特に複雑な操作の場合は、何か処理が行われていることをユーザーに伝えるために、最初の視覚的なフィードバックをすばやく表示することが重要です。ブラウザが描画する次のフレームが、これを実行できる最短のタイミングです。

したがって、INP の目的は、ネットワーク取得や他の非同期オペレーションからの UI 更新など、インタラクションの最終的な効果をすべて測定することではなく、次回のペイントがブロックされるまでの時間を測定することになっています。視覚的なフィードバックを遅らせると、ページの応答が速くないという印象を与える可能性があります。INP は、このユーザー エクスペリエンスの部分を開発者が測定できるように開発されました。

次の動画の右側の例では、アコーディオンが開いていることをすぐに視覚的にフィードバックしています。左の例は、応答性の低さと、それがユーザー エクスペリエンスの低下につながる様子を示しています。

このガイドでは、インプレッション数（INP）の仕組みと測定方法について説明します。また、INP を改善するためのリソースも紹介します。

INP とは何ですか？

INP は、ユーザーによるページアクセスの全期間中に発生するすべてのクリック、タップ、キーボード操作のレイテンシをモニタリングすることで、ユーザー インタラクションに対するページの全体的な応答性を評価するための指標です。最終的な INP 値は、最大時間を要したことがモニタリングされたインタラクションであり、外れ値は無視されます。

インタラクションとは、同じ論理的なユーザー操作中に発生するイベント ハンドラのグループです。たとえば、タッチスクリーン デバイスでの「タップ」操作には、pointerup、pointerdown、click などの複数のイベントが含まれます。インタラクションは、JavaScript、CSS、組み込みのブラウザ コントロール（フォーム要素など）、またはそれらの組み合わせによって駆動できます。

インタラクションのレイテンシは、ユーザーがインタラクションを開始してからブラウザが次にフレームをペイントできるまでの時間で、インタラクションを駆動するイベント ハンドラのグループの単一の最も長い時間で構成されます。

優れた INP スコアとは

応答性の指標に「良好」や「低い」などのラベルを固定することは困難です。一方で、優れた応答性を重視した開発手法を奨励する必要があります。一方で、ユーザーが使用するデバイスの機能にはかなりのばらつきがあるため、達成可能な開発の期待値を設定する必要があります。

優れた応答性でユーザー エクスペリエンスを提供するために、モバイルとデスクトップ デバイスに分けて、フィールドで記録されたページ読み込みの75 パーセンタイルを測定するのが適切なしきい値です。

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

インタラクションの内容

インタラクティビティの主な推進力は JavaScript ですが、ブラウザは JavaScript で動くもの以外のコントロール（チェックボックス、ラジオボタン、CSS で動くコントロールなど）を通じてインタラクティビティを提供します。

INP の目的として、次のインタラクション タイプのみが記録されます。

• マウスでクリックする。
• タッチスクリーン搭載デバイスをタップしている様子。
• 物理キーボードまたは画面キーボードのキーを押す。

インタラクションは、埋め込み動画の再生ボタンのクリックなど、メインのドキュメントまたはドキュメントに埋め込まれた iframe で発生します。エンドユーザーは iframe に何が含まれているかを認識しません。そのため、最上位ページのユーザー エクスペリエンスを測定するには、iframe 内の INP が必要です。JavaScript Web API は iframe の内容にアクセスできないため、CrUX と RUM の差異として表示されることがあります。

インタラクションには複数のイベントが含まれる場合があります。たとえば、キーストロークには keydown、keypress、keyup イベントが含まれます。タップ操作には、pointerup イベントと pointerdown イベントが含まれます。インタラクション内で最も長い時間のイベントが、インタラクションの合計レイテンシに影響します。

ページの INP は、ユーザーがページを離れたときに計算されます。結果は、ページのライフサイクル全体における全体的な応答性を示す単一の値です。INP が低いということは、ページがユーザー入力に安定して応答していたことを意味します。

INP と初回入力遅延（FID）の違いは何ですか？

INP は、初回入力遅延（FID）の後継指標です。どちらも応答性の指標ですが、FID はページでの最初の操作の入力遅延のみを測定していました。INP は、入力遅延からイベント ハンドラの実行時間、ブラウザが次のフレームをペイントするまでのページ上のすべてのインタラクションをモニタリングすることで、FID を改善します。

これらの違いは、INP と FID の両方が異なるタイプの応答性指標であることを意味します。FID は、ユーザーに対するページの第一印象を評価するために設計された読み込み応答性の指標でしたが、INP は、ページのライフサイクルのどの時点で発生したとしても、全体的な応答性のより信頼性の高い指標です。

INP 値が報告されない場合はどうなりますか？

ページから INP 値が返されない場合があります。次のような原因が考えられます。

• ページは読み込まれたが、ユーザーがクリック、タップ、キーボードのキー入力をしていない。
• ページは読み込まれたが、ユーザーが測定対象外のジェスチャー（スクロールや要素のホバーなど）を使用してページを操作した。
• ページにアクセスしている bot（検索クローラやヘッドレス ブラウザなど）が、ページを操作するようにスクリプト化されていない。

INP を測定する方法

INP は、現実的なユーザー インタラクションをシミュレートできる範囲で、現場とラボの両方で測定できます。

業務の現場

理想的には、フィールド データから INP の最適化を開始します。リアルユーザー モニタリング（RUM）のフィールド データでは、ページの INP 値だけでなく、INP 値自体の原因となった特定のインタラクション、インタラクションが発生したタイミング（ページの読み込み中か読み込み後か）、インタラクションの種類（クリック、キープレス、タップ）、その他の有用なタイミングなど、インタラクションのどの部分が応答性に影響しているかを特定するのに役立つコンテキスト データを取得できます。

ウェブサイトが Chrome ユーザー エクスペリエンス レポート（CrUX）に含まれる場合は、PageSpeed Insights の CrUX（およびその他の Core Web Vitals）を使用して INP のフィールド データをすばやく取得できます。少なくとも、ウェブサイトの INP のオリジンレベルの画像を取得できますが、URL レベルのデータも取得できる場合があります。

ただし、CrUX は問題があるかどうかを判断できますが、問題の原因を特定することはできません。RUM ソリューションは、レスポンシビリティの問題が発生しているページ、ユーザー、ユーザー操作について詳細を把握するのに役立ちます。INP を個々のインタラクションに関連付けることで、推測や無駄な労力を回避できます。

実験室

ページのインタラクションに遅延があることを示すフィールドデータが得られたら、ラボでテストを開始することをおすすめします。フィールドデータがあれば、問題のあるインタラクションの再現をラボで行う作業が大幅に簡素化されます。

ただし、フィールドデータがない可能性もあります。一部のラボツールでは INP を測定できますが、ラボテスト中のページの INP 値は、測定期間中に行われたインタラクションによって異なります。ユーザーの行動は予測不可能で、変化が激しいため、ラボでのテストでは、フィールドデータと同じように問題のあるインタラクションが見つからない可能性があります。また、一部のラボツールでは、インタラクションなしでページの読み込みのみをモニタリングするため、ページの INP が報告されません。このような場合、合計ブロッキング時間（TBT）は INP の適切な代替指標となる可能性がありますが、それ自体が INP の代用となるわけではありません。

ページの INP を評価する際にラボツールに制限があるものの、ラボでインタラクションの遅延を再現するための戦略はいくつかあります。戦略には、一般的なユーザーフローを追跡してその過程でインタラクションをテストする方法や、ページの読み込み時にページを操作する（メインスレッドが最も負荷が高い場合が多い）方法などがあります。これにより、ユーザー エクスペリエンスの重要な部分でインタラクションの遅延を特定できます。

INP を改善する方法

INP の最適化に関するガイド集では、現場でのインタラクションの遅延の特定、ラボデータの使用による原因の特定と最適化のプロセスについて説明しています。

変更履歴

指標の測定に使用される API や、指標自体の定義でバグが見つかることがあります。その結果、変更が必要になることがあります。これらの変更は、内部レポートやダッシュボードで改善または回帰として表示される場合があります。

これらの指標の実装または定義に対するすべての変更は、この変更ログに表示されます。

これらの指標に関するフィードバックがある場合は、web-vitals-feedback Google グループでフィードバックを送信してください。

理解度テスト