Googleがコアウェブバイタルの新たな指標として導入した「INP」は、ボタンやタブなど、ユーザーの操作に対する画面の反応速度を測る指標です。
本記事では、INPの意味やSEOとの関係、旧指標FIDとの違い、主な低下原因から改善方法までを丁寧に解説します。
INPの仕組みを正しく理解し、パフォーマンスとUXの両方を向上させましょう。

目次

INPとは？

INPとは「Interaction to Next Paint」の略で、ユーザーがウェブページ上で操作（タップ・クリックなど）したあと、画面に変化が現れるまでの時間を測定する指標です。

たとえば、以下のようなアコーディオンメニューをクリックした場合、実際にメニューが開くまでの時間が（応答時間）がINPになります。

INPが悪いとどうなるのか？

INPは、ユーザーが操作したときに、ページがどれだけ速く反応するかを評価します。
とくにスマホ利用者にとっては、ワンタップごとの反応速度が重要です。
反応が遅いと「押したのに反応しない」と感じさせ、ユーザーの離脱につながります。

INPがSEOに与える影響

Googleは検索ランキングにユーザー体験（UX）を反映させると公言しており、INPもランキングシグナルに影響を与えます。

ただし、INPがSEOに与える影響は、間接的なものです。

Google公式の発表では「ユーザー体験の指標（ページエクスペリエンス）が優れていても、より重要なのはコンテンツ質であり、コンテンツが同程度の内容ならユーザー体験が良いページが優先される」と説明しています。

つまり、INPのスコアが多少低くても、順位が上がらないわけではありません。
しかし、競合ページとコンテンツの質が拮抗している場合は、INPのスコアがSEOに影響を与えることになります。

あわせて読みたい

コアウェブバイタル(core web vitals)とは？指標や計測方法、SEOに与える影響を解説

 

INPの理想値と評価基準

INPの値は次のように分類されます。

良好 200ミリ秒以下
改善が必要 200〜500ミリ秒
不良 500ミリ秒以上

引用：https://web.dev/articles/inp?hl=ja

Search Consoleで「INPの問題：200ミリ秒超」と出ている場合、改善対象とみなされているということです。
 

FIDとINPの違いや変更された背景

INPは 2024年3月 にコアウェブバイタルの正式な指標に加わった新基準です。
それ以前は、初回入力の遅延を測る FID（First Input Delay） が使われていました。INPをCoreWebVitalsに導入  |  Google検索セントラル

INP計測定義を、FIDの計測定義との違いを踏まえつつ解説します。

FIDとINPの測定対象の違い

FIDとINPは、どこからどこまでの遅延を測るかが大きく異なります。

FIDは、ユーザーが操作を行った瞬間から、JavaScriptのイベントハンドラが呼び出されるまでの「待ち時間」のみを測定します。

つまり、「入力」→「処理開始」の間だけを見ており、その後の処理結果や画面描画は含まれません。

一方でINPは、同じ入力操作を起点にしながらも、処理の開始から描画（ペイント）完了までの一連の流れすべてを測定対象とします。

処理に時間がかかったり、DOM操作によって描画が遅れたりするケースも反映されるため、よりユーザー体感に近い応答性の評価が可能です。

FIDとINPの測定範囲の違い

FIDは、「First Input Delay（最初の入力遅延）」という名前のとおり、最初の1回の操作だけを評価します。
たとえば、複数回ボタンがクリックされた場合でも、ページ読み込み直後にクリックされたボタンの応答速度しか対象になりません。

一方、INPはページ全体のインタラクションを評価対象とします。
ページが読み込まれた後の操作や、何度目かのクリック、タップなども評価対象に含まれます。
その中から、もっとも応答が遅かったイベント1件を選び出し、その反応時間がINPとして記録されます。
最終的なINP値は、外れ値を無視した最も長い操作の遅延時間です。

これにより、INPはFIDよりも「操作ごとのストレス」を反映しやすくなっています。

INPで測定対象となるインタラクション

INPでは、以下の3つのインタラクション（操作）を記録します。

  • マウスでクリックする
  • スクリーンをタップする
  • キーボードのキー入力

逆に、以下のインタラクション（操作）は記録されません。

  • マウスのホバー
  • ズーム
  • スクロール

INPを改善する手順と方法

INPを改善するには、ユーザー操作に対する反応の遅延要因を特定し、処理と描画のボトルネックを減らす必要があります。
単にJavaScriptの軽量化だけでなく、入力→処理→描画までの一連の流れすべてを最適化する視点が求められます。

1. INPが低下している原因を特定する

まずは、どのインタラクションが原因でINPが悪化しているのかを特定することが重要です。

  • ChromeデベロッパーツールでLighthouseのスコアを確認する
  • DevToolsの「Performance」タブで操作と描画の関係を可視化する
  • 特定のコンポーネント（メニュー、モーダル、送信処理など）での遅延に注目する

操作イベントのうち、長時間ブロックされている箇所を検出しましょう。

ボトルネックの特定には、Chromeデベロッパーツールから使える「Lighthouse」がおすすめです。
Lighthouseを使ってINPを調べる方法や、Lighthouseの使い方ついては、こちらの記事で解説しています。

