INP（Interaction to Next Paint）は、ウェブサイトの操作に対するユーザーの体感レスポンスを測る新しいウェブパフォーマンス指標です。2024年3月からGoogleのコアウェブバイタルの1つとして正式採用され、SEOにも大きな影響を与えるため、Web制作者・マーケターにとって必須の知識となっています。
この記事では、INPとは何か、なぜ重要なのか、改善のポイントまでを詳しく解説します。
INPとは何か？
INP（Interaction to Next Paint）とは、ユーザーがページ上で行った操作（クリック、タップ、キーボード操作など）に対し、次に画面が視覚的に変化するまでの時間を計測する指標です。
これまで主に使われていた「FID（First Input Delay）」では、初回の操作だけを測っていましたが、INPではページ滞在中のすべての操作を評価対象にし、その中で最も遅かった応答時間を基にスコアが決定されます。
なぜINPが重要なのか？
ユーザーは、クリックや入力に対して即座に反応があることを期待します。たとえば、ボタンをクリックしても何の変化もない場合、「このサイトは重い」「バグってる？」と感じてしまいます。
このような操作への遅延が続くと、ユーザーの離脱率が上がり、結果的にCVR（コンバージョン率）やSEO評価にも悪影響が出ます。
Googleはユーザー体験を重視しており、INPのようなUX指標をランキングに反映しています。
INPの評価基準とは？
GoogleはINPの評価を以下のように定めています。
- 良好（Good）：200ms以下
- 改善が必要（Needs Improvement）：200～500ms
- 不良（Poor）：500ms以上
「最も重い操作に対してこれだけの応答時間がかかる」という意味なので、瞬間的に遅くなる処理があるだけでも評価が下がってしまいます。
INPが悪化する主な原因
INPが高く（悪く）なる要因として、次のようなものがあります。
- JavaScriptの処理が重く、UIがすぐに更新されない
- 長時間のメインスレッドブロッキング
- ユーザー操作時に大量のDOM更新が発生
- 不要なアニメーションや遅延処理
- タッチイベントやクリックイベントの最適化不足
特に**ReactやVueなどのSPA（シングルページアプリケーション）**では、適切なレンダリング管理ができていないと、INPが悪化しやすい傾向があります。
INPを改善する方法
INPを最適化するには、ユーザー操作に素早く反応できるよう、以下のような改善が効果的です。
- 不要なJavaScriptを削減・遅延読み込みする
- インタラクティブな要素のイベント処理を最適化する
- CSSアニメーションは軽量なものにする
- バックグラウンド処理をWeb Workerに分離
- 優先度の低いDOM更新をrequestIdleCallbackなどで後回しにする
- ReactのuseTransitionやmemoを活用して再レンダリングを制御
また、Chrome DevToolsやPageSpeed Insightsなどのツールで、実際にどの操作がボトルネックになっているか確認することが重要です。
まとめ：INPはユーザー体験の鍵を握る
Interaction to Next Paint（INP）は、単なる表示速度では測れなかった「実際の使いやすさ」を評価する指標です。Googleも重視していることから、SEOを考える上でも、ユーザー満足度を高める上でも、必ず改善すべきポイントとなっています。
Webサイトの評価を一段階アップさせたいなら、INPの最適化に着手してみましょう。
