③ テクニカルSEO

INPとは？コアウェブバイタルの仕組み・計測・改善方法を解説

INPとは？コアウェブバイタルの仕組み・計測・改善方法を解説

「ボタンをクリックしても反応が遅い」「ページの操作性が原因で検索順位が下がるのでは」

このような不安を感じているサイト運営者は多いのではないでしょうか。

INPは正しい計測と改善を行うことで、ユーザー体験とSEO評価の両方を底上げできます。

本記事では、INPの定義と判定基準、FIDとの違い、計測ツール、具体的な改善方法について解説しました。

最後まで読めば、自サイトのINPスコアを把握し、改善の優先順位を明確にできるでしょう。

INPとは何か｜コアウェブバイタルの新しい応答性指標

INP（Interaction to Next Paint）は、ページの応答性を総合的に評価するコアウェブバイタルの指標です。

ユーザーがページ上で行うすべての操作の遅延を監視し、最も遅かった操作に基づいてスコアを算出します。

INPのポイントは以下のとおりです。

  • INPの定義とInteraction to Next Paintの正式名称の意味
  • FIDに代わって2024年3月から正式導入された背景
  • INPが対象とする3つのインタラクション（クリック・タップ・キーボード）

それぞれ順番に見ていきましょう。

INPの定義とInteraction to Next Paintの正式名称の意味

INPとは「Interaction to Next Paint」の略で、ユーザー操作から次の画面描画までの遅延時間を測定する指標です。

具体的には、クリックやタップなどの操作が発生してからブラウザが次のフレームを描画するまでの時間をミリ秒で計測します。

INPの遅延時間は、入力遅延・処理時間・表示遅延の3つの段階で構成されています。

構成要素 英語名 内容
入力遅延 Input Delay ユーザーが操作してからイベントハンドラが実行されるまでの待機時間
処理時間 Processing Time JavaScriptのイベントハンドラが実行されている時間
表示遅延 Presentation Delay イベント処理後にブラウザが次のフレームを描画するまでの時間

これら3つの合計がINPスコアとして報告されるため、どの段階がボトルネックかを特定することが改善の第一歩です。

したがって、INPを改善するにはJavaScriptの最適化だけでなく、レンダリング処理全体を見直す必要があります。

参考：Interaction to Next Paint (INP)｜web.dev

関連記事：Core Web Vitalsとは？計測・改善まで完全解説【2026年版】

FIDに代わって2024年3月から正式導入された背景

INPが導入された最大の理由は、従来のFIDではページ全体の応答性を正確に反映できなかったためです。

FIDはユーザーが最初に行った操作の入力遅延のみを測定しており、ページ内のすべての操作を網羅していませんでした。

Googleがこの限界を補う新指標としてINPを開発した背景には、以下の課題がありました。

  • FIDは最初の操作しか測定せず、2回目以降のインタラクションは評価対象外だった
  • FIDは入力遅延のみを測定し、処理時間と表示遅延は含まれていなかった
  • FIDの良好率が93%以上と高く、実際の体験上の問題を検出しにくかった
  • TBTやTTIなどのラボ指標では実ユーザーの体感を正確に反映できなかった

こうした背景から、2024年3月12日にINPがFIDに代わりコアウェブバイタルの正式指標となりました。

なお、FIDは2024年9月にChromeツールから完全に削除されています。

参考：Interaction to Next Paint is officially a Core Web Vital｜web.dev

INPが対象とする3つのインタラクション（クリック・タップ・キーボード）

INPが測定対象とするインタラクションは、クリック・タップ・キーボード入力の3種類に限定されています。

スクロールやマウスホバーはINPの測定対象には含まれません。

3種類のインタラクションの特徴を以下の表にまとめます。

インタラクション 具体例 発生するイベント
クリック ボタン押下・リンク選択 pointerdown → pointerup → click
タップ スマホ画面のタッチ操作 pointerdown → pointerup → click
キーボード入力 テキスト入力・ショートカットキー keydown → keypress → keyup

ただし、フォーム要素やJavaScript制御のカスタムUIコンポーネントへの操作もINPの計測対象に含まれます。

そのため、ボタンやリンクだけでなく、ページ内のあらゆるインタラクティブ要素の応答性を意識する必要があるでしょう。

