Interaction to Next Paint(INP)

対応ブラウザ

  • Chrome: 96。
  • Edge: 96。
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

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

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

他の操作よりも時間がかかる操作もありますが、特に複雑な操作では、何かが起こっていることをユーザーに知らせるために、最初の視覚的なフィードバックを迅速に提供することが重要です。ブラウザが描画する次のフレームが、これを実行できる最短のタイミングです。

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

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

レスポンスの良し悪しの例。左側では、長いタスクにより、アコーディオンが開きません。その結果、ユーザーはエクスペリエンスが損なわれていると思い、複数回クリックすることになります。メインスレッドが追いつくと、遅延した入力が処理され、アコーディオンが予期せず開閉します。右側では、レスポンシブなページで、インシデントなしでアコーディオンがすばやく開きます。

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

INP とは何ですか?

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

INP は、ページで行われたすべてのインタラクションをモニタリングして計算されます。ほとんどのサイトでは、レイテンシが最も低いインタラクションは INP として報告されます。

ただし、インタラクションが多いページでは、ランダムな問題が発生すると、通常はレスポンシブなページでも異常に高いレイテンシのインタラクションが発生する可能性があります。ページ内で発生するインタラクションが多いほど、この可能性が高くなります。

インタラクションが多いページの実際の応答性をより正確に測定するため、50 件のインタラクションごとに最も高いインタラクションを 1 件無視します。ほとんどのページ エクスペリエンスでは 50 回を超えるインタラクションが発生しないため、最も悪いインタラクションのみが報告されることが多いです。その後、すべてのページビューの 75 パーセンタイルが通常どおり報告されます。これにより、さらに外れ値が除外され、ほとんどのユーザーが経験する値以上が算出されます。

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

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

優れた INP スコアとは

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

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

  • INP が 200 ミリ秒未満または 200 ミリ秒の場合、ページの応答性は良好です。
  • INP が 200 ミリ秒以上、500 ミリ秒以下、またはページの応答性に改善が必要であることを意味します。
  • INP が 500 ミリ秒を超える場合、ページの応答性が低いことを意味します。
良好な INP 値は 200 ミリ秒未満、低い値は 500 ミリ秒を超えます。その間の値は改善が必要です。
適切な INP 値は 200 ミリ秒未満です。低い値は 500 ミリ秒より大きくなります。

インタラクションの内容

メインスレッドでのインタラクションを示す図。ブロック タスクの実行中にユーザーが入力を行った。これらのタスクが完了するまで入力は遅延され、その後、ポインタアップ、マウスアップ、クリックのイベント ハンドラが実行され、次にフレームが表示されるまでレンダリングとペイント処理が開始されます。
インタラクションのライフサイクル。入力遅延は、イベント ハンドラの実行が開始されるまで発生します。これは、メインスレッドのタスクが長いなどの要因によって発生する可能性があります。その後、インタラクションのイベント ハンドラ コールバックが実行され、次のフレームが表示されるまで遅延が発生します。

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

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

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

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

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

2 つのインタラクションを含むより複雑なインタラクションの描写。1 つ目はマウスダウン イベントです。これは、マウスボタンが離される前にフレームを生成し、結果としてさらに別のフレームが表示されるまで、さらなる処理を開始します。
複数のイベント ハンドラとのやり取りを示す図。インタラクションの最初の部分は、ユーザーがマウスボタンを押下したときに入力を受け取ります。ただし、マウスボタンを離す前にフレームが表示されます。ユーザーがマウスボタンを放すと、次のフレームが表示される前に、別の一連のイベント ハンドラを実行する必要があります。

ページの INP は、ユーザーがページを離れたときに計算されます。その結果、ページのライフサイクル全体にわたる全体的な応答性を表す単一の値が得られます。INP が低いということは、ページがユーザー入力に対して確実に応答していることを意味します。

INP と初回入力遅延(FID)の違いは何ですか?

INP は First Input Delay(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 グループでフィードバックを送信してください。

理解度テスト

INP 指標の主な目標は何ですか。

ページの視覚的な安定性を定量化し、予期しないレイアウトのずれを最小限に抑える。
ページが完全に操作可能になるまでにかかる時間を評価します。
ユーザーが開始したすべての操作またはほとんどの操作で、ユーザーが操作を開始してから次のフレームがペイントされるまでの時間を最小限に抑える。
ページの最初のコンテンツが表示されるまでにかかる時間を測定します。

INP の計算では、次のインタラクションの種類のうちどれが測定されますか?該当するものをすべて選択してください。

要素にマウス カーソルを合わせる。
キーボードのキーを押す。
マウスでクリックする。
タッチスクリーンをタップする。
ページの拡大または縮小。
マウスホイールまたはトラックパッドを使用してページをスクロールする。

INP でインタラクションの「レイテンシ」はどのように定義されますか?

ページ上のすべてのインタラクションが視覚的なレスポンスを生成するまでにかかる平均時間。
インタラクションの開始から次のフレームが完全に表示されるまでの時間。
ブラウザがインタラクションのイベント ハンドラを処理する時間。
ブラウザがインタラクションに関連付けられたイベント ハンドラの処理を開始するまでの時間。

INP と FID の違いは何ですか?

INP と FID は、ページがインタラクティブになるタイミングの異なるタイムスタンプを測定します。
INP ではすべてのインタラクションの継続時間が考慮されますが、FID では最初のインタラクションの入力遅延のみが測定されます。
INP はページの最初のコンテンツが表示されるまでの時間を測定し、FID はユーザー入力に対する応答性を測定します。
違いはありません。INP と FID は同じ指標の 2 つの異なる名前にすぎません。

PageSpeed Insights などのツールのページで INP データを使用できないのはどのような場合ですか?

ユーザーがページを操作したのはスクロールとホバーのみで、これらは INP の対象外です。
Chrome ユーザーのインタラクション データが十分にないため、CrUX データセットで有意な INP 値を計算できません。
このページは、INP 向けに自動的に最適化されるフレームワークを使用して作成されているため、報告する必要はありません。
ページで INP データを報告しないカスタム パフォーマンス測定ライブラリが使用されている。

ラボ環境で時間のかかるインタラクションを再現するために最も効果的な戦略は何ですか。

ページが完全に読み込まれてアイドル状態になった後にのみ、インタラクションをテストする。
ほとんどのユーザーが遭遇する可能性の低い、複雑なエッジケースのインタラクションに焦点を当てる。
低速で信頼性の低いネットワーク接続を持つハイエンド デバイスをシミュレートして、厳しい条件を作り出す。
読み込み中にページを操作し、一般的なユーザーフローに沿って潜在的なボトルネックを特定します。

このクイズは Gemini 1.5 によって生成され、人間によって確認されています。フィードバックをお寄せください