Interaction to Next Paint(INP)

対応ブラウザ

  • Chrome: 96。 <ph type="x-smartling-placeholder">
  • Edge: 96。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

<ph type="x-smartling-placeholder">

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

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

当然ながら他の操作より時間がかかる操作もありますが、特に複雑な操作では、何かが起こっていることを最初に視覚的に把握できるフィードバックを迅速に提供することが重要です。ブラウザが次に描画するフレームは、最も早く描画されるチャンスです。

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

次の動画では、右の例を見ると、アコーディオンが開いているという視覚的なフィードバックが即座に示されています。左の例は、反応が悪い場合と、それによってユーザー エクスペリエンスがいかに低下するかを示しています。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">をご覧ください。 <ph type="x-smartling-placeholder">
</ph> 応答性が悪い例と良い例左側では、長時間のタスクがあるとアコーディオンが開かなくなります。その結果、ユーザーはエクスペリエンスが損なわれていると思い、何度もクリックすることになります。メインスレッドが追いつくと、遅延した入力を処理するため、アコーディオンが予期せず開閉します。右側では、レスポンシブなページで、インシデントなしでアコーディオンがすばやく開きます。

このガイドでは、INP の仕組みと測定方法、改善に役立つリソースを紹介します。

INP とは

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

INP の計算方法の詳細

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

ただし、インタラクションの数が多いページでは、ランダムな中断により、応答性が高いページでのインタラクションが異常に長くなる可能性があります。ページ内で発生するインタラクションが多いほど、この可能性が高くなります。

Google では、インタラクションの数が多いページの実際の応答性をより正確に測定できるよう、インタラクション 50 回につき最も高いインタラクションを 1 つ無視しています。大半のページ エクスペリエンスではインタラクションが 50 回を超えないため、最悪のインタラクションが最も多く報告されます。その後、すべてのページビューの 75 パーセンタイルが通常どおりレポートされます。これにより、外れ値をさらに排除して、大半のユーザーが経験する、またはそれ以上の値が得られます。

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

インタラクションのレイテンシは、インタラクションを推進するイベント ハンドラのグループのうち、ユーザーがインタラクションを開始してからブラウザが次のフレームを描画するまでの時間のうち、1 つの最長時間で構成されます。

<ph type="x-smartling-placeholder">

優れた INP スコアとは

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

優れた応答性でユーザー エクスペリエンスを提供するには、モバイル デバイスとデスクトップ デバイスで分けて、現場で記録されたページ読み込みの 75 パーセンタイルを測定することをおすすめします。

  • INP が 200 ミリ秒以下、またはページの応答性が良好であることを意味します。
  • INP が 200 ミリ秒超、または 500 ミリ秒以下、またはページの応答性に改善が必要であることを意味します。
  • INP が 500 ミリ秒を超える場合、ページの応答性が悪いことを意味します。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> INP の良好な値は 200 ミリ秒以下で、低い値は 500 ミリ秒より大きく、その中間の値はすべて改善が必要です。
良好な INP 値は 200 ミリ秒以下です。低い値は 500 ミリ秒より大きくなります。

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

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

多くの場合、インタラクティビティの主な要因は JavaScript ですが、ブラウザではチェックボックス、ラジオボタン、CSS を利用したコントロールなど、JavaScript 以外のコントロールを通じてインタラクティビティを提供します。

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

  • マウスのクリック。
  • タッチスクリーンのデバイスをタップ。
  • 物理キーボードまたは画面キーボードのキーを押す。
で確認できます。 <ph type="x-smartling-placeholder">

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

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

<ph type="x-smartling-placeholder">
</ph> 2 つのインタラクションを含む、より複雑なインタラクションの描写。1 つ目はマウスダウン イベントです。これは、マウスボタンが離される前にフレームを生成し、結果としてさらに別のフレームが表示されるまで、さらなる処理を開始します。 <ph type="x-smartling-placeholder">
</ph> 複数のイベント ハンドラの操作の図。インタラクションの最初の部分は、ユーザーがマウスボタンをクリックしたときに入力を受け取ります。ただし、マウスボタンを離す前にフレームが表示されます。ユーザーがマウスボタンを離すと、次のフレームが表示される前に別の一連のイベント ハンドラが実行されます。

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

INP と First Input Delay(FID)の違い

