INP（Interaction to Next Paint）とは、Webサイトのユーザー体験（UX）を左右する重要な指標です。

聞いたことはあるものの、意味や正しい測定方法、改善施策などを詳しくご存じでない方も多いでしょう。

‍

本記事では、INPの定義から測定対象、旧指標のFID（First Input Delay）との違い、改善目安まで基本情報を解説します。また、測定方法や数値の悪化原因、効果的な改善施策などの実践的な内容も紹介します。

INPの基礎から実践まで網羅したい方は、ぜひ最後までご覧ください。

‍

また、INPの改善に効果的な画像最適化については、弊社の画像最適化サービス「Imgix」をぜひご活用ください。日本経済新聞や一休.comなどの大規模サイトでも採用されています。

‍

INP（Interaction to Next Paint）とは？

INPとは、ユーザーがWebページ上で行った操作に対して、画面に視覚的な変化が起こるまでの応答時間を測定する指標です。

‍

ページの読み込み後にユーザーが行ったすべての操作のうち、もっとも遅かった操作の応答時間がINPの測定値として使用されます。

‍

具体的に、INPの測定対象となる操作は以下の3つです。

‍

• クリック（ボタンやリンクを押す操作）
• タップ（モバイル端末でのタッチ操作）
• キーボード入力（検索窓やフォームへの入力）
  
  

INPを通じて「操作しても反応しない」「画面の動きが遅い」など、ユーザーが感じる操作のストレスを数値化できます。Webサイトの操作性に直結するため、継続的な測定と改善が不可欠です。

旧指標のFID（First Input Delay）との違い

FIDとは、ユーザーが初めてクリックなどの操作を行ってから、ブラウザが応答できるまでの待ち時間を測定する指標です。従来GoogleのUX評価指標であるコアウェブバイタルの一つでしたが、初回操作のみを対象とするため、サイト全体のUXを正確に測れない課題がありました。

‍

そこでFIDの課題を解決するために、Googleは2023年5月にFIDをコアウェブバイタルの指標から廃止し、INPを正式に導入しました※。

‍

それぞれの特徴は、以下のとおりです。

‍

【FID】

• 測定対象：最初の1回の入力
• 測定タイミング：ページ読み込み直後
• 測定内容：イベント処理の開始までの遅延時間

‍

【INP】

• 測定対象：ページ全体のすべての操作
• 測定タイミング：ページ読み込み後の任意のタイミング
• 測定内容：インタラクション完了までの総合的な応答時間

INPはすべての操作を対象とし、もっとも遅かった応答時間を記録することで、FIDに比べてUX全体をより包括的に評価できます。

‍

FIDからINPへの移行は、単なる指標変更ではなく、サイト全体の応答性を見直す契機です。

‍

特に複雑なUI設計やJavaScriptを多用するサイトでは、INPの最適化がサイト全体の操作性やCVRの向上に貢献します。

‍

※参照：INP を Core Web Vitals に導入｜Google for Developers

‍

Core Web Vitalsの詳細については下記記事もご参照ください。

コアウェブバイタルとは？指標・SEOとの関係性・対策を徹底解説！

‍

INPの目安

Googleは、INPの評価基準を以下のように定めています。

‍

• 良好：200ミリ秒以下
• 要改善：200ミリ～500ミリ秒
• 不良：500ミリ秒超

‍

特に要改善や不良に該当するページでは、ユーザーが操作時にストレスを感じやすく、離脱率が高まるため、早急な対策が必要です。

‍

なお、INPはGoogleのPageSpeed InsightsやLighthouseなどのツールで計測できます。まずはこれらの測定ツールで自社サイトのスコアを確認し、現状を正確に把握することが重要です。

INPが重要視される理由

INPは、さまざまな理由から重視されている指標です。本章では、INPが重要視される理由を紹介します。

ユーザー体験（UX）の向上に直結

INPは、ユーザーがクリックや入力などの操作をした際に、どれほど素早く視覚的な変化が返されるかを測定します。この応答が遅いと、ユーザーは「反応しない」「バグかも」と感じ、 操作の中断やページからの離脱につながります。

‍

