INP解説 — Interaction to Next Paintの詳細ガイド

Interaction to Next Paint (INP) の理解

INPは2024年3月にFirst Input Delay (FID) に代わりCore Web Vitalになりました。FIDは最初のインタラクションの遅延のみを測定していましたが、INPはページライフサイクル全体を通じたすべてのインタラクションのレイテンシを測定し、最も悪いもの（外れ値を除外）を報告します。

INPの測定方法

INPにおける「インタラクション」には以下が含まれます：

• クリック（mousedown → mouseup → click）
• タップ（touchstart → touchend → click）
• キー押下（keydown → keyup）

スクロールとホバーはINPの目的ではインタラクションではありません。

各インタラクションについて、INPはユーザー入力から次のフレームが描画されるまでの合計時間を測定します：

INP = 入力遅延 + 処理時間 + プレゼンテーション遅延

INP閾値

評価	値
良好	≤ 200ms
要改善	≤ 500ms
不良	> 500ms

INP不良の一般的な原因

1. 長いJavaScriptタスク（>50ms）がメインスレッドをブロック
2. イベントハンドラでの重いDOM操作
3. JSによる高コストなスタイル再計算
4. メインスレッドの作業を追加するサードパーティスクリプト
5. フレームワークの重いSPAにおけるハイドレーションオーバーヘッド

最適化テクニック

メインスレッドへの譲渡：

// scheduler.yield()の使用（新しいAPI）
async function handleClick() {
  doPartOne();
  await scheduler.yield();
  doPartTwo();
  await scheduler.yield();
  doPartThree();
}

重い計算にはWeb Workerを使用： データ処理、ソート、フィルタリング、複雑な計算をメインスレッドから完全に移動します。

入力ハンドラのデバウンス： 高コストな操作をトリガーするinputやkeydownイベント（検索など）では、すべてのキーストロークを処理しないようにハンドラをデバウンスします。