30秒で理解
INP（Interaction to Next Paint）は、ページ上で利用者がクリック・タップ・キー入力をした時点から、その操作結果を含む次のフレームをブラウザが描画できるまでの時間です。短いほど、メニューを開く、ボタンを押す、フォームへ入力するといった操作にすぐ反応するページです。
店員に注文してから、注文票を受け取るまでの待ち時間です。注文を受け付けただけでなく、画面に「受け付けました」と出るところまでを測ります。裏側の処理が完了するまでの時間すべてを測る指標ではありません。
INPはページを開いた直後の1回だけではなく、滞在中に起きた操作を見ます。最も遅い操作に近い値が、ページ全体の応答性として記録されます。操作が一度も起きなければ、INPの値が報告されないこともあります。
どういう仕組みか
1回の操作の遅延は、次の3つに分けて考えると調査しやすくなります。
| 区分 | 何を測るか | 起きやすい原因 |
|---|---|---|
| 入力遅延 | 操作されてからイベント処理が始まるまで | メインスレッドを長い処理がふさいでいる |
| 処理時間 | イベントハンドラーが動き始めてから終わるまで | 大きなJavaScript処理、同期的な計算 |
| 表示遅延 | 処理が終わってから次のフレームが描画されるまで | レイアウト計算、複雑な描画、大きなDOM |
対象になるのは、マウスのクリック、タッチ操作、キーボード入力です。スクロールやマウスホバー、ズームはINPの操作として数えません。
どこで見えるか
利用者の実環境での傾向は Search Console の「ウェブに関する主な指標」で確認します。モバイルとパソコンは分けて表示され、URLグループごとに「良好」「改善が必要」「不良」の状態が出ます。
| INP | Search Consoleでの状態 |
|---|---|
| 200ms以下 | 良好 |
| 200ms超、500ms以下 | 改善が必要 |
| 500ms超 | 不良 |
この値は、直近28日間の実際の利用状況をもとにしたURLグループの値です。個別URLを今すぐ試した結果ではありません。画面にデータが無い場合は、データ量が足りない可能性があります。個別ページをその場で試すときは PageSpeed Insights の実行結果を使います。
よくある誤解
INPは「ページが表示されるまでの速さ」ではありません。最初の表示はLCP、表示中のレイアウトのずれはCLS、操作への反応はINPというように、見る場面が異なります。
| 誤解 | 実際の意味 |
|---|---|
| 最初のクリックだけ測る | ページ滞在中のクリック・タップ・キー入力を対象にする |
| APIの応答完了までを測る | 次のフレームに操作結果が描画できるまでを主に測る |
| スクロールが遅いとINPが悪化する | スクロールそのものはINPの対象ではない。ただしスクロール後のタップなどは対象になる |
| PageSpeed Insightsの値とSearch Consoleの値は同じ | 前者は個別URLのテスト、後者は実利用データのURLグループで、数字が一致しないことがある |
これを踏まえて何をするか
まず、実利用データで問題の端末とURLグループを絞ります。
| 順番 | 開く画面 | 次に行う操作 |
|---|---|---|
| 1 | Search Console → ウェブに関する主な指標 | モバイルとパソコンを別々に開き、「改善が必要」または「不良」のINP行を選ぶ |
| 2 | INPの問題詳細 | 例として表示されたURLを1つ開き、同じURLグループのページを確認する |
| 3 | PageSpeed Insights | 問題詳細からテストを開き、遅い操作と「メインスレッド」の長い処理を確認する |
| 4 | ブラウザの開発者ツール → Performance | その操作を再現し、クリックやキー入力から次の描画までを記録する |
| 5 | 修正後のSearch Console | 問題詳細へ戻り、「検証を開始」を押して、実利用データで変化を追う |
原因がJavaScriptの長い処理なら、まず操作直後に必要な画面更新を実行し、後回しにできる処理を次のフレーム以降へ分けます。描画が重い場合は、操作で更新するDOMの範囲とレイアウト計算を確認します。修正対象が決まらないときは、PageSpeed Insightsで表示された具体的な遅い操作を1つだけ開き、Performanceの記録でその操作の前後を見ます。