INPの判定基準とスコアの見方

INPのスコアは3段階の閾値によって評価され、200ms以下が良好と判定されます。

スコアの見方を正しく理解することで、改善の優先度を適切に判断できます。

INPの判定基準に関する主要なポイントは以下のとおりです。

  • 良好・改善が必要・不良の3段階の閾値（200ms・500ms）
  • INPとFIDで異なる2つの測定ポイント
  • スコア算出の仕組みとインタラクション数による外れ値処理

各項目を詳しく解説します。

良好・改善が必要・不良の3段階の閾値（200ms・500ms）

INPのスコアは200ms以下が「良好」、200ms超〜500ms以下が「改善が必要」、500ms超が「不良」の3段階で評価されます。

この閾値はChromeのフィールドデータにおける75パーセンタイル値で判定されます。

各段階の基準と対応方針を以下にまとめます。

判定 閾値 対応方針
良好（Good） 200ms以下 現状維持しつつ定期的にモニタリングする
改善が必要（Needs Improvement） 200ms超〜500ms以下 原因を特定して優先度の高い箇所から改善する
不良（Poor） 500ms超 早急にJavaScript最適化やレンダリング改善に着手する

75パーセンタイルとは、全ユーザーのインタラクションのうち75%がその値以下であることを示します。

つまり、4人に3人以上のユーザーが200ms以内に応答を得られている状態が「良好」の条件です。

INPとFIDで異なる2つの測定ポイント

INPとFIDの最大の違いは、測定するインタラクションの範囲と遅延の計測範囲にあります。

FIDは最初の操作の入力遅延だけを測定していたのに対し、INPはすべての操作の全遅延を計測します。

両指標の違いを比較すると以下のとおりです。

比較項目 FID INP
測定対象 最初のインタラクションのみ ページ上のすべてのインタラクション
遅延の計測範囲 入力遅延のみ 入力遅延＋処理時間＋表示遅延
良好の閾値 100ms以下 200ms以下
スコアの性質 初回印象の評価 ページ全体の応答性の総合評価

このように、INPはFIDよりも広い範囲を測定するため、実際のユーザー体験をより正確に反映できます。

一方で、FIDでは良好だったサイトがINPでは不良と判定されるケースも少なくありません。

関連記事：GoogleのSEOガイドライン6選｜チェックリスト150個紹介！

スコア算出の仕組みとインタラクション数による外れ値処理

INPのスコアは、ページ上で発生したすべてのインタラクションの中から最も遅いものを選出する仕組みで算出されます。

ただし、インタラクション数が多いページでは外れ値処理が適用されます。

外れ値処理のルールは以下のとおりです。

  • インタラクション数が50回以下の場合は、最も遅いインタラクションがそのままINPとなる
  • インタラクション数が50回超の場合は、上位N件（全体の1/50）の外れ値を除外して最悪値を選出する
  • たとえば100回のインタラクションがあれば、最も遅い2件を除外した中で最悪のものがINPになる
  • この処理により、まれに発生する極端な遅延がスコアに過度に影響することを防いでいる

この外れ値処理は、ECサイトやSNSのようにインタラクション数が多いページで特に有効に機能します。

したがって、1つの極端に遅い操作を直すだけでなく、全体的な応答性の底上げを意識することが重要といえるでしょう。

INPがSEOとユーザー体験に与える影響

INPはGoogleの検索ランキング要因の一部であり、ユーザー体験の品質を直接左右する指標です。

スコアが悪化すると離脱率の増加やコンバージョン率の低下を招く可能性があります。

INPがSEOとUXに与える影響のポイントは以下のとおりです。

  • Googleのランキング要因としてのINPの位置づけ
  • INPスコアが悪いと離脱率とコンバージョン率に出る影響
  • モバイルとデスクトップでINP通過率に大きな差がある現状

一つずつ確認していきましょう。

Googleのランキング要因としてのINPの位置づけ

INPは、Googleのページエクスペリエンスシグナルの一部として検索順位に影響する指標です。

コアウェブバイタルはLCP・INP・CLSの3指標で構成され、ページ体験の評価に使われています。

ただし、コアウェブバイタルはコンテンツの品質や被リンクなどと比べると補助的な順位シグナルです。

