INPとは？原因と改善方法を解説

INP（Interaction to Next Paint）とは、ユーザーがクリック・タップ・キーボード入力などの操作をしてから、ブラウザがその結果を次の画面描画として表示するまでの応答時間を見る指標です。

ページが早く表示されても、ボタンを押してから反応するまでに時間がかかれば「操作しにくいサイト」と感じます。 INPは、この「操作への反応の速さ」を測るCore Web Vitalsの指標です。

30秒でわかる結論

INPとは？

INPは「Interaction to Next Paint」の略です。 ユーザーがページを操作してから、その操作に対する視覚的な変化が画面に描画されるまでの時間を測ります。

たとえば、メニューボタンをタップしたのにメニューが開くまで0.8秒かかる場合、ユーザーは「反応が遅い」と感じます。 このような操作応答性を評価するのがINPです。

単なるマウス移動やスクロールそのものは、INPの代表的な評価対象とは異なります。

INPの基準は何ms？

Core Web Vitalsでは、実際のユーザーデータを評価するとき、ページ訪問の75パーセンタイルを基準として見る考え方が使われます。 つまり、一部の高速な利用者だけではなく、多くのユーザーが十分速く操作できているかを見ることが重要です。

INPは何を測っている？

INPは、操作開始から次の描画までを大きく3段階に分けて考えると分かりやすくなります。

どこに時間がかかっているかによって改善方法が変わります。

入力遅延とは？

入力遅延は、ユーザーがボタンを押してからJavaScriptのイベント処理が始まるまでの待ち時間です。

ブラウザのメインスレッドで別の長い処理が動いていると、新しいクリックやタップをすぐ処理できません。

このような状態では、イベント処理自体が短くてもINPが悪化します。

処理時間とは？

処理時間は、クリック・タップなどのイベントを受け取った後、イベントリスナーが実際に処理を行う時間です。

クリック時に大量の計算、DOM変更、外部ライブラリの処理などを一度に実行すると長くなります。

表示遅延とは？

イベント処理が終わっても、ブラウザがすぐ画面を更新できるとは限りません。 スタイル計算、レイアウト、描画などが重いと、次の画面表示まで時間がかかります。

INPはJavaScriptだけではなく、「その後に画面が描画されるまで」を含めて測る点が重要です。

INPが悪くなる主な原因

原因1．長いJavaScriptタスク

INP悪化の代表的な原因は、メインスレッドを長時間占有するJavaScriptです。

ブラウザはJavaScript処理とユーザー操作への応答を同じメインスレッドで行う場面が多いため、長い処理が実行されている間はクリックへの反応が遅れることがあります。

原因2．第三者スクリプトが多い

広告、アクセス解析、チャット、ヒートマップ、SNS埋め込みなどの第三者スクリプトもJavaScriptを実行します。

自分が書いたコードでなくても、イベント処理や長いタスクが発生すればINPへ影響します。

原因3．WordPressプラグインが多い

プラグイン数そのものだけでINPは決まりません。 ただし、フロント側へJavaScriptを大量に追加するプラグインが複数あると、操作時の処理が重くなることがあります。

原因4．大量のDOM要素

DOMは、ブラウザがHTMLを画面構造として扱うための仕組みです。 ページ内の要素数が非常に多く、操作時に大量のDOMを書き換えると、スタイル計算やレイアウト処理が重くなることがあります。

特に巨大なメニュー、商品一覧、絞り込みUIなどでは注意が必要です。

INPとFIDの違い

INPは、以前Core Web Vitalsで使われていたFID（First Input Delay）に代わる応答性指標です。

FIDは「最初の入力が処理開始されるまで」だけを見ていました。 INPは操作後の処理や描画まで含めるため、ユーザーが実際に感じる応答性をより広く評価できます。

INPはどこで確認する？

PageSpeed Insights

PageSpeed Insightsでは、Chrome User Experience Reportの実ユーザーデータが利用可能なページ・サイトについて、INPを確認できます。

Search Console

Search ConsoleのCore Web Vitalsレポートでは、実ユーザーデータをもとに問題のあるURL群を確認できます。

Chrome DevTools

開発者ツールのPerformanceパネルでは、実際に操作しながら遅いインタラクションを調べられます。 入力遅延、処理時間、表示遅延のどこが長いかを切り分けるのに役立ちます。

INPを改善する方法

INP改善では、まず「どの操作が遅いか」を特定し、その操作の入力遅延・処理時間・表示遅延を調べます。

改善1．不要なJavaScriptを減らす

ページで使っていないJavaScriptや、すでに不要な第三者タグを削除すると、メインスレッドの空き時間を増やせる場合があります。

改善2．長い処理を分割する

1つの長いJavaScript処理を複数の小さなタスクへ分けると、途中でブラウザがユーザー操作を処理しやすくなります。

ただし細かく分けすぎると全体の処理効率が落ちることもあるため、実測しながら調整します。

改善3．操作直後の不要処理を後回しにする

ユーザーがボタンを押した直後は、まず画面へ反応を返すことを優先します。

集計、ログ処理、重い計算など、次の描画前に終わらせる必要がない処理は後回しにできる場合があります。

改善4．DOM更新を減らす

操作のたびに大量の要素を追加・削除・並び替えすると、JavaScript処理だけでなくレイアウトと描画も重くなります。

改善5．WordPressテーマ・プラグインを切り分ける

WordPressでは、INP悪化の原因がテーマやプラグインのJavaScriptにあることがあります。

サーバーを速くすればINPは改善する？

改善する場合はありますが、INPの中心はブラウザ上の操作応答性です。

サーバー応答が遅く、操作時にAPI通信を待ってからUIを更新する設計なら影響します。 一方、重いJavaScriptやDOM処理が原因なら、高性能サーバーへ変更しても直接は解決しません。

キャッシュでINPは改善する？

ページキャッシュは初期表示を速くするのに有効ですが、クリック後の重いJavaScript処理を直接軽くするものではありません。

そのため「キャッシュを入れればINPも必ず改善する」とは考えないでください。

INPとLCP・CLSの違い

3つともCore Web Vitalsですが、改善ポイントは異なります。

INPとSEOの関係

INPはCore Web Vitalsの1つで、Googleがページエクスペリエンスを理解するための指標群に含まれます。

ただし、INPを200ms以下にしただけで検索順位が大きく上がると断定することはできません。 Google検索ではコンテンツの関連性や品質など、多くのシグナルが使われます。

どんなサイトでINPを重視する？

教科書判定

FAQ

まとめ