あわせて読みたい

Google公式計測ツール「Lighthouse」の使い方と2つの導入方法

 

2. JavaScriptの最適化

INPの遅延の主な原因は、「重いJavaScriptの同期処理」です。

画面の反応をスムーズにするためには、処理の順番や重さを適切に調整する必要があります。
以下のような最適化が効果的です。

複雑な処理は、requestIdleCallbackやsetTimeoutで分割

ユーザーがボタンを押した瞬間などに、重たい処理が重なるとINPは悪化しやすくなります。
これを防ぐには、処理の一部をrequestIdleCallbackやsetTimeoutなどであと回しにする方法が有効です。

一度にすべてを処理せず、時間に余裕のあるタイミングで少しずつ処理することで、操作直後の応答をスムーズに保てます。
とくに、初期表示時やスクロール直後など、ユーザーの集中するタイミングでは処理の分割が有効です。

非同期でなくてもよい関数を同期に戻すなど、処理の粒度を最適化する

一方で、すぐに終わる軽い処理まで無理に分割してしまうと、逆に反応がちぐはぐになることがあります。
必要のない非同期処理が増えると、処理順が遅れてしまい、「押したのに反応がない」と感じさせる原因になります。

特にスマホでは処理能力に限りがあるため、無意味な分割よりも、まとめて処理させた方が反応が良くなるケースも多くあります。

3. ペイント・レイアウトの改善

処理が終わったあとに「描画の反映」が遅れるとINPが悪化します。
基本的には「見た目の変化で、ページ全体の表示に余計な負荷をかけないようにする」ことが重要です。

アニメーションやトランジションの不要な再計算を避ける

ページ内でアニメーションや動きの演出が多すぎると、画面の更新ごとに毎回「どう動かすか」を計算する必要が生じます。
とくにスクロールやホバーで繰り返されるアニメーションは、表示のたびに負荷がかかり、結果として操作の反応が遅くなりがちです。

動きをつけたい場合は、transformやopacityなど、処理が軽いスタイルを使うと負荷を抑えられます。

CSSの再レイアウトを発生させるスタイルの見直し（例：幅・高さの変更）

ユーザーが操作したときに、要素の幅や高さが変わると、画面全体の配置を再計算する「再レイアウト」が発生します。
これにより表示が一瞬止まったり、操作の反応が遅くなることがあります。
とくに周囲の要素に影響を与える変更は、ページ全体の描画負荷を高め、INP悪化の原因になります。

表示の変化が必要な場合は、transformで位置やサイズを変える、opacityで表示・非表示を切り替えるなど、レイアウトを崩さない方法を使うのが効果的です。見た目の変更は、他の要素に波及しない設計が理想です。

4. サードパーティスクリプトの整理

外部スクリプト（広告・SNSウィジェット・チャットボットなど）は、INPを大きく悪化させる可能性があります。

  • 必須でないものは遅延読み込みに切り替える（deferやlazyload）
  • 使用頻度の低いスクリプトはページ遷移後に読み込む

などの工夫で、大幅にINPを改善できる可能性があります。
 

5. 優先順位の考え方

優先的に最適化するべきなのは、「ユーザーの主要操作に関係する処理」です。

  • メニューの開閉
  • タブ切り替え
  • フォーム送信ボタン

など、体感速度に直結するインタラクションを集中的に改善することで、効率的にINPの改善ができます。
一方で、スクロール後に出てくる非主要コンポーネントは、後回しでも問題ありません。

INPの改善は単なるパフォーマンスチューニングではなく、ユーザーが感じる「快適さ」を高める取り組みです。
JavaScript・描画・DOMのすべてを横断して見直しながら、遅延を1つずつ潰していくことが、INP改善の近道となります。

フロントエンドを自由に最適化できるBERYLなら、INP改善もスムーズに

INPの改善には、画面の表示タイミングや処理の流れを細かく制御できることが重要です。
その点、BERYLのようなヘッドレスCMSは、フロントエンドの設計に自由度があるため、操作の応答速度や描画タイミングを意図通りに最適化しやすいという大きな強みがあります。

一般的なCMSでは、テーマやプラグインの制約により、思うように処理の軽量化や表示タイミングの改善ができないこともあります。
一方、BERYLでは、ReactやVueなどのモダンな技術と組み合わせることで、サイト全体の応答性を細部までコントロール可能です。

ユーザー体験の質がますます重視される今、SEOにもつながるパフォーマンス改善の基盤としてBERYLは最適な選択肢です。
本格的にINP対策に取り組みたい方は、ぜひお気軽にご相談ください。

この記事を書いた人
BERYL編集部
「BERYL編集部」は、Web制作、CMS関連、Webマーケティング、コンテンツマーケティング、オウンドメディアなど、多岐にわたる分野で専門的な記事を制作しています。デジタル領域における最新の技術動向や実践的な事例を通じて、マーケティング戦略を強化するための情報を発信いたします。 また、SEO対策やコンテンツの最適化にも注力。ユーザー目線でわかりやすく解説し、企業のマーケティング活動やコンテンツ運営をサポートします。