一方、INPが良好なサイトはユーザーの操作にスムーズに反応し、ストレスのない操作体験の提供が可能です。そのため、INPはUXの向上を目指すうえで、重要な評価指標として注目されています。

SEOへの影響

INPは、コアウェブバイタルの評価指標として導入されており、検索順位に影響を与える要素です。

‍

INPが悪化していると、UXの質が低いと判断され、検索アルゴリズム上でマイナス評価となり、検索順位の低下につながります。特にモバイルユーザー中心のサイトでは、ページパフォーマンスのわずかな差が検索結果の順位に大きく影響します。

‍

そのため、検索結果で上位表示を狙ううえで、INPの改善は重要なSEO施策の一つです。

コンバージョン率などビジネス成果の改善

INPは、売上や問い合わせ件数などのビジネス成果にも関係します。操作に対する反応が遅いと、ユーザーの離脱を促進し、行動完了率が低下するためです。

‍

実際、Webサイトの離脱理由に関する調査では「ページの操作が反応しづらかった」という回答が、表示速度の遅延に次いで2番目に多い結果となりました。

‍

出典：【実態調査】Web・アプリの離脱理由、第1位は「表示速度の遅さ」｜Repro

‍

INPを良好に保つことで、早期離脱の防止やCVRの向上が期待できます。特に、ECサイトや資料請求フォームを設置しているWebサイトでは、INPの改善が売上拡大やリード獲得の効率化に貢献します。

モバイルユーザーへの対応

スマートフォンの普及により、Webサイトへのアクセスの多くがモバイル端末経由となっている現在、モバイル環境での操作レスポンスはUXに直結する要素といえます。

‍

タップやスクロールなどの操作に対する反応が遅いと、ユーザーにストレスを与え、離脱率の上昇やCVRの低下につながります。特に、ECサイトやフォーム入力が必要なページでは、この影響が顕著です。

‍

そのため、モバイルサイト経由のCV向上を目指すうえでもINPが重要視されています。モバイルファーストの設計とあわせて、操作レスポンスを改善することで、モバイルユーザーの離脱防止やエンゲージメント向上が期待できます。

INPが悪化する主な原因

INPが悪化する原因は、以下のように直接的な要因と間接的な要因に分けられます。

‍

【直接的要因】

• 過剰なJavaScriptやCSSの記述
• サードパーティスクリプトの多用
• サーバーやAPIの応答遅延
• 複雑なDOM構造

‍

【間接的要因】

• 大容量の画像・動画ファイルの使用
• 低スペックなネットワーク環境

‍

上記の要因が重なると、ユーザーの操作に対する反応が遅くなります。本章では、INPが悪化する代表的な原因を見ていきましょう。

大容量の画像・動画ファイルの使用

大容量の画像や動画が使用されると、読み込みや描画に時間がかかり、INPが悪化します。特に操作後に画像や動画を読み込むギャラリーやポップアップUIでは、応答遅延が発生しやすく、操作の体感速度が低下します。

過剰なJavaScriptやCSSの記述

JavaScriptやCSSが過剰に記述されている場合や、不要なファイルが読み込まれている場合、INPの悪化を招きます。

‍

例えば、重い処理や頻繁なDOMの再計算が発生すると、操作時の画面反応が遅れます。こうした問題は、内部要因として潜在化しやすく、ページの規模や機能追加とともに悪化する傾向にあるため注意が必要です。

サードパーティスクリプトの多用

広告タグやSNSウィジェットなどのサードパーティスクリプトは、通信や処理の負荷が高く、INPの低下要因です。特に、読み込み中や操作時に実行されると、メインスレッドがブロックされ、画面の反応が遅くなります。

サーバーやAPIの応答遅延

ユーザーの操作後にバックエンドのサーバーや外部APIへリクエストが発生する場合、応答が遅いと画面の反応も遅れ、INPの悪化につながります。例えば、フォーム送信後にAPIレスポンス待ちが発生する場合や、非同期データの読み込みに時間がかかる場合が典型的です。

‍

また、CDNを導入していないこともINPが低下する原因の一つです。ユーザーの位置から遠いサーバーにアクセスすることになるため通信遅延が生じ、操作後の画面応答に時間がかかるからです。

