Interaction to Next Paint (INP)
Interaction to Next Paint（INP）は、クリック、タップ、キー入力といったユーザーの操作のあとに、ページが視覚的に反応するまでにかかる時間を測る Core Web Vitals の指標です。2024 年 3 月、Google は INP を公式なランキング要因に昇格させ、First Input Delay（FID）を置き換えました。
Interaction to Next Paint（INP）は、クリック、タップ、キー入力といったユーザーの操作のあとに、ページが視覚的に反応するまでにかかる時間を測る Core Web Vitals の指標です。2024 年 3 月、Google は INP を公式なランキング要因に昇格させ、First Input Delay（FID）を置き換えました。
なぜ重要なのか
FID は最初の操作の遅延しか捉えませんでしたが、INP はページのライフサイクル全体にわたるすべての操作を追跡し、最も遅いものでスコアを付けます。これはユーザーが実際に感じる体感に近いものです。Google によれば、2026 年時点でデスクトップサイトの約 36%、モバイルサイトの約 45% が依然として「良好」のしきい値を満たしておらず、INP の最適化は競合ページに対する明確な差別化要因になっています。
しきい値
| 評価 | INP の値 |
|---|---|
| 良好 | 200ms 以下 |
| 改善が必要 | 200〜500ms |
| 不良 | 500ms 超 |
Chrome User Experience Report（CrUX）の実ユーザーデータの 75 パーセンタイル（p75）でスコアが算出されます。
INP を遅くする要因
長い JavaScript タスク: メインスレッドを 50ms 以上占有するタスクは、次の操作をブロックします。
入力の遅延: メインスレッドが他の作業で忙しいために、イベントハンドラが実行されるまでにかかる時間。
描画の遅延: イベント処理が完了してから、ブラウザが次のフレームを描画するまでの時間。通常は複雑な DOM やレイアウトの変更が原因です。
最適化の方法
長いタスクを分割する: setTimeout、scheduler.yield()、requestIdleCallback を使い、50ms を超えるタスクを分割します。
イベントハンドラを軽くする: クリックハンドラの中で重い処理を実行しないようにします。次の requestAnimationFrame のあとに処理を遅らせます。
不要な再レンダリングを防ぐ: React では memo、useMemo、useCallback を使い、冗長な更新を避けます。
CSS の contain を使う: contain: content のようなプロパティはレイアウトと描画の範囲を限定し、フレームの描画を軽くします。
サードパーティのスクリプトを遅延させる: 広告、分析、チャットウィジェットを async/defer で読み込み、操作をブロックしないようにします。
測定ツール: PageSpeed Insights、Web Vitals の Chrome 拡張機能、Search Console の Core Web Vitals レポートで実際の INP データを取得します。
Sources: