INPとは？｜SEO関連用語集

2025年10月28日

読み方: アイエヌピー（Interaction to Next Paint）

概要

INPとは、ページ全体のすべてのインタラクション（クリック、タップ、キーボード操作）に対する応答性を評価するCore Web Vitalsの指標で、2024年3月にFIDに代わって公式指標となりました。

詳細説明

INP（Interaction to Next Paint）とは、ページ訪問中のすべてのインタラクションのレイテンシを測定し、ページ全体の応答性を包括的に評価する指標です。各インタラクションについて、入力遅延、処理時間、表示遅延の合計を測定します。Googleは200ミリ秒以下を「良好」、200〜500ミリ秒を「改善が必要」、500ミリ秒超を「不良」と定義しています。FIDが最初のインタラクションのみを測定したのに対し、INPはページのライフサイクル全体を通じた応答性を評価するため、より実用的で包括的な指標とされています。2024年3月にCore Web Vitalsの正式指標として採用され、Googleの検索ランキングに直接影響するようになりました。

重要性

INPが重要な理由は以下の通りです。

2024年3月にCore Web Vitalsの正式な指標となり、Googleの検索ランキングに直接影響する
ユーザーがボタンをクリックしたり、フォームに入力したりする際の応答速度は、ユーザー体験の質を大きく左右する
調査によると、INPが500msを超えるとユーザーの満足度が大幅に低下し、離脱率が上昇することが示されている
FIDが最初のインタラクションのみを評価したのに対し、INPはページ全体の応答性を測定するため、より正確なUX評価が可能
特にインタラクティブな要素が多いWebアプリケーション、ECサイト、SaaSプロダクトでは、INP最適化が不可欠

具体例・実践方法

INP改善のための実践方法

長いタスクの分割

50ms以上かかるJavaScript処理を小さく分割
`setTimeout()`や`scheduler.yield()`でタスクを分散
メインスレッドを定期的に解放し、インタラクションに応答できる状態を維持

インタラクションハンドラの最適化

イベントリスナー内の重い処理を最小化
不要な処理は遅延実行またはWeb Workerに移行
イベントデリゲーションで大量のリスナーを削減

Scheduler APIの活用

`scheduler.yield()`でメインスレッドを定期的に解放
`scheduler.postTask()`で優先度付きタスクスケジューリング
重要なインタラクションを優先的に処理

モダンフレームワークの活用

React 18以降の並行レンダリング機能（Concurrent Features）
React Server Componentsでクライアント側のJavaScript削減
Partial Hydration（部分的ハイドレーション）で初期化負荷を軽減

debounceとthrottleの活用

頻繁なイベント処理（スクロール、リサイズなど）を制御
入力フィールドの自動補完などでdebounceを使用

Webワーカーの活用

計算処理をバックグラウンドスレッドで実行
メインスレッドのブロッキングを回避

注意点・補足

INP最適化における注意点は以下の通りです。

INPはフィールドデータ（実際のユーザー体験）で測定されるため、ラボ環境（Lighthouse）ではTBT（Total Blocking Time）を代替指標として使用する
INPは98パーセンタイル値で評価されるため、一部の遅いインタラクションが全体スコアに大きく影響する
サードパーティスクリプト（広告、アナリティクス、チャットボットなど）がINPを大幅に悪化させる可能性があるため、慎重に管理する
大規模なDOM操作やレイアウト再計算がINPを悪化させるため、仮想スクロールなどの技術を検討する
Chrome User Experience Report（CrUX）でフィールドデータを確認し、実際のユーザー体験を把握することが重要

参考リンク・引用元

この記事が気に入ったら
フォローしてね！

Follow @lynx_seo

よかったらシェアしてね！

URLをコピーしました！

INPとは？｜SEO関連用語集

概要

詳細説明

重要性

具体例・実践方法

関連用語

注意点・補足

最新トレンド（2025年）

参考リンク・引用元