フロントエンド処理の複雑化

近年のWebサイトは、アニメーションや動的コンテンツなどリッチな表現が増加しており、フロントエンドの処理は年々複雑化しています。なかでも、DOM構造が深く要素数の多いページでは、画面の再描画やレイアウト処理に時間がかかりやすく、INPが悪化する傾向にあります。

‍

また、CSSの変更に伴いスタイル再計算やレイアウト再構築が頻発すると、操作時の反応が鈍くなり、INPが悪化します。

低スペックなネットワーク環境

INPは、ユーザーのネットワーク環境に左右される指標です。通信速度が遅い環境では、ユーザーの操作後に読み込みや表示処理が完了するまでに時間がかかるため、INPが低下します。

‍

特に、3G・4Gなどのモバイル回線でのアクセスや通信が制限されている端末では、表示や処理に遅延が生じる傾向にあります。

INPの測り方

INPは、実際のユーザー環境で評価されるフィールドデータと、特定のシミュレーション環境で収集されるラボデータの両方で把握できます。本章では、INPを測定できる代表的な3つのツールを紹介します。

PageSpeed Insights

PageSpeed Insights（PSI）は、Googleが提供する無料のWebパフォーマンス診断ツールです。フィールドデータとラボデータの両方を確認できるのが特徴です。

出典：PageSpeed Insights で Chrome UX レポートデータを表示する方法｜Chrome for developers

‍

UIがシンプルで扱いやすく、測定する際は公式サイト上でWebページのURLを入力するだけですぐに計測が開始されます。色分けされたグラフでINPの状態を直感的に把握できるうえ、改善が必要な要素は具体的に指摘されるため、効率良く改善できます。

‍

INPの測定は、まずPSIで現状を確認し、後述するChrome DevToolsやLighthouseで詳細に分析する流れが効率的です。

Chrome DevTools

Chrome DevToolsは、Google Chromeに標準搭載されている開発者向けの診断ツールです。ユーザー操作と描画イベントのタイミングがリアルタイムで記録され、INPに影響を与えている処理の詳細な挙動を確認できる点が魅力です。

‍

出典：パフォーマンス機能のリファレンス｜Chrome for developers

‍

測定する際は、Performanceタブから録音アイコンをクリックし、ページ操作を実行します。その後、操作ごとのレンダリング処理やスクリプトの実行時間などが表示されます。

‍

操作ごとのボトルネックを明確に特定できるため、技術的なチューニングやINP改善を行う際に有効なツールです。

Lighthouse

Lighthouseは、Google Chromeの拡張機能により導入できる、Webサイトの品質診断ツールです。パフォーマンスをはじめ、アクセシビリティやSEO、ベストプラクティスを総合的に分析できます。

‍

出典：Lighthouse の概要｜Chrome for developers

‍

デバイスの種類や診断項目を選択して実行すると、各種スコアや改善ポイントを網羅的に把握できるレポートが生成されます。

‍

INPだけでなく、Webサイト全体を改善したい場合にも役立つツールです。

実践的な測定戦略

INPは、Webサイトの運用状況や更新内容に応じて日々変動します。そのため、良好なINPを維持するためには、継続的な測定と監視体制の構築が不可欠です。

‍

基本的な測定・監視体制としては、以下のような運用が効果的です。

‍

• PSIのフィールドデータによる週次チェック：主要ページのINPを定期的に確認し、変動を早期に察知
• PSIのラボデータ 月次レビュー：シミュレーション環境でスコアの変化傾向を確認、必要に応じて改善
• DevTools・Lighthouseによる開発時の事前検証：新機能やリリース前に、INPへの影響を事前に検証
  
  

これらを業務フローに組み込み、定期的に実行することで、INPの悪化を未然に防げます。

‍

また、施策の効果を正しく把握するには、変更前後の数値を定量的に比較・記録することが重要です。

‍

例えば、PSIを活用する場合は以下のような流れで前後を評価します。

‍