そのため、INPを改善しただけで劇的に順位が上がることは期待しにくいといえます。

一方で、同程度のコンテンツ品質を持つサイト同士では、INPの差が順位に影響する可能性があります。

参考：Introducing INP to Core Web Vitals｜Google Search Central

INPスコアが悪いと離脱率とコンバージョン率に出る影響

INPスコアが悪いサイトでは、ユーザーが操作に対する反応の遅さにストレスを感じて離脱する確率が高まります。

特にECサイトでは、カートへの追加ボタンや決済フォームの応答遅延がコンバージョン率に直結します。

INPスコアの悪化がもたらす影響を以下の表にまとめます。

影響する指標 具体的な影響
直帰率 操作への反応が遅いとユーザーが離脱し、直帰率が上昇する
滞在時間 レスポンスの悪さがストレスになり、ページの閲覧時間が短縮する
コンバージョン率 フォーム送信やカート操作の遅延が購入完了率を低下させる
リピート率 操作体験の悪さがブランド評価に影響し、再訪問率が下がる

また、モバイルユーザーはデスクトップに比べて端末の処理能力が低いため、INP悪化の影響をより強く受けます。

こうしたユーザー行動指標の悪化は、間接的にSEO評価にもマイナスの影響を与えるでしょう。

関連記事：SEOの目標の5つの手順を解説！KPIの決め方と進捗管理

モバイルとデスクトップでINP通過率に大きな差がある現状

CrUX（Chrome User Experience Report）のデータによると、デスクトップのINP良好率が約97%であるのに対し、モバイルでは約65%にとどまっています。

FID時代にはモバイルでも93%以上のサイトが良好と判定されていたため、INP導入で課題が顕在化した形です。

モバイルとデスクトップのINP通過率の比較は以下のとおりです。

デバイス FID良好率 INP良好率
デスクトップ 約99.9% 約96.8%
モバイル 約93.6% 約64.9%

この差が生まれる主な原因は、モバイル端末のCPU処理能力がデスクトップに比べて低いことにあります。

さらに、モバイル向けに最適化されていないJavaScriptがメインスレッドを長時間ブロックするケースも多く見られます。

参考：Advancing Interaction to Next Paint｜web.dev

INPの計測ツールと確認方法

INPの計測にはフィールドデータとラボデータの両方を組み合わせて使うことが重要です。

フィールドデータは実際のユーザーの操作に基づくスコアで、ラボデータは開発者が再現テストで得るスコアを指します。

INPを計測できる主要なツールは以下のとおりです。

  • PageSpeed Insightsでのフィールドデータとラボデータの見方
  • Google Search ConsoleのCore Web Vitalsレポートの活用法
  • Chrome DevToolsのパフォーマンスプロファイラーで問題箇所を特定

具体的な内容を見ていきましょう。

PageSpeed Insightsでのフィールドデータとラボデータの見方

PageSpeed Insights（PSI）は、特定のURLに対してINPのフィールドデータとラボデータの両方を表示できるツールです。

PSIにアクセスして対象のURLを入力するだけで、モバイルとデスクトップそれぞれのINPスコアを確認できます。

PSIで確認すべきポイントは以下のとおりです。

  • 画面上部の「実際のユーザーの環境で評価する」欄にフィールドデータのINPスコアが表示される
  • フィールドデータはCrUXの28日間の集計結果であり、十分なアクセス数がないページでは表示されない
  • 画面下部の「パフォーマンスの問題を診断する」欄にはTBT（Total Blocking Time）が表示され、INPの改善に役立つ
  • モバイルとデスクトップのタブを切り替えて両方のスコアを比較することが推奨される

フィールドデータが「良好」でもラボデータのTBTが高い場合は、将来的にINPが悪化するリスクがあります。

そのため、定期的にPSIでモニタリングし、早期に問題を発見することが大切といえるでしょう。

Google Search ConsoleのCore Web Vitalsレポートの活用法

Google Search Consoleの「ウェブに関する主な指標」レポートでは、サイト全体のINPスコアをURL単位で一覧確認できます。

PSIが個別URL単位の診断であるのに対し、Search Consoleはサイト全体の傾向を把握する点で優れています。

