目次
「INP（Interaction to Next Paint）」はWebページの応答性を測る指標です。「Googleが『FID（First Input Delay）』に代わる『Core Web Vitals（コアウェブバイタル）』の指標として、2024年3月に導入したもの」というと、SEO担当者ならピンとくるかもしれません。
ただし、INPはSEO（検索エンジン最適化）だけに影響するものではありません。本質的にはWebページのユーザー体験全体に広くインパクトを与えるものです。このページでは、INPの言葉の意味や計測方法に加えて、改善策までを詳しく解説していきます。Webサイトの運営に関わる人はぜひご覧ください。
サイト表示速度の現状を競合と比較してプロが診断！
INP（Interaction to Next Paint）とは？言葉の意味と定義
Webページ内にはユーザーの操作に応じて表示が変化する要素がたくさん実装されています。例えば、「タップすると展開されるメニュー」「クリックで拡大表示される画像」「クリックするとチェックマークが表示されるチェックボックス」「カート投入後にマークがつくカートアイコン」などです。
「INP」とは、Webページ内にある可変要素が、ユーザーの操作を受けたあとに視覚的に変化するまでの時間のことです。そのWebページがどれだけスピーディにユーザーの操作に反応できるかを測る指標と言い換えることができます。速ければ速いほど良く、GoogleはINPの理想的な時間を200ミリ秒以下としています。なお、INPは「Interaction to Next Paint」の略語です。
下の動画はわかりやすくINPの重要性を示したもの。左がINPが長い場合で、右がINPが短い場合。クリックするとコンテンツが展開され、再度クリックするとコンテンツが閉じる、いわゆるアコーディオンメニューの例です。
■INPが長いアコーディオンメニューとINPが短いアコーディオンメニュー
左がINPが長いアコーディオンメニューの例。ユーザーがクリックしてからコンテンツが展開されるまでの待ち時間が長く、誤クリックが発生している。右はINPが短いアコーディオンメニュー。クリック操作とコンテンツの展開がスムーズに連動している。
出典：Interaction to Next Paint（INP）
左側のアコーディオンメニューは最初のクリック操作からコンテンツ展開までの時間が長いため、ユーザーが「タップできなかったのかもしれない」と誤認識をし、再度クリック操作をしています。その結果、タップが2連続で発生し、「コンテンツを開いて閉じる」というユーザーの意図とは異なる操作になってしまいました。このようなストレスのかかる状況を誰もが一度は体験したことがあるでしょう。
一方、右側のアコーディオンメニューは、最初のクリックに対してすぐ、視覚的にコンテンツが展開しています。誤クリックもありません。INPが短いことによって、「見たいコンテンツを思い通りに見る」という理想的な体験が実現しているのです。
INPの計測対象となるユーザー操作と時間
INPは「Webページ内にある可変要素が、ユーザーの操作を受けたあとに視覚的に変化するまでの時間」であると前述しました。では、どのような要素とユーザーの操作が計測の対象となるのでしょうか。また、具体的にいつからいつまでの時間が計測されるのでしょうか。詳しく見ていきましょう。
INPの計測対象はクリック・タップ・キー押下が起点となるすべてのインタラクション
ユーザーの何らかの操作に起因して、Webページの表示が変化することを「インタラクション」と呼びます。つまり、INPはインタラクションにかかっている時間と表現することも可能です。
INPの計測対象となるインタラクションは、「クリック」「タップ」「キーボードのボタン押下」が起点となるものです。これ以外の操作によって発生する表示の変化はINPの計測対象とはなりません。例えば、「ホバー」「スクロール」「ズーム」などの操作で発生するインタラクションはINPの計測対象外です。
また、ページ滞在中に発生するクリック、タップ、キーボードのボタン押下が起点となるすべてのインタラクションがINPの計測対象となります。ページ訪問後、最初のインタラクションでも、ファーストビューに表示される可変要素のインタラクションでもないので覚えておきましょう。
WebページのINPは最も長かったインタラクション時間
Webページ上に存在する各インタラクションにかかる時間は、「入力遅延」「処理時間」「プレゼンテーションの遅延」と呼ばれる3つの時間の合計で表すことができます。まずは、それぞれがどのような意味を持つものなのかを理解してください。
- 入力遅延
ユーザーがクリック、タップ、キーボードのボタン押下をしたあとに、ブラウザがその操作を受け取り、処理を開始するまでの時間。ユーザーの操作と並行して、ブラウザが別の処理を実行していると、ユーザー操作に対する処理がブロックされ、入力遅延の時間が長くなることがあります。 - 処理時間
ユーザー操作を受け取ったあとに、その操作によって発生する表示変化をブラウザに対して指示する時間。多くの場合、JavaScriptがこの役割を担っています。入力遅延の時間と同様に、他の処理が並行して行われているとこの時間が長くなる可能性があります。また、このときに発生するブラウザへの指示が複雑なほど、処理時間も長くなります。 - プレゼンテーションの遅延
処理時間が終了したあとに、ユーザーが視認できる形でブラウザ上に表示の変化が現れるまでの時間です。大きなレイアウト変更や複雑なアニメーションが含まれていると、再表示のための計算に時間がかかり、プレゼンテーションの遅延の時間も長くなります。また、入力遅延、処理時間と同様に、他の処理がブロックして描画が遅くなることもあります。
そして、Webページにあるすべてのインタラクション時間を計測し、そのうち最も長かったものがWebページのINPとしてアウトプットされます。
■INPを構成する3つの時間とタイムライン
「input delay」が入力遅延、「Processing time」が処理時間、「Presentation delay」がプレゼンテーションの遅延を示しており、その合計がインタラクション時間。Webページ上のすべてのインタラクションのうち、最も長かったインタラクション時間がINPとなる。
出典：Interaction to Next Paint（INP）
INPの計測するためのツールと使い方
INPを計測するためのツールはいくつかありますが、おすすめはGoogleが提供している「PageSpeed Insights」です。無料で利用できるWebサイトのパフォーマンス診断ツールで、INPだけでなく、ユーザー体験に関わる様々な指標を分析してスコア化。改善点の特定や対策の提案もしてくれます。
PageSpeed InsightsにアクセスしてURLを入力
PageSpeed Insightsにアクセスすると、URLの入力ボックスが表示されます。INPを計測したいWebページのURLを入力して「分析」ボタンを押しましょう。
ページ上部にあるURLの入力ボックスにINPをチェックしたいWebページのURLを入力して「分析」ボタンをクリックする。INPはページ単位で計測するものなので、計測したいページのURLをピンポイントで入力すること。
出典：PageSpeed Insights
診断結果が表示される
「分析しています」と表示されたあとにWebページの診断結果が表示されます。診断結果は現実のユーザーのアクセスデータを集約した「実際のユーザーの環境で評価する」と、課題把握用の特定環境のデータを表示する「パフォーマンスの問題を診断する」のふたつのブロックに分かれており、INPは「実際のユーザーの環境で評価する」の中に表示されます。
「実際のユーザーの環境で評価する」の数値は複数のユーザーのデータを基にしているため、診断結果に表示される数値は75パーセンタイルの数値です。この数値が200ミリ秒以下で「良好」、500ミリ秒以下で「改善が必要」、500ミリ秒を超えると「不良」と評価されます。
「実際のユーザーの環境で評価する」の上段中央にINPの数値が表示される。インタラクション要素が存在しないWebページや、計測結果として表示できるほどにインタラクションが操作されていない（データが蓄積できていない）Webページの場合、INPに「なし」と表示される。
出典：PageSpeed Insights
INPを改善するためのふたつのアプローチ
INPの改善には大きく分けてふたつのアプローチがあります。ひとつは「JavaScriptの処理を最適化する」、もうひとつは「ブラウザの表示処理（レンダリング）を最適化する」です。ただし、いずれもエンジニアの領域であり、マーケターが直接的に介入できるものではありません。エンジニアに改善を相談する際の指針として覚えておく程度にとどめておくことをおすすめします。
JavaScriptの処理を最適化する
INPが長くなる主な要因は、ユーザー操作に対応する処理を、他のJavaScriptがブロックしてしまうことです。INPを構成する「入力遅延」「処理時間」「プレゼンテーションの遅延」すべての時間に影響を与えています。
不要なJavaScriptは削除する、処理に時間がかかるJavaScriptは分割して実行するようにするなどの対策を実施しましょう。
ブラウザの表示処理（レンダリング）を最適化する
ユーザー操作によって表示が変化するとき、ブラウザはレイアウトやスタイルの再計算、画像やテキストの読み込みなどを実行しています。レイアウトやスタイル変更が複雑だったり、読み込む画像の容量が大きかったりすると、その分、表示の変更に時間がかかり、INPも悪化します。
レイアウト、スタイルの再計算に使用されるDOM（Webサイトの設計図のようなもの）や、CSSが大きく、複雑になりすぎていないかを確認して改善を図りましょう。
INPについてのよくある質問
最後にINPについて多くのWeb担当者が抱いている疑問にまとめて回答していきます。気になる点がある人はぜひチェックしてください。
Q：INPとFIDはどう違うのですか？
INPとFIDの最も大きな違いは計測対象となるインタラクションの範囲です。INPはページ滞在中に発生するすべてのインタラクションを対象としていますが、FIDはユーザーがWebページにアクセスしてから最初に行ったインタラクションを対象としています。
また、INPはユーザーの操作から表示の変化が完了するまでの時間であるのに対して、FIDはユーザーの操作のあと、ブラウザがその操作に反応し始めるまでの時間です。Webページの応答性という意味ではINPのほうがより包括的かつ実際的であるといえます。
Q：INPを改善するとGoogleの検索順位が上昇しますか？
INPはCore Web Vitalsの構成要素であり、Webページのユーザー体験の評価指標としてGoogle検索のランキングシグナルとして使用されています。ただし、ランキングシグナルは200以上あるとされており、INP改善が検索順位の上昇に直結するかというとそうではありません。検索意図との関連性やコンテンツの品質のほうがより順位への影響度が高いからです。
INPの改善に取り組むときは、SEOの観点ではなくあくまでユーザー体験の改善に重点を置いて実施することをおすすめします。
Q：PageSpeed InsightsではINPの改善方法がわからないのですが……
PageSpeed Insightsの「パフォーマンスの問題を診断する」にはINPが表示されません。そのため、INPに限定した改善手法をPageSpeed Insightsで確認することはできません。ただし、ヒントになる改善手法は提案してくれています。
それは「TBT（Total Blocking Time）」に対する診断と改善提案です。TBTとINPは密接にかかわっており、TBTが悪化するとINPも悪化する傾向があります。TBTの改善がINPの改善に繋がるのです。
サイト表示速度の現状を競合と比較してプロが診断！
あわせて読みたいコアウェブバイタル（Core Web Vitals）関連記事
コアウェブバイタル（Core Web Vitals）とは？
コアウェブバイタルの意味や確認方法、SEOへの影響を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ コアウェブバイタルの意味とSEOへの影響を詳しく見る
LCP（Largest Contentful Paint）とは？
LCPの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ LCPの意味と改善方法を詳しく見る
CLS（Cumulative Layout Shift）とは？
CLSの意味や計測の対象・方法、改善策を、WebマーケターやSEO担当者に向けてわかりやすく解説しています。
⇒ CLSの意味と改善方法を詳しく見る
執筆者