• 改善前のINPをスクリーンショットなどで保存
• 対策の対象URLや要素を明確に整理
• A/Bテストや段階的リリースで変更の影響を比較検証
• Google Analyticsやヒートマップとの併用によりユーザー行動の変化も分析
  
  

INPの改善は単発的な対応で終わらせず、継続的なパフォーマンス管理の一環として取り組むことがポイントです。中規模企業では、限られたリソースで効率的に運用するため、自動化ツールの活用が重要になります。

INPの改善方法

‍

本章では、INPの改善方法を紹介します。

【最重要】画像の最適化

画像の最適化は、INPを良好に保つための最重要施策です。画像はWebページで多く使われるうえに、表示負荷が大きく、最適化による改善効果が高いためです。

ユーザー操作後の画面変化を素早く表示させるためには、画像の読み込み負荷を最小限に抑える必要があります。

‍

具体的な改善施策は、以下のとおりです。

‍

• 画像フォーマットの最適化：JPG・PNGから軽量なWebPやAVIFに変換
• 画像サイズの適正化：実表示サイズに合わせてリサイズ
• 遅延読み込み（Lazy Load）の導入：ファーストビュー外の画像は後から読み込む
• 画像圧縮：可逆・非可逆圧縮を使い分けて軽量化
   

HTMLやCSSの変更だけで対応でき、開発コストを抑えて実施しやすい点もメリットです。

‍

ECサイトやビジュアル要素の多いランディングページでは、CVRの向上も期待できます。

コードの最適化

INPの改善においては、JavaScriptやCSSの最適化も効果的です。それぞれはユーザー操作後の描画処理に悪影響を与えるため、不要なコードの除去や読み込みタイミングの工夫が求められます。

‍

以下が、INP改善のために実施すべき具体的なコード最適化施策です。

‍

• JavaScriptの最適化：コード分割やツリーシェイキングで無駄な読み込みを防止
• 非同期・遅延読み込み：必要なタイミングでのみスクリプトやスタイルを読み込む
• 不要なCSS・JavaScriptの削除：未使用のスタイルやライブラリを除外
  
  

ユーザーの操作に対する応答速度が改善され、INPの改善に貢献します。

不要なサードパーティスクリプトの削減

サードパーティスクリプトは、ページ表示やユーザー操作時のパフォーマンスに影響します。

‍

そのため、以下の方法で最小限に抑えることが重要です。

‍

• 使用状況の棚卸し：未使用や重複している外部スクリプトを洗い出す
• 不要スクリプトの削除・統合：同じ機能のタグを整理・削除して軽量化
• 遅延読み込みの導入：ユーザー操作後に後回しで読み込む
• 読み込みタイミングの制御：優先度の低いスクリプトはあとから実行

‍

これらの見直しにより、操作時のスクリプト競合やブロッキング処理を軽減し、INPを改善できます。

サーバー応答時間の短縮

ユーザー操作時にバックエンド処理や外部リソースへのアクセスが必要な場合、サーバーの応答時間がINPに直接影響します。処理が遅延すればするほど、画面の反応も遅くなり、ユーザー体験の低下につながります。

‍

そのため、以下の施策によりサーバーの高速化が必要です。

‍

• バックエンドのパフォーマンス改善：APIレスポンスの最適化やデータベースクエリの改善
• CDNの利用：画像やCSSなどの静的コンテンツの配信を分散
• 高スペックなサーバーの導入：CPU・メモリ性能が高いサーバーに切り替え

‍

これらの施策により、ユーザー操作に伴うデータ取得や画面反映の速度が向上し、INPの改善につながります。特にAPIレスポンスが遅いSPAでは、優先的に対策が必要です。

キャッシュの活用

INPを改善するためには、ユーザー操作に伴う読み込み遅延を最小限に抑える必要があります。その有効な対策が、キャッシュの導入です。ブラウザやサービスワーカーのキャッシュ機能を適切に設計することで、リソースの再取得を防ぎ、表示処理を高速化できます。 

‍

特に通信環境が不安定なモバイルユーザーに対しては、体感速度の向上効果だけでなく、INPの改善も期待できます。

Web Workersの導入