Search ConsoleでINPを確認する手順は以下のとおりです。

  • Search Consoleにログインし、左メニューの「ウェブに関する主な指標」をクリックする
  • モバイルまたはPCのレポートを選択すると、良好・改善が必要・不良の各URLグループが表示される
  • 「不良」に分類されたURL群をクリックすると、INPが悪化しているページの一覧を確認できる
  • 改善後は「修正を検証」ボタンを押して、28日間のデータ蓄積後に再評価を受ける

なお、Search Consoleのデータは28日間の集計に基づくため、改善効果の反映にも同程度の期間がかかります。

したがって、改善施策を実施した後はすぐに結果を求めず、約1か月後にスコアを再確認しましょう。

Chrome DevToolsのパフォーマンスプロファイラーで問題箇所を特定

Chrome DevToolsのパフォーマンスプロファイラーは、INPを悪化させている具体的なJavaScript処理やレンダリング処理を特定できるツールです。

PSIやSearch Consoleで問題のあるページを見つけた後、DevToolsで原因を深掘りするのが効率的な流れです。

DevToolsを使ったINP診断の手順を以下にまとめます。

手順 操作内容
1. プロファイラーを起動 DevToolsを開き「Performance」タブの録画ボタンを押す
2. 操作を再現 問題のあるボタンやフォームをクリックして操作を行う
3. 録画を停止 操作が完了したら録画を停止し、タイムラインを分析する
4. Long Taskを特定 50ms以上かかっている処理（赤い三角マーク）がINP悪化の原因候補
5. 原因スクリプトを確認 Long Taskを展開し、どのスクリプトが処理を長引かせているかを特定する

特に、サードパーティスクリプトがメインスレッドをブロックしているケースはDevToolsでしか特定できません。

定期的にプロファイリングを行い、新たに追加したスクリプトがINPに悪影響を与えていないか確認しましょう。

関連記事：SEOのおすすめChrome拡張機能20選！初心者からプロも愛用

INPが悪化する主な原因

INPが悪化する原因は多岐にわたりますが、大半はJavaScriptの過剰な実行とレンダリング処理の遅延に起因します。

原因を正確に理解することで、効果的な改善施策を選定できます。

INPが悪化する代表的な原因は以下のとおりです。

  • 過剰なJavaScriptによるメインスレッドのブロック
  • サードパーティスクリプトが処理を遅延させる問題
  • 大きなDOMサイズや重いCSSアニメーションによるレンダリング遅延

各ポイントをしっかり把握しておきましょう。

過剰なJavaScriptによるメインスレッドのブロック

INPが悪化する最も多い原因は、大量のJavaScriptがメインスレッドを長時間ブロックすることです。

ブラウザはメインスレッドでJavaScriptの実行とUIの描画を同時に処理しています。

メインスレッドをブロックする代表的なパターンは以下のとおりです。

  • ページ読み込み時に大量のJavaScriptを一括で解析・実行している
  • イベントハンドラ内で複雑なデータ処理や計算を同期的に実行している
  • 50ms以上かかるLong Taskが連続して発生している
  • 未使用のJavaScriptコードがバンドルに含まれたままになっている

メインスレッドが占有されている間はユーザーの操作に対する応答が遅れるため、INPスコアが悪化します。

特にシングルページアプリケーションでは、画面遷移時の処理が重くなりがちなので注意が必要です。

参考：Optimize Interaction to Next Paint｜web.dev

サードパーティスクリプトが処理を遅延させる問題

広告タグやアナリティクス、チャットウィジェットなどのサードパーティスクリプトはINP悪化の大きな原因になります。

自社で制御できないコードがメインスレッドを占有するため、改善が難しいケースも少なくありません。

サードパーティスクリプトがINPに影響するパターンを以下にまとめます。

スクリプトの種類 INPへの影響
広告配信タグ（Google Ads・アフィリエイト等） 広告の描画処理でメインスレッドを長時間ブロックする
アクセス解析（Google Analytics等） イベントトラッキングの送信処理がインタラクションと競合する
チャットウィジェット・ポップアップ 初期化処理やDOM操作が重く、入力遅延を増加させる
SNSシェアボタン・埋め込みウィジェット 外部APIへのリクエストとDOM挿入がレンダリングを遅延させる
A/Bテストツール ページ描画前にスクリプトが実行されるため、すべてのインタラクションに影響する

