2022年5月、Google主催の開発者向けイベント「GoogleI/O」で新指標「INP」の存在が明らかになりました。当初は試験導入とされていたINPですが、その後2024年3月から、Core Web Vitalsの「FID」と置き換えになることが発表されています。

FIDからINPへと指標が置き換えられれば、ウェブサイトのSEO対策も新たな指標に基づいて行う必要があります。

本記事ではそんなINPについて、以下の内容を解説します。

• INPとは
• INPが観測するインタラクション
• INPの計測方法
• INPの目標値
• INPの改善方法

INPとは

INPとは「Interaction to Next Paint」の略称です。ウェブサイトにおいて、ユーザーからのアクションに対して視覚的な反応が発生するまでどれくらいの時間がかかるのか、その指標となるもので、2024年3月からは「FID」に代わってコアウェブバイタルの新しい指標となります。

公式のwe.devブログでは、INPの例として以下のような動画が紹介されています。

引用元：

INPを基準として見た場合、左が悪い例、右が良い例になります。

左の例はクリックをしてもアコーディオンを開くまでに時間がかかっています。加えて反応がないことを「クリックできていない」と感じたユーザーが、何度も連続でクリックし、意図しない応答がなされている様子です。

右の例はクリックをしてすぐにアコーディオンが開いています。ユーザーが複数回、同じボタンをクリックすることはなく、意図しない応答はなされません。

以上のように、アクションに対して視覚的な反応が発生するまでのスピードが早ければ早いほど、ユーザー体験の向上に繋がります。そして2024年3月からCore Web VitalsのFIDと置き換えになることを考えると、INPはウェブサイトのランキング要因としても大きな意味を持ってくるのです。

【Google】2021年6月中旬からCore Web Vitalsがランキング要因になると発表！

FIDとの違い

これまで、ウェブサイトにおけるアクションへの反応速度を示す指標としては、一般的に「FID」が用いられていました。

INPとFIDは、似ているようで大きな違いがあります。それは、FIDが入力遅延時間のみを計測対象としているのに対して、INPは入力遅延時間に加えて処理遅延時間、表示遅延時間も計測対象としている点です。

入力遅延時間：ユーザーが何らかの操作を行ってから、それが実行されるまでの時間
処理遅延時間：コードの実行にかかる時間
表示遅延時間： 処理が完了し、その結果をブラウザが表示するまでにかかる時間

表を見ると分かるように、INPはFIDよりも正確にウェブサイトの応答性を評価できる指標となっています。

FIDについては下記のコラムで詳しく解説しています。

FIDとは？改善方法や測定ツールの使用方法について解説

INPが観測するインタラクション

INPは、以下の3つのインタラクションを観測します。

以上3つのインタラクションに対する反応速度を、INPは計測します。

INPの計測方法

今後、SEOにも大きな影響を及ぼすことになるINP。しかし、自分のサイトのINPのスコアが分からなければ、改善するべきかどうか判断できません。そこで、まずはINPを計測してみましょう。

INPの計測は以下のツールで行うことができます。

• PageSpeed Insights
• Chrome User Experience Report（CrUX）
• web-vitals JavaScript library

PageSpeed Insightsでの計測方法

1. にアクセスする
2. 計測したいサイトのURLを入力する
3. 「分析」ボタンをクリックする

すると、以下のような画面が表示されてINPが分かります。

PageSpeed Insightsの使い方については下記のコラムでも解説しています。あわせてご覧ください。

Google Page Speed Insightsの使い方を解説！ページの表示スピードを上げよう

Chrome User Experience Report（CrUX）での計測方法

1. にアクセスする
2. メールの設定を行う
3. 「Chrome UX Report」で検索する
4. 「Enter origin URL」を入力する
5. 「接続」ボタンをクリックする
6. パラメータの共有を許可する
7. 「レポートを作成」ボタンをクリックする

すると、以下のような画面が表示されて月ごとのINPの計測値が分かります。
月ごとのINPをまとめてレポートにしたい時に向いている方法です。

web-vitals JavaScript libraryでの計測方法

1. サイトにChromeの拡張機能「」をインストールする
2. INPを計測したいページでWeb Vitalsを使用する

すると、以下のような画面が表示されてINPが分かります。
あらかじめ拡張機能をインストールしておけば、もっとも手軽にINPを計測できる方法です。

INPの目標値

INPは単位「milliseconds（ms）」を用いた数値で評価され、数値が小さいほどアクションが行われてから、視覚的な反応が発生するまでにかかる時間が短いことを示します。

アクションに対する反応の遅延を判定する際の閾値は以下の図の通りです。

〜200ms：応答性が良い
201ms〜500ms：応答性の改善が必要
501ms〜：応答性が悪い

SEO対策においては、INPが200ms以下になるように改善することが望ましいと言えます。

INPの改善方法

では、INPはどのように改善すれば良いのでしょうか？最後に改善方法について解説します。

なお、INPの改善は「ページ読み込み時」と「ページ読み込み後」の2つの側面から行いますので分けてご紹介します。

ページ読み込み時

• 使用しないコードを削除する
• ページ読み込み中に不要なJavaScriptを遅延読み込みする
• 低速のサードパーティJavaScriptを特定する
• パフォーマンスプロファイラーを使用し、処理に時間がかかっているタスクを見つけて最適化する
• JavaScriptの実行後、ブラウザのレンダリングに大きなコンポーネントツリーの再レンダリング、大きな画像のデコード、重いCSS効果などを求めない

ページ読み込み後

• postTask APIを使用し、適切なタスクの優先順位を設定する
• requestIdleCallbackを使用し、すぐに必要のない処理をブラウザがアイドル状態の時に実行するようスケジュールする
• パフォーマンスプロファイラーを使用し、処理に時間がかかっているタスクを見つけて最適化する
• サードパーティのJavaScriptを調査し、ページの応答性に対する影響を確認する

まとめ

この記事ではINPについて、以下の内容を解説しました。

• INPとは
• INPが観測するインタラクション
• INPの計測方法
• INPの目標値
• INPの改善方法

INPは、ウェブサイトにおけるアクションへの反応速度を示す従来の指標FIDを内包し、より正確な応答性を評価できる指標です。

2024年3月に指標がFIDからINPに置き換えられれば、応答性の向上に関して、今まで以上に必要な対策が増えることでしょう。

いずれINPはランキング要因の1つになります。そうなった時に他のサイトに遅れをとらないよう、今からINPの改善方法を理解し、実行しておきましょう。