Interaction to Next Paint（INP）

Jeremy Wagner

Barry Pollard

公開日: 2022 年 5 月 6 日、最終更新日: 2025 年 9 月 9 日

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

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

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

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

次の動画の右側の例では、アコーディオンが開いていることをすぐに視覚的に確認できます。左側の例は、レスポンシブ デザインが不十分な場合、ユーザー エクスペリエンスが低下する様子を示しています。

このガイドでは、INP の仕組み、測定方法、改善に役立つリソースについて説明します。

INP とは

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

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

インタラクションのレイテンシは、ユーザーがインタラクションを開始してから、ブラウザが次にフレームをペイントできるようになるまでの間、インタラクションを駆動するイベント ハンドラのグループの最長の期間で構成されます。まれに、描画するフレームがないにもかかわらず、ブラウザがフレームを描画できるタイミングでインタラクションが終了することがあります。

良好な INP スコアとは

応答性の指標に「良好」や「不良」などのラベルを固定することは困難です。一方、応答性の高い開発プラクティスを推奨したいと考えています。一方、ユーザーが使用するデバイスの機能には大きなばらつきがあるため、達成可能な開発目標を設定する必要があります。

応答性の高いユーザー エクスペリエンスを提供するには、モバイル デバイスとデスクトップ デバイスでセグメント化された、フィールドで記録されたページ読み込みの 75 パーセンタイルを測定するしきい値を使用することをおすすめします。

• INP が 200 ミリ秒以下の場合、ページは応答性が高いことを意味します。
• INP が 200 ミリ秒を超え、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 が低いほど、ページがユーザー入力に安定して応答したことを意味します。

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

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

この違いから、INP と FID はどちらも応答性の指標ですが、種類が異なることがわかります。FID は、ユーザーに対するページの第一印象を評価するために設計された読み込みの応答性に関する指標でしたが、INP は、ページでのインタラクションの発生時期に関係なく、全体的な応答性をより確実に示す指標です。

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

ページが INP 値を返さないこともあります。この問題は、次のような原因で発生することがあります。

• ページは読み込まれたが、ユーザーがクリック、タップ、キーボードのキーを押したことがない。
• ページは読み込まれたが、ユーザーがスクロールや要素へのカーソル移動など、測定されないジェスチャーで操作した。
• ページにアクセスしているのが、ページを操作するスクリプトが設定されていない検索クローラーやヘッドレス ブラウザなどのボットである。

INP の測定方法

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

業務の現場

理想的には、INP の最適化はフィールド データから始めるのが望ましいです。リアルユーザー モニタリング（RUM）のフィールド データは、ページの INP 値だけでなく、INP 値の原因となった特定のインタラクション、インタラクションがページ読み込み中または読み込み後に発生したかどうか、インタラクションのタイプ（クリック、キープレス、タップ）など、応答性に影響を与えたインタラクションのどの部分を特定するのに役立つその他の貴重なタイミングをハイライト表示するコンテキスト データも提供します。

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

ただし、CrUX では問題があるかどうかはわかりますが、問題の原因はわかりません。RUM ソリューションを使用すると、応答性の問題が発生しているページ、ユーザー、ユーザー インタラクションに関する詳細情報を把握できます。INP を個々のインタラクションに帰属させることができれば、推測や無駄な労力を回避できます。

実験室

理想的には、ページでインタラクションの遅延が発生していることを示すフィールド データが得られたら、ラボでテストを開始します。フィールド データを使用すると、ラボで問題のあるインタラクションを再現する作業がはるかに簡単になります。

ただし、フィールド データがない可能性もあります。INP は一部のラボツールで測定できますが、ラボテスト中のページの INP 値は、測定期間中に実行されたインタラクションに依存します。ユーザーの行動は予測不可能で、変動が大きいため、ラボでのテストでは、フィールド データで発生するような問題の相互作用が表面化しない可能性があります。また、一部のラボツールでは、インタラクションなしでページの読み込みのみを観測するため、ページの INP が報告されません。このような場合、合計ブロック時間（TBT）は INP の妥当なプロキシ指標になる可能性がありますが、それ自体が INP の代わりになるわけではありません。

ラボツールの INP の評価には制限がありますが、ラボで遅いインタラクションを再現するための戦略はいくつかあります。一般的なユーザーフローに沿ってテストし、その過程でインタラクションをテストする戦略や、ユーザー エクスペリエンスの重要な部分でインタラクションが遅いことを特定するために、メインスレッドが最もビジー状態になることが多いページの読み込み中にインタラクションを行う戦略などがあります。

JavaScript で INP を測定する

JavaScript で INP を測定するには、すべてのインタラクションのイベント タイミングを測定し、ページのアンロード時にこれらのインタラクションの 98 パーセンタイルを取得する必要があります。INP の計算方法のリファレンス実装を含む web vitals JavaScript ライブラリのソースコードを参照してください。

ほとんどの場合、ページがアンロードされる時点の現在の INP 値がそのページの最終的な INP 値になりますが、次のセクションで説明するように、いくつかの重要な例外があります。web vitals JavaScript ライブラリは、Web API の制限内で、これらの点をできる限り考慮しています。

指標と API の違い

• event エントリが 104 ミリ秒未満の場合、パフォーマンス オブザーバーを使用してデフォルトでレポートされません。このデフォルト値は、durationThreshold パラメータを使用してパフォーマンス オブザーバを登録するときに変更できますが、この場合でも最小値は 16 ミリ秒です。そのため、first-input エントリも監視することをおすすめします。これはイベント タイミング エントリですが、期間が durationThreshold より短い場合でも監視できます。これにより、インタラクションを含むページは常に INP 値を報告します。
• パーセンタイルを正確に計算するには、すべてのサンプルをメモリに保持する必要がありますが、これはコストがかかる可能性があります。ただし、最悪の N 件のインタラクションの小さなリストを保持するだけで、特に p98 などの非常に高いパーセンタイルを近似できます。10 が一般的な選択肢です。
• ページがバックフォワード キャッシュから復元された場合、ユーザーはこれを別のページ訪問として認識するため、INP 値はゼロにリセットされます。
• API は、iframe 内で発生したインタラクションの event エントリを報告しませんが、指標は報告します。これは、それらがページのユーザー エクスペリエンスの一部であるためです。これは CrUX と RUM の違いとして現れる可能性があります。INP を適切に測定するには、これらの点を考慮する必要があります。サブフレームは API を使用して、親フレームに event-timing エントリを報告できます。

これらの例外に加えて、INP はページ全体のライフサイクルを測定するため、複雑さが増しています。

• ユーザーはタブを非常に長い期間（数日、数週間、数か月）開いたままにすることがあります。実際、ユーザーはタブを閉じないこともあります。
• モバイル オペレーティング システムでは、ブラウザは通常、バックグラウンド タブのページ アンロード コールバックを実行しないため、「最終」値をレポートすることが困難です。

このようなケースに対応するため、INP は、ページがバックグラウンドに移行するたびに報告する必要があります（アンロードされるたびに報告するだけでなく、visibilitychange イベントはこれらのシナリオの両方をカバーします）。このデータを受け取った分析システムは、バックエンドで最終的な INP 値を計算する必要があります。

デベロッパーは、これらのケースをすべて自分で把握して対応するのではなく、web-vitals JavaScript ライブラリを使用して INP を測定できます。このライブラリは、iframe のケースを除く、前述のすべてのケースに対応しています。

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

INP を改善する方法

INP を最適化するためのガイド集では、フィールドで遅いインタラクションを特定し、ラボデータを使用して原因を特定して最適化するプロセスについて説明しています。

変更履歴

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

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

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

理解度テスト