対策としては、不要なサードパーティスクリプトを削除し、残すものはasync属性やdefer属性で非同期読み込みにすることが有効です。

また、Partytown等のライブラリを使ってサードパーティスクリプトをWeb Workerに移すアプローチも検討できます。

大きなDOMサイズや重いCSSアニメーションによるレンダリング遅延

DOMの要素数が多いページでは、スタイルの再計算やレイアウト処理に時間がかかりINPが悪化します。

Googleはページ内のDOM要素数を1,500以下に抑えることを推奨しています。

レンダリング遅延を引き起こす代表的な要因は以下のとおりです。

  • DOM要素数が3,000を超えるページでは、スタイル再計算だけで数十msを消費する
  • CSSアニメーションでtopやleftなどのレイアウトプロパティを使うと強制レイアウトが発生する
  • JavaScriptでgetBoundingClientRectやoffsetHeightを連続呼び出しすると強制同期レイアウト（レイアウトスラッシング）が起きる
  • 画像やiframeの遅延読み込みが未設定だと、初期描画の負荷が増大する

CSSアニメーションではtransformやopacityを使い、GPU合成レイヤーで処理させることでメインスレッドへの負荷を軽減できます。

DOM要素の削減は一度に行うのが難しいため、ページテンプレート単位で段階的に取り組むとよいでしょう。

INPの改善方法｜ページ読み込み時と読み込み後の対策

INPの改善は「ページ読み込み時」と「読み込み後」の2つのフェーズに分けて対策すると効率的です。

読み込み時はJavaScriptの削減と分割、読み込み後はイベントハンドラの最適化が主なアプローチになります。

本セクションで解説する改善方法は以下のとおりです。

  1. 不要なJavaScriptの削除とコード分割による入力遅延の短縮
  2. postTask APIとrequestIdleCallbackを使ったタスク優先順位の最適化
  3. 画像の遅延読み込みとレンダリングブロックリソースの削減
  4. WordPressサイト向けの具体的なプラグインと設定の見直し

以下で詳しく説明します。

不要なJavaScriptの削除とコード分割による入力遅延の短縮

INP改善の第一歩は、ページに読み込まれている不要なJavaScriptを特定して削除することです。

Chrome DevToolsの「Coverage」タブを使えば、実際に使用されていないJavaScriptの割合を確認できます。

JavaScriptの削減とコード分割で実施すべき対策は以下のとおりです。

  • Coverageタブで未使用率の高いスクリプトを特定し、不要なら完全に削除する
  • 動的インポート（import()）を使ってルート単位でコード分割し、初期ロード量を削減する
  • ページ表示に不要なスクリプトにはdefer属性を付与して実行タイミングを遅らせる
  • Tree Shakingを有効にして未使用のモジュールをバンドルから自動除外する

コード分割を行うことで、初期ロード時のメインスレッド占有時間が短くなり、入力遅延が改善します。

特にwebpackやViteなどのバンドラーを使えば、動的インポートとTree Shakingを比較的簡単に導入できます。

postTask APIとrequestIdleCallbackを使ったタスク優先順位の最適化

長いJavaScriptタスクを分割する手段として、scheduler.postTask()やrequestIdleCallback()を活用する方法が効果的です。

これらのAPIを使うと、ブラウザのメインスレッドにユーザー操作を優先的に処理させることができます。

各APIの特徴と使い分けを以下にまとめます。

API名 特徴 適するケース
scheduler.postTask() タスクに優先度（user-blocking / user-visible / background）を設定できる INPに影響するUI更新をbackgroundタスクより先に処理したい場合
requestIdleCallback() ブラウザのアイドル時間にタスクを実行する 分析データの送信やプリフェッチなど、ユーザー操作に直接影響しない処理
setTimeout(0) 現在のタスクを分割して次のタスクキューに回す postTaskが使えない環境でのフォールバック手段

postTask APIは2024年以降の主要ブラウザで対応が進んでいるものの、対応していない環境向けにsetTimeoutでのフォールバックを用意しておくと安心です。

タスクの優先順位を適切に設定することで、ユーザー操作への応答速度を大幅に改善できるでしょう。