Web Workersとは、メインスレッドとは別のスレッドでJavaScriptの処理を非同期に実行できるスクリプトです。導入することで、JavaScriptが実行する重い処理をバックグラウンドで実行し、ユーザー操作の応答に関係なく処理できます。

‍

特に、チャート描画・リアルタイム計算・フィルター処理が多いアプリケーション型のサイトでは、INP改善に直結する有効な手段です。

INPの改善は「Imgix」にお任せ

出典：Imgix

‍

WebサイトのINPを改善するには、画像の最適化がもっとも効果的かつ即効性のある施策です。

‍

自社サイトの画像最適化を検討する際は、画像最適化プラットフォーム「Imgix」をご活用ください。

‍

Imgixは、以下のようなINP改善につながる多彩な機能を備えています。

‍

• 画像を自動でWebPやAVIFに変換し、配信最適化
• レスポンシブ対応で、ユーザーの端末サイズに合わせて動的にリサイズ
• CDN統合による超高速なグローバル配信
  
  

Imgixの導入により、表示負荷の高い画像の読み込みが高速化され、操作後のレスポンスが大幅に向上します。また、サーバーやネットワーク由来の遅延を回避でき、コアウェブバイタル全体の改善が可能です。

‍

INPと合わせて改善すべき指標

WebサイトのUXを総合的に向上させるには、ほかの指標もバランス良く改善する必要があります。特に、INPと同様にコアウェブバイタルの指標とされるLCP（Largest Contentful Paint）とCLS（Cumulative Layout Shift）は、優先的に見直すべき指標です。

‍

本章では、INPと合わせて改善したい4つの指標を紹介します。

LCP（Largest Contentful Paint）

LCPとは、ページ読み込み開始から、画面上で最大のコンテンツが描画されるまでの時間を測定する指標です。

‍

LCPはユーザーの「表示が遅い」と感じる速度に近く、遅いと初回表示の印象が悪くなり、UX全体の評価が低下します。そのため、LCPとINPはセットで改善する必要があります。

CLS（Cumulative Layout Shift）

CLSとは、ページ表示中にテキストや画像、ボタンなどの要素がどれほど視覚的にズレたかを測定する指標です。

‍

CLSのスコアが悪いと、表示中に要素が予期せず移動することで誤操作が発生しやすくなり、UXの低下を招きます。ユーザーに快適な操作体験を提供するためにも、CLSの改善は不可欠です。

FCP（First Contentful Paint）

FCP（First Contentful Paint）とは、ページ読み込み開始から、最初のテキストや画像などの意味のあるコンテンツが表示されるまでの時間を測定する指標です。

‍

FCPが遅いと、ユーザーに「ページが応答していない」と感じさせやすく、離脱率の上昇につながります。FCPとINPを改善することで、ページ表示から操作応答までの一連のUXを最適化できます。

TTFB（Time To First Byte）

TTFB（Time To First Byte）とは、ブラウザがサーバーにリクエストを送信してから、最初の1バイトのレスポンスが返ってくるまでの時間を測定する指標です。

‍

TTFBが長いと、ページの初期処理やリソースの読み込みが遅れ、表示や操作全体に悪影響を及ぼします。その結果、ページ表示後の操作に遅延が発生し、INPが悪化するケースもあります。

‍

TTFBはすべての表示・操作の起点となる指標であるため、改善することでWebサイト全体のパフォーマンスとUXを底上げできます。

まとめ　INPとはWebサイトのUX向上を左右する重要な指標

INPとは、Googleのコアウェブバイタルの一つで、ユーザーの操作に対してどれほど素早く画面が反応するかを測定する指標です。クリック・タップ・入力などの操作における体感的なスピードを可視化できるため、WebサイトのUX向上において重要とされています。

‍

INPを改善する際、最優先で取り組むべき施策が画像の最適化です。画像は表示負荷が高いため、最適化されていないと描画遅延や処理ブロックが発生し、INPが大きく低下するためです。

‍

画像最適化によるINPの改善に取り組みたい場合は、画像最適化プラットフォームの「Imgix」にご相談ください。高速かつ柔軟な画像配信を通じて、自社サイトのINPを継続的に改善し、UX向上に貢献いたします。

‍