Chrome の使用状況データによると、ユーザーの滞在時間の 90% はページの読み込み後に費やされているため、ページのライフサイクル全体を通じて応答性を慎重に測定することが重要です。INP 指標はこれを評価します。
応答性の良さとは、ページで行われた操作にページが迅速に反応することを意味します。ページが操作に応答すると、その結果として視覚フィードバックが発生します。これはブラウザが表示する次のフレームでブラウザによって示されます。たとえば、オンライン ショッピング カートに追加したアイテムが実際に追加されているかどうか、モバイル ナビゲーション メニューが開かれたかどうか、ログイン フォームのコンテンツがサーバーによって認証されているかどうかなどがわかります。
当然、一部の操作は他の操作よりも時間がかかることもありますが、特に複雑な操作の場合は、起きていることを示す手がかりとして、最初の視覚的なフィードバックを素早く提示することが重要です。次のペイントまでにかかる時間は、これを実施する最も早い段階です。したがって、INP の目的はインタラクションのすべての最終的な影響（他の非同期処理によるネットワーク フェッチや UI の更新など）を測定するのではなく、次のペイントがブロックされる時間を測定することです。視覚的なフィードバックを遅らせると、ユーザーの操作にページが反応していないという印象をユーザーに与えることになります。
INP の目標は、ユーザーがインタラクションを開始してから次のフレームがペイントされるまでの時間を、ユーザーが行うすべてのインタラクションまたはほとんどのインタラクションでできるだけ短くすることです。
次の動画では、右の例では、アコーディオンが開くという視覚的なフィードバックがすぐに表示されます。また、応答性の低さが、エクスペリエンスに問題があるとユーザーが考え、意図しない複数の入力が引き起こされる可能性があることを示しています。
この記事では、INP の仕組みとその測定方法、および INP を改善するためのリソースを紹介します。
INP とは
INP は、ユーザーによるページ訪問の全期間を通じて発生するすべてのクリック、タップ、キーボード操作のレイテンシを測定することで、ユーザー操作に対するページの全体的な応答性を評価する指標です。最終的な INP 値は、最大時間を要したことがモニタリングされたインタラクションであり、外れ値は無視されます。
前述のとおり、INP はページで行われたすべてのインタラクションを観測することで計算されます。ほとんどのサイトでは、レイテンシが最も低いインタラクションは INP として報告されます。ただし、インタラクションの数が多いページの場合、ランダムな中断により、本来はレスポンシブなサイトでのインタラクションが異常に多くなることがあります。インタラクションが多いほど、この可能性は高くなります。これに対処し、このようなタイプのページの実際の応答性をより正確に測定するために、50 回のインタラクションごとに最も高いインタラクションを 1 つ無視します。ほとんどのページ エクスペリエンスは 50 回を超えるインタラクションがないため、最も低いインタラクションが表示されます。その後、全ページビューの 75 パーセンタイルが通常どおりレポートされます。これにより、外れ値がさらに取り除かれ、大多数のユーザーが経験する、またはそれ以上の価値が得られます。
インタラクションとは、同じ論理ユーザー操作中に呼び出されるイベント ハンドラのグループです。たとえば、タッチスクリーン デバイスでの「タップ」操作には、pointerup、pointerdown、click などの複数のイベントが含まれます。インタラクションは、JavaScript、CSS、組み込みのブラウザ コントロール（フォーム要素など）、またはそれらの組み合わせによって発生することがあります。
インタラクションのレイテンシは、ユーザーがインタラクションを開始してから次のフレームに視覚的なフィードバックが表示されるまでの、インタラクションを発生させるイベント ハンドラのグループの中で最も長い「時間」で構成されます。
良好な INP スコアとはどのようなものですか？
応答性の指標に「良い」や「悪い」などのラベルを固定するのは困難です。一方では、優れた応答性を優先する開発プラクティスを奨励したいと考えています。その一方で、達成可能な開発の期待値を設定するために使用するデバイスの機能には、大きなばらつきがあるという事実を考慮する必要があります。
優れた応答性でユーザー エクスペリエンスを提供するには、現場で記録されたページ読み込みの 75 パーセンタイルを、モバイル デバイスとデスクトップ デバイスでセグメント化して測定するしきい値として適しています。
- INP が 200 ミリ秒未満または 200 ミリ秒の場合は、ページの応答性が良好であることを意味します。
- INP が 200 ミリ秒 超500 ミリ秒 以下であれば、ページの応答性に改善が必要です
- INP が 500 ミリ秒を超える場合は、ページの応答性が低いことを意味します。
インタラクションとは
多くの場合、インタラクティビティの主な要因は JavaScript です。ただし、ブラウザは、チェックボックス、ラジオボタン、CSS を用いたコントロールなど、JavaScript によらないコントロールを通じてインタラクティビティを提供します。
INP に関しては、次のインタラクション タイプのみが確認されます。
- マウスでクリックする。
- タッチスクリーンでデバイスをタップする。
- 物理キーボードまたは画面キーボードのキーを押す。
操作は、メイン ドキュメント内、またはドキュメントに埋め込まれた iframe 内で発生します（たとえば、埋め込み動画での再生のクリックなど）。エンドユーザーは iframe に何があるかはわかりません。そのため、最上位ページのユーザー エクスペリエンスを測定するには、iframe 内の INP が必要です。注: JavaScript ウェブ API は iframe コンテンツにアクセスできないため、iframe 内の INP を測定できない可能性があります。これは、CrUX と RUM の違いを示しています。
操作は 2 つの部分で構成され、それぞれに複数のイベントが含まれる場合があります。たとえば、キー入力は keydown、keypress、keyup イベントで構成されます。タップ操作には pointerup イベントと pointerdown イベントが含まれています。インタラクション内の時間が最も長いイベントが、インタラクションのレイテンシとして選択されます。
INP は、ユーザーがページから離れたときに計算され、ページのライフサイクル全体にわたるページの全体的な応答性を表す単一の値になります。INP が低いということは、ページがユーザー入力に確実に反応していることを意味します。
INP と FID（First Input Delay）の違いは何ですか？
INP ではすべてのページ インタラクションが考慮されますが、First Input Delay（FID）では最初のインタラクションのみが考慮されます。また、起点の入力遅延のみが計測され、イベント ハンドラの実行にかかる時間や次のフレームの表示までの遅延は計測されません。
FID は読み込みの応答性の指標でもあることを考えると、その根拠は、読み込みフェーズでページで行われた最初のインタラクションで認識できる入力遅延がほとんど、またはまったくない場合、ページの第一印象は良いものであったということです。
INP は第一印象だけではありません。すべてのインタラクションをサンプリングすることで、応答性を包括的に評価できるため、INP は FID よりも全体的な応答性のより信頼性の高いインジケーターとなります。
INP 値が報告されない場合はどうなりますか？
ページが INP 値を返さない場合もあります。これは、いくつかの原因で発生します。
- ページは読み込まれましたが、ユーザーがキーボードをクリック、タップ、または押していません。
- ページは読み込まれたが、ユーザーがクリック、タップ、キーボードを使用しないジェスチャーでページを操作した。たとえば、要素をスクロールしたり、カーソルを合わせたりしても、INP の計算では考慮されません。
- ページを操作するスクリプトが設定されていない、検索クローラーやヘッドレス ブラウザなどの bot がページにアクセスしている。
INP の測定方法
INP は、現場でもラボでも、さまざまなツールを使用して測定できます。
業務の現場
INP の最適化の過程は、フィールド データから始めるのが理想的です。最良の場合、Real User Monitoring（RUM）のフィールド データは、ページの INP 値だけでなく、INP 値自体の原因となった特定のインタラクション、ページの読み込み中または読み込み後に発生したインタラクション、インタラクションの種類（クリック、キー押下、タップ）などの貴重な情報を示すコンテキスト データも提供します。
ウェブサイトが Chrome ユーザー エクスペリエンス レポート（CrUX）の対象である場合は、PageSpeed Insights で CrUX を介して INP のフィールド データ（およびその他のウェブに関する主な指標）をすばやく取得できます。少なくとも、ウェブサイトの INP のオリジン レベルの画像を取得できますが、ページレベルのデータを取得できる場合もあります。
CrUX は、大まかに問題があることを伝えるには有用ですが、問題を完全に理解するには十分な情報が得られないことがよくあります。RUM ソリューションを使用すると、インタラクションが遅いページ、ユーザー、ユーザー インタラクションの詳細までドリルダウンできます。INP を個々のインタラクションに帰属させることができれば、当て推量や無駄な労力を回避できます。
実験室
インタラクションが遅いことを示すフィールド データが得られたら、ラボでテストを開始するのが理想的です。ただし、フィールド データがない場合は、遅いインタラクションをラボで再現するための戦略がいくつかあります。たとえば、一般的なユーザーフローに沿って操作をテストしたり、メインスレッドが最もビジー状態になることが多い読み込み中の操作をテストしたりして、ユーザー エクスペリエンスの重要な部分で遅い操作を明らかにできるようにします。
INP を改善する方法
現場で遅いインタラクションを特定し、ラボデータを使用してさまざまな方法でドリルダウンして最適化するプロセスをガイドする、INP の最適化に関するガイドのコレクションが用意されています。
変更履歴
指標の測定に使用する API や、指標自体の定義にバグが見つかることもあります。そのため、必要な変更を行う必要が生じることがあります。また、こうした変更は、内部のレポートやダッシュボードに改善または回帰として表示されることがあります。
指標の実装または定義に対する変更はすべて、こちらの変更履歴に掲載されています。
これらの指標についてフィードバックがある場合は、web-vitals-feedback Google グループからお寄せください。