画像の遅延読み込みとレンダリングブロックリソースの削減

ファーストビュー外の画像にloading="lazy"属性を設定すると、初期ロード時のネットワーク負荷とメインスレッドの処理量を削減できます。

また、CSSやフォントのレンダリングブロックを減らすことも、INP改善に直結します。

実施すべきレンダリング最適化のポイントは以下のとおりです。

  • ファーストビュー外の画像にloading="lazy"を付与し、初期ロードの通信量を削減する
  • クリティカルCSSをインラインで埋め込み、残りのCSSは非同期読み込みにする
  • Webフォントにfont-display: swapを設定してテキスト表示をブロックしない
  • 使用していないCSSルールをPurgeCSSなどのツールで削除する

画像の遅延読み込みはHTMLのloading属性だけで実装でき、追加のJavaScriptは不要です。

これらの施策を組み合わせることで、ページの初期描画にかかるリソースを最小限に抑えられます。

WordPressサイト向けの具体的なプラグインと設定の見直し

WordPressサイトでINPを改善するには、プラグインの見直しとテーマの最適化が最も効果的なアプローチです。

プラグインはそれぞれ独自のJavaScriptとCSSを読み込むため、数が増えるほどINPが悪化しやすくなります。

WordPress環境で実施すべきINP改善策を以下にまとめます。

改善策 具体的な実施内容
不要プラグインの削除 使っていないプラグインを無効化・削除し、JS/CSSの読み込みを減らす
キャッシュプラグインの導入 WP Super CacheやW3 Total Cacheでページキャッシュを有効にする
JS/CSSの最適化 Autoptimize等でJavaScriptの結合・圧縮・遅延読み込みを設定する
画像の最適化 ShortPixelやEWWWで画像を圧縮し、WebP形式に自動変換する
テーマの見直し ブロックテーマや軽量テーマに変更し、不要なスクリプトの読み込みを防ぐ
Speculative Loadingの活用 WordPress 6.5以降のSpeculative Loading APIでリンク先をプリロードする

プラグインの削減は最もインパクトが大きい施策ですが、必要な機能を失わないよう代替手段を検討してから実行しましょう。

また、テーマ自体が大量のJavaScriptを読み込んでいる場合は、テーマの変更も視野に入れる必要があります。

INPに関するよくある質問

INPに関するよくある質問について解説します。

INPが良好でもSEO順位は変わらない？

INPが良好であることはSEO順位を保証する条件ではなく、あくまで複数あるランキング要因の一つです。

コンテンツの品質、被リンク、検索意図との合致度など、より影響の大きい要因が順位を左右します。

ただし、INPを含むコアウェブバイタルを良好に保つことは、競合サイトとの差別化に寄与します。

WordPressのテーマやプラグインがINPに影響する？

テーマやプラグインはINPに大きく影響する要因の一つです。

特に、ページビルダー系プラグインや高機能テーマは大量のJavaScriptを読み込むため、INPが悪化しやすくなります。

影響の有無はPageSpeed Insightsで確認できるため、プラグインを追加した前後でスコアを比較するとよいでしょう。

INP改善の効果が出るまでどれくらいかかる？

INPの改善効果がCrUXデータに反映されるまでには、最低でも28日程度かかります。

CrUXは過去28日間のフィールドデータを集計しているため、改善直後にスコアが変動することはありません。

Search Consoleの「修正を検証」機能を使えば、改善の反映状況を追跡できます。

まとめ｜INPを改善してサイトの応答性を高めよう

本記事では、INP（Interaction to Next Paint）の定義・判定基準・計測ツール・改善方法について解説しました。

INPはFIDに代わり2024年3月に正式導入された指標であり、ページ上のすべての操作の応答性を総合的に評価する点がFIDとの最大の違いです。

モバイルではINP良好率がデスクトップより30ポイント以上低いため、スマートフォンユーザー向けの最適化が特に重要といえます。

まずはPageSpeed InsightsまたはSearch Consoleで自サイトのINPスコアを確認し、「改善が必要」や「不良」のページから優先的に対策を始めてみてください。

JavaScript最適化やプラグインの見直しを地道に積み重ねることで、ユーザー体験とSEO評価の両方を着実に高められます。

-③ テクニカルSEO