INP は First Input Delay(FID)の後継指標です。どちらも応答性の指標ですが、FID はページの最初のインタラクションの入力遅延のみを測定しました。INP は、入力遅延からイベント ハンドラの実行にかかった時間、そして最終的にブラウザが次のフレームを描画するまで、ページ上のすべてのインタラクションを監視することで、FID を改善します。

こうした違いは、INP と FID の両方が応答性の指標の種類が異なることを意味します。FID はページでのユーザーの第一印象を評価するために設計された読み込み応答性指標でしたが、INP はページ操作の全期間でいつ発生したかにかかわらず、全体的な応答性を示すより信頼性の高い指標となります。

INP 値が報告されない場合はどうすればよいですか?

ページから INP 値が返されない場合があります。これには、次のようなさまざまな理由が考えられます。

  • ページは読み込まれましたが、ユーザーがキーボードのキーをクリック、タップ、押したことはありません。
  • ページは読み込まれましたが、ユーザーが、スクロールや要素のカーソルを合わせるなど、測定されていない操作によってページを操作しました。
  • ページが、ページを操作するスクリプトが作成されていない検索クローラーやヘッドレス ブラウザなどの bot によってアクセスされている。

INP の測定方法

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

<ph type="x-smartling-placeholder">

業務の現場

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

<ph type="x-smartling-placeholder">

ウェブサイトが Chrome ユーザー エクスペリエンス レポート(CrUX)の対象となる場合は、PageSpeed Insights の CrUX 経由(およびその他の Core Web Vitals)を介して、INP のフィールド データをすばやく取得できます。少なくとも、ウェブサイトの INP のオリジン レベルの全体像を取得できますが、場合によっては URL レベルのデータを取得することもできます。

CrUX は、問題があるかどうかを示すことはできますが、問題の原因を特定することはできません。RUM ソリューションを使用すると、応答性の問題が発生しているページ、ユーザー、ユーザー操作の詳細を確認できます。INP を個々のやり取りに結び付けられることで、当て推量や無駄な労力を回避できます。

実験室

ページの操作が遅いことを示すフィールド データが得られたら、ラボでテストを開始するのが最適です。フィールド データを使用することで、ラボで問題のあるインタラクションを再現する作業が非常に簡単になります。

ただし、フィールド データがない可能性もあります。一部のラボツールでは INP を測定できますが、ラボテスト中に生成されるページの INP 値は、測定期間中に実行されたインタラクションによって異なります。ユーザーの行動は予測不可能で非常に変動しやすいため、ラボでのテストでは、フィールド データと同じように問題の相互作用が明らかにならない場合があります。また、一部のラボツールでは、操作なしでページの読み込みしか確認されないため、ページの INP が報告されません。このような場合、[Total Blocking Time(TBT)] は INP の代替指標として妥当ですが、それ自体が INP の代わりとなる指標ではありません。

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

<ph type="x-smartling-placeholder">

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 を使用して自動的に測定され、カスタム ライブラリを通じてパフォーマンスを自己報告するページに依存しません。
Chrome ユーザーのインタラクション データが十分にないため、CrUX データセットで有意な INP 値を計算できません。
正解です。
ユーザーはスクロールやカーソルを合わせるだけでページを操作しており、INP はカウントされません。
正解です。
このページは、INP に合わせて自動的に最適化されるフレームワークを使用して作成されているため、報告する必要はありません。
不正解 - フレームワークは INP に役立ちますが、指標は引き続き関連性があり、データが利用可能であれば報告されます。

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

低速で信頼性の低いネットワーク接続でハイエンド デバイスのシミュレーションを行い、困難な条件を生み出す。
不正解 - ネットワークは役割を果たしますが、デバイスの機能によって低速なインタラクションが明らかになる可能性が高くなります。
インタラクションのテストは、ページが完全に読み込まれてアイドル状態になった後にのみ行います。
不正解 - 読み込み中の処理が遅いと、処理が遅くなる可能性があります
読み込み中にページを操作し、一般的なユーザーフローに沿って潜在的なボトルネックを特定する。
正解です。
ほとんどのユーザーが遭遇する可能性が低い、複雑なエッジケースのインタラクションに焦点を当てています。
不正解 - INP の一般的な問題を特定するには、一般的なユーザーフローの方が適しています。

この理解度チェックは Gemini 1.5 で生成され、人間がレビューしたものです。フィードバックをお寄せください をご覧ください。