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 のコンテンツにアクセスできないため、CrUX と RUM の違いとして現れる可能性があります。
インタラクションは複数のイベントで構成できます。たとえば、キー入力には keydown、keypress、keyup イベントが含まれます。タップ操作には pointerup イベントと pointerdown イベントが含まれています。インタラクション内の時間が最も長いイベントは、インタラクションの合計レイテンシに寄与します。
ページの INP は、ユーザーがページを離れたときに計算されます。その結果、ライフサイクル全体を通じたページの全体的な応答性を表す値が 1 つ表示されます。INP が低いということは、ページがユーザー入力に対して確実に応答していることを意味します。
INP と FID（First Input Delay）の違いは何ですか？
INP は、First Input Delay（FID）の後継指標です。どちらも応答性の指標ですが、FID はページでの最初の接点の入力遅延のみを測定しました。INP は、入力遅延からイベント ハンドラの実行に要する時間、そして最終的にブラウザが次のフレームをペイントするまで、ページで発生するすべてのインタラクションを監視することで FID を改善します。
これらの違いは、INP と FID の両方が異なる種類の応答性指標であることを意味します。FID は、ユーザーに対するページの第一印象を評価するように設計された読み込み応答性の指標でしたが、INP はページ操作がいつ発生するかに関係なく、全体的な応答性をより信頼できる指標です。
INP 値が報告されない場合はどうなりますか？
ページが INP 値を返さない場合もあります。これには、次のようなさまざまな理由が考えられます。
- ページは読み込まれましたが、ユーザーがキーボードをクリック、タップ、または押していません。
- ページは読み込まれたが、要素のスクロールやカーソルを合わせるなど、測定されない操作でユーザーが操作を行った。
- ページを操作するスクリプトが設定されていない、検索クローラーやヘッドレス ブラウザなどの bot がページにアクセスしている。
INP の測定方法
INP は、現場でもラボでも、さまざまなツールを使用して測定できます。
業務の現場
INP の最適化の過程は、フィールド データから始めるのが理想的です。最良の場合、Real User Monitoring（RUM）のフィールド データは、ページの INP 値だけでなく、INP 値自体の原因となった特定のインタラクション、ページの読み込み中または読み込み後に発生したインタラクション、インタラクションのタイプ（クリック、キープレス、タップ）、インタラクションのどの部分が応答に影響を及ぼしたのかを特定するための貴重なタイミングを示すコンテキスト データも提供します。
ウェブサイトが Chrome ユーザー エクスペリエンス レポート（CrUX）の対象である場合は、PageSpeed Insights で CrUX を介して INP のフィールド データ（およびその他のウェブに関する主な指標）をすばやく取得できます。少なくとも、ウェブサイトの INP のオリジンレベルの画像を取得できますが、URL レベルのデータを取得できる場合もあります。
ただし、CrUX は問題の有無を通知できますが、問題の原因は通知できません。RUM ソリューションは、応答性の問題が発生しているページ、ユーザー、ユーザー操作の詳細を明らかにするのに役立ちます。INP を個々のインタラクションに帰属させることができれば、当て推量や無駄な労力を回避できます。
実験室
ページの操作が遅いことを示すフィールド データが得られたら、ラボでテストを開始するのが理想的です。ただし、フィールド データがない場合は、遅いインタラクションをラボで再現するための戦略がいくつかあります。戦略としては、一般的なユーザーフローに沿って操作をテストすることや、メインスレッドが最もビジー状態になることが多いページ読み込み時に操作することが挙げられます。これにより、ユーザー エクスペリエンスの重要な部分で低速な操作を特定できます。
INP を改善する方法
現場で遅いインタラクションを特定し、ラボデータを使用して原因を特定して最適化するプロセスをガイドするガイドとして、INP の最適化に関するガイドのコレクションが用意されています。
変更履歴
指標の測定に使用する API や、指標自体の定義にバグが見つかることもあります。そのため、必要な変更を行う必要が生じることがあります。また、こうした変更は、内部のレポートやダッシュボードに改善または回帰として表示されることがあります。
指標の実装または定義に対する変更はすべて、こちらの変更履歴に掲載されています。
これらの指標についてフィードバックがある場合は、web-vitals-feedback Google グループからお寄せください。