Domain 128 / 225
INP（Interaction to Next Paint）はクリック / タップから次の描画までの応答性
INP の要点
INP は 2024 年 3 月に FID を置き換えた Core Web Vitals 指標。ページ内全インタラクションの 75% が完了する時間を測定。良好は 200ms 以内。SPA / 大規模 JS サイトで対策必須
なぜこれを学ぶか
INP は 2024 年に Core Web Vitals に正式追加された比較的新しい指標。 FID（First Input Delay）からの置き換えで、より厳しく評価される。
JS 重めのサイト（SPA / 管理画面 / インタラクティブ コンテンツ）で必須。
学ばないと起きること
| よくある事故 | 被害 |
|---|---|
| FID 時代の対策で安心 | INP は別指標、対策不足 |
| SPA で重い JS のまま | INP 不良で SEO 評価減 |
学ぶメリット
- INP 改善でモバイル評価向上
- インタラクティブ性能の体系的最適化
- 商談で「INP vs FID」を即答
仕組み
INP の定義
公式: ユーザー インタラクション（クリック / タップ / キー入力）から、次の描画完了までの時間。
| 評価 | 時間 |
|---|---|
| 良好 | 200ms 以内 |
| 改善が必要 | 200-500ms |
| 不良 | 500ms 超 |
FID からの主な変更
| FID | INP | |
|---|---|---|
| 対象 | 最初のインタラクションのみ | 全インタラクションの 75% |
| 測定 | 入力遅延のみ | 入力 + 処理 + 描画 |
| 厳しさ | 比較的緩い | 厳しい |
INP は実質的に FID の数倍厳しい指標。
INP の構成要素
- 入力遅延（メインスレッドが暇になるまで）
- 処理時間（イベントハンドラ実行）
- 表示遅延（レンダリング完了まで）
キー概念
Long Tasks の削減
50ms 超のタスクが INP の主因:
| 対策 | 効果 |
|---|---|
| タスク分割（setTimeout / scheduler.yield） | UI ブロック削減 |
| Web Worker でオフロード | バックグラウンド処理 |
| ライブラリの軽量化 | JS 実行時間短縮 |
| Code Splitting | 不要 JS の遅延読み込み |
React での INP 最適化
| 対策 | 効果 |
|---|---|
| React.memo で再レンダリング削減 | 計算量削減 |
| useMemo / useCallback | 値・関数の再生成削減 |
| Suspense / startTransition | 優先度の低い更新を遅延 |
| 仮想化（react-window） | 大量リスト対応 |
| Server Components | クライアント JS 削減 |
イベントハンドラの最適化
// 重い処理を即実行（INP 不良）
button.onclick = () => {
expensiveCalculation();
}
// requestIdleCallback で延期（INP 改善）
button.onclick = () => {
requestIdleCallback(() => expensiveCalculation());
}
第三者スクリプトの影響
GA / 広告 / チャットウィジェット等:
- メインスレッド占有
- INP の主要原因
- 必要最小限に絞る
- async / defer 指定
よくある誤解
| よくある誤解 | 実際のところ | 出典 |
|---|---|---|
| FID と INP は同じ感覚で対策可 | INP は厳しい、追加対策必要 | INP ガイド |
| デスクトップは関係ない | モバイル評価が SEO に直結だが、デスクトップも測定 | 同上 |
実務での適用
INP 改善の優先順位
- PageSpeed Insights で INP の悪い特定インタラクション特定
- その操作のイベントハンドラ計測
- Long Tasks 削減
- 第三者スクリプト精査
- 4 週間後に Search Console で反映確認
モバイル INP の重視
公式: モバイル端末は CPU が遅く、INP が悪化しやすい。
- モバイル端末での実測
- モバイル想定でのテスト
トラブル別の対処
| 症状 | 確認すべきこと |
|---|---|
| 特定操作で INP 不良 | 該当イベントハンドラの計測 |
| サイト全体で INP 悪化 | 第三者スクリプト / フレームワーク全体 |
公式ソース
自己テスト
Q1. INP の良好基準は？
200ms 以内（不良は 500ms 超）
Q2. FID と INP の主な違いは？
FID は最初のインタラクションのみ、INP は全インタラクションの 75%。INP は 3 倍程度厳しい
Q3. INP 改善の主要アプローチは？
Long Tasks 削減 / 第三者スクリプト精査 / イベントハンドラ最適化 / フレームワーク最適化（memo / Suspense）
これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。