INP(Interaction to Next Paint)とは？新たなCore Web Vital指標の解説

SEO 2023.11.09

＃用語解説＃Webサイト改善＃SEO ＃UI/UX

「INPとは何だろう？」「FIDとは何が違う？」と思ったことはありませんか？

INPは新たなCore Web Vitalの指標と言われている、重要な要素です。INPを計測してWebページの改善に活かせば、ユーザーにとって満足度の高いページを作成できます。

本記事では、INPの概要やFID(First Input Delay)の違い、計測方法やINPスコアを改善するための方法まで解説します。

INPについて詳しく知らない方や、改善方法が分からない方は、ぜひ最後までご覧ください。

INPとは?

INPとは、Interaction to Next Paint の略称です。ユーザーの操作に視覚反応が起きるまでの時間を表します。

Core Web Vital（ユーザーエクスペリエンスの評価指数）の新たな指標で、2024年3月より現在採用しているFID(First Input Delay)と置き換えるとGoogleが公表しています。*

INPを確認すると、ページ内のコンテンツの応答性が良いのか悪いのかが分かります。遅延を示す値なので、小さいほど応答性に優れているといえます。例えば、タップからアニメーションが実施されるまでの時間が短いほど、INPは小さく、応答性は良好です。

検索上位に表示されるためには、ユーザーエクスペリエンスの向上が欠かせません。そのため、今後はSEO対策の一環としてINPの改善が求められるでしょう。

Core Web VitalやFIDについて詳しく知りたい方は、「コアウェブバイタルとは？FID、LCP、CLSの改善方法もあわせて解説」の記事も併せてご覧ください。

※出典：Google検索セントラル「INP を Core Web Vitals に導入」

INPの判定指標

INPの判定指標は以下のとおりです。

インタラクションの数が50未満のページ：最も遅延が大きい反応速度が判定の対象
インタラクションの数が50以上のページ：98パーセンタイルの反応遅延が判定の対象

100個のインタラクションが存在するページであれば、98番目に反応が遅いインタラクションがINPの対象です。

なお、インタラクションの目標値は下記のとおりです。

200ミリ秒以下：良好
200ミリ秒超から500ミリ秒以下：要改善
500ミリ秒超：不良

200ミリ秒以下であれば、読み込みに問題はなく、ユーザーにとって使い勝手の良いページであるといえます。200ミリ秒を超えていれば改善すべきです。

INPがチェックするインタラクション

INPは、基本的にユーザーのすべての操作に対する反応が対象とされます。

例えば、以下のような時間が計測され、指標になります。

マウスのクリックへの反応
スマホなどのタッチスクリーンデバイスをタップした時の反応
キーボードの押下に対する反応

応答性がチェックされる具体的な操作は以下のとおりです。

ニュースサイトで画像をクリックしたら、拡大した画像が表示される
スマートフォンで商品のお気に入りボタンをタップしたら、お気に入り一覧に反映される
キーボードで打った名前が、フォームの氏名欄に表示される

上記のような操作で反応がなかったり遅延したりすると、INPの値は高くなってしまいます。ただし、スクロールでは視覚反応は発生しないため、計測の対象ではありません。

INPとFID(First Input Delay)の違い

INPと似た指標にFIDがあります。前述のとおりFIDは2024年3月にINPに置き換えられますが、具体的にどこが異なるのかを解説します。

INPとFIDの違いは下記のとおりです。

測定されるタイミングが違う
測定される時間が違う

それぞれ詳しく紹介します。

測定されるタイミングが違う

FIDとINPでは計測されるタイミングが異なります。FIDは、ページを訪れた後の最初のインタラクションのみが計測の対象です。

一方、INPはページの読み込みを開始してから、ユーザーがページを離脱するまで、すべてのインタラクションが指標の対象です。つまり、INPのほうがFIDよりも、測定されるタイミングが大幅に増えています。

測定される時間が違う

FIDとINPは、測定される時間にも違いがあります。

FIDは入力遅延時間のみを対象にして観測しています。しかし、INPは以下すべての時間が測定の対象です。

アクションを実行するまでの時間
コードの処理までの時間
ブラウザが結果を示すまでの時間

INPのほうが指標の対象となる時間も長くなります。そのため、INPはFIDよりも「ユーザーにとってより便利なページを提供できる指標」と考えられています。

INPの計測方法を紹介

INPを計測する際は「Page Speed Insight」などのツールを使います。「Page Speed Insight」の使い方は以下のとおりです。

Page Speed Insightにアクセスする
計測したいURLを入力する
分析ボタンを押す
結果を確認する

表示された結果においてINP欄が小さい値であるほど、遅延がなく応答性が良好であることを示しています。

値が200ms以下であればユーザーにとって良いページといえます。それ以上の値であれば、読み込みに時間がかかっているなどの問題があるため、改善が必要です。

INPスコアを改善するための実践的な方法

INPスコアが良くなかった場合は、対策を講じればINPのスコア改善が期待できます。以下2パターン別に、スコア改善の方法を紹介します。

ページが読み込まれる時の改善方法
ページを読み込んでからの改善方法

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

ページが読み込まれる時の改善方法

ページ読み込み時のインタラクション改善を図る時は、Google Chromeのディベロッパーツールの使用がおすすめです。

具体的な改善策は、以下が挙げられます。

ディベロッパーツールで使用しないコードを確認し、削除する
リンクの後に「defer」と記載して、低速度のJavaScriptや優先度の高くないJavaScriptを、最後に読み込ませる

上記のような対策を打ち、指標が高くなるかチェックしましょう。

ページを読み込んでからの改善方法

ページ読み込み後の反応を改善する方法として、まずは以下を確認します。

JavaScriptのページの応答性に関する影響をチェック
postTask APIを使用し、タスクの優先順位をチェック

上記を確認したら、以下のようにタスクの優先順位や処理を変更しましょう。

すぐに実行する必要がない処理は、ブラウザのアイドル時に実施する
処理に時間がかかるタスクを見直す

表示させるデバイスによって、指標の値は異なります。パソコンとスマートフォン表示の両方の指標をチェックし、ユーザーにとって快適なページを目指しましょう。

また、表示速度以外のクローラー、インデックスの最適化などの対策方法については、「テクニカルSEOとは？コンテンツSEOとの違いや対策するメリットも！」「SEOとは？初心者にもわかりやすく順位を上げる対策法と仕組みを解説」の記事で詳しく解説しています。ぜひ併せてご覧ください。

INP まとめ

INPとは、ユーザーの操作に視覚反応が起きるまでの時間を示します。FIDに代わるコアウェブバイタルの指標の1つです。

FIDよりも測定タイミングが増え、測定される時間も長くなります。

値はPage Speed Insightsで確認可能です。もし、要改善と判断された場合は、Google Chromeのディベロッパーツールなどを利用し、コードやタスクを見直しましょう。

パンタグラフでは、INP改善などテクニカルSEOに関するご相談も承っております。まずはお気軽にご相談ください。

お問い合わせはこちら