このページは Cloud Translation API によって翻訳されました。

Interaction to Next Paint（INP）

Jeremy Wagner

対応ブラウザ

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

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

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

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

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

</ph>

応答性が悪い例と良い例左側では、長時間のタスクがあるとアコーディオンが開かなくなります。これにより、ユーザーはエクスペリエンスに問題があると思い、複数回クリックすることになります。メインスレッドが追いつくと、遅延した入力を処理するため、アコーディオンが予期せず開閉します。右側では、レスポンシブなページで、インシデントなしでアコーディオンがすばやく開きます。

このガイドでは、インプレッション数（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 ミリ秒を超える場合、ページの応答性が低いことを意味します。

良好な INP 値は 200 ミリ秒未満、低い値は 500 ミリ秒を超えます。その間の値は改善が必要です。 — 適切な INP 値は 200 ミリ秒未満です。低い値は 500 ミリ秒より大きくなります。

インタラクションに含まれるもの

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

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

INP の目的上、以下のインタラクションタイプのみが確認されます。

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

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

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

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

ページの 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 が報告されません。このような場合、[Total Blocking Time（TBT）] は INP の妥当な代替指標ですが、それ自体が INP の代わりとなる指標ではありません。

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

INP を改善する方法

INP の最適化に関するガイドのコレクションには、現場で遅いインタラクションを特定するプロセスや、ラボデータを使用して原因を特定して最適化するプロセスのガイドがあります。

変更履歴

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

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

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

理解度テスト

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

ページの最初のコンテンツが表示されるまでにかかる時間を測定します。

不正解 - これは First Contentful Paint の説明です

ページの視覚的な安定性を定量化し、予期しないレイアウトのずれを最小限に抑える。

正しくない - これは Cumulative Layout Shift を説明しています

ページが完全にインタラクティブになるまでの時間を評価する。

不正解です。これは操作可能になるまでの時間に関連しますが、INP は特にユーザー入力に対する応答性に重点を置いています

ユーザーが開始したすべての操作またはほとんどの操作で、ユーザーが操作を開始してから次のフレームがペイントされるまでの時間を最小限に抑える。

正解です。

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

マウスのクリック。

正解です。

マウスホイールやトラックパッドによるページのスクロール。

不正解 - INP ではスクロールが考慮されません

タッチスクリーンをタップする。

正解です。

要素にカーソルを合わせます。

不正解 - INP ではホバーは考慮されません

キーボードのキーを押す。

正解です。

ページを拡大または縮小する。

誤り - INP はズームを考慮しません

「レイテンシ」はどうなっていますか？どうすればよいでしょうか。

ブラウザがインタラクションのイベントハンドラを処理する時間。

不正解 - これは処理時間のみを考慮し、入力遅延や次のフレームを表示する時間を考慮していません。

ページ上のすべてのインタラクションによって視覚的なレスポンスが生成されるまでの平均時間。

不正解 - INP は平均ではなく最長のインタラクションを重視

インタラクションに関連付けられたイベントハンドラの処理をブラウザが開始するのにかかる時間。

不正解 - 処理時間とレンダリング時間ではなく、入力遅延のみが考慮されています

インタラクションの開始から次のフレームが完全に表示されるまでの時間。

正解です。

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

INP は、ページの最初のコンテンツが表示されるまでの時間を測定します。一方、FID はユーザー入力に対する応答性を測定します。

誤り - これは INP ではなく First Contentful Paint を表しています

INP ではすべてのインタラクションの継続時間が考慮されますが、FID では最初のインタラクションの入力遅延のみが測定されます。

正解です。

INP と FID は、ページがインタラクティブになるタイミングの異なるタイムスタンプを測定します。

不正解です。INP と FID は、インタラクションが発生したタイミングに関係なく、ページがインタラクションにどれだけ早く反応するかを測定したものです。

違いはありません。INP と FID は同じ指標の 2 つの異なる名前にすぎません。

不正解 - それぞれに異なる定義がある

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

ページで、INP データをレポートしないカスタムパフォーマンス測定ライブラリが使用されています。

誤り - INP はウェブプラットフォーム API を使用して自動的に測定され、ページがカスタムライブラリを介してパフォーマンスを自己報告することはありません。

CrUX データセットで有意な INP 値を計算するのに十分な Chrome ユーザーのインタラクションデータがありません。

正解です。

ユーザーはスクロールやカーソルを合わせるだけでページを操作しており、INP はカウントされません。

正解です。

このページは、INP 向けに自動的に最適化されるフレームワークを使用して作成されているため、報告する必要はありません。

不正解 - フレームワークは INP に役立ちますが、指標は引き続き関連性があり、データが利用可能であれば報告されます。

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

低速で信頼性の低いネットワーク接続を持つハイエンドデバイスをシミュレートして、厳しい条件を作り出す。

不正解 - ネットワークは役割を果たしますが、デバイスの機能によって低速なインタラクションが明らかになる可能性が高くなります。

ページが完全に読み込まれてアイドル状態になった後にのみ、インタラクションをテストする。

正しくない - 読み込み中に遅いインタラクションを見逃す可能性があります

読み込み中にページを操作し、一般的なユーザーフローに沿って潜在的なボトルネックを特定します。

正解です。

ほとんどのユーザーが遭遇する可能性の低い、複雑なエッジケースのインタラクションに焦点を当てる。

不正解 - 一般的なユーザーフローの方が、INP の典型的な問題を特定するのに適しています。

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