注目の新指標INPとは?FIDとの違いや改善方法、計測ツールまで徹底解説
新しくできた指標であるINPについて知りたい方は多いのではないでしょうか。INPは新たなコアウェブバイタルの指標の1つで重要な要素になります。
本記事では、INPの改善方法や低下する原因、計測方法についても解説します。
INPを改善して、ユーザー満足度を向上させましょう。
また、Webのご担当者であれば、ウェブサイトの読み込みスピードがWebサイトの成果に影響を与えることはご存知だと思います。
実際、あるリサーチによるとわずか0.1秒サイトスピードが向上することで、購入完了率が8.4%も高まると言われており、スピードとCVRには相関関係があることが示されています。
下記事例集では実際のサイトスピード改善事例を、LCPやTTFBなどの指標はもちろん、CVRやSEOがどう変化したのかまで含めて紹介しています。
Webサイトの管理や改善を担当されている方には参考になる内容になっておりますので、
是非こちらからダウンロードください。
目次
INPとは
INPとは、Interaction to Next Paintの略称で、ユーザーがページ内でアクションした反応速度を計測して遅延を計測し、ページ内のコンテンツ応答性の善し悪しを判断する指標です。
2024年3月より、現在採用しているFIDと置き換えるとGoogleが公表しました。
たとえば、スマホなどのタッチスクリーンデバイスをタップしたときの反応が早いほど、INPは小さく応答性は良好と言えます。SEOで評価されるためには、ユーザーエクスペリエンスが重要です。そのため、今後はINPの改善が必要になるでしょう。
INPの重要性
INPはWebサイトのユーザーエクスペリエンスを表す指標であるため、INPのスコアがGoogleからの評価に直結します。INPのスコアが悪いと、Webページの離脱率が高くなってしまい、コンバージョン率が低くなってしまいます。
ユーザーエクスペリエンスは、SEOとユーザーの双方に影響を与える重要な要素であるため、これまでのコアウェブバイタルだけでなくINPも必要に応じて改善しましょう。
INPの判定指標
INPの判定指標は以下のとおりです。
- インタラクションの数が50未満のページ:もっとも遅延が大きい反応速度が判定対象
- インタラクションの数が50以上のページ:98パーセンタイルの反応遅延が判定対象
インタラクションの遅延は、Webページ滞在中に発生するインタラクションの数により異なります。
インタラクションの目標値は以下を参考にしてください。
- 200ミリ秒以下:良好
- 200ミリ秒超から500秒以下:改善が必要
- 500ミリ秒超:不良
200ミリ秒以下であれば、ユーザーはストレスなく次の行動に移せます。200ミリ秒を超えた場合は改善しましょう。
INPがチェックするインタラクション
INPは以下の3つのインタラクションを計測します。
- マウスのクリック
- スマホなどのタッチスクリーンデバイスをタップ
- キーボードの押下
上記の操作で遅延したり反応がなかったりすると、INPの値が高くなります。
また、スクロールは計測の対象ではありません。
INPとFIDとの違い
FIDはコアウェブバイタルの指標の1つであり、ユーザーに対する応答性を表します。
FIDでは入力遅延時間のみを計測対象としているのに対し、INPは「入力遅延時間」「処理遅延時間」「表示遅延時間」が計測対象です。
計測対象のインタラクション | 計測対象の時間 | |
FID |
|
|
INP |
|
|
表のようにINPは計測対象となるインタラクションが増え、多角的に検証することでFIDより正確にWebサイトの応答性を評価できます。
INP低下の原因
INPの低下が考えられる原因は以下のとおりです。
- サーバーにかかるコストが大きい
- 画像ファイルが重い
- JavaScriptを多用している
それぞれ詳しく解説します。
サーバーにかかるコストが大きい
サーバーコストが大きい場合もINP低下の原因の1つとして考えられます。
たとえば以下の場合、サーバーにかかるコストが大きくなっているかもしれません。
- サーバーのスペックが低い
- HTMLやCSSが最適化されていない
- データベースのアクセスが遅い
サーバーコストが大きい原因はさまざま考えられるので、1つずつ解決することがポイントです。
また、サーバーのスペックが低い場合は、サーバーのスケールアップも検討しましょう。
画像ファイルが重い
容量やサイズの大きい画像は、INP低下につながります。必要に応じて画像圧縮を行い、画像ファイルを縮小しましょう。
画像ファイルを縮小したい場合は、画像圧縮ツールの使用がおすすめです。
たとえば、Optimizillaなどのツールに画像をアップロードし、圧縮された画像をWebサイトに使用します。
また、WordPressを使用している方は、プラグインのEWWW Image Optimizerを追加することでも画像圧縮が可能です。
JavaScriptを多用している
JavaScriptはユーザーのブラウザ上で実行されるプログラムのため、処理速度はユーザーのデバイスに依存します。
そのため、JavaScriptを多用するとスペックが低いデバイスでは処理が遅くなり、INP低下につながります。JavaScriptは多用しないように、最適化を心がけてWebサイトを運用しましょう。
INPの改善方法
INPの改善方法は以下の4つです。
- JavaScriptを減らす
- 画像の読み込みを遅らせる
- キャッシュを利用する
- タスクの優先順位を最適化する
それぞれ詳しく解説します。
JavaScriptを減らす
Webサイトで使用しているJavaScriptが多い場合は、JavaScriptを減らすことでINP改善につながります。
Webページに多くのJavaScriptが含まれている場合、プログラムの実行に時間がかかり、ページの表示速度が遅くなります。使用していないJavaScriptの確認は、「PageSpeed Insight」や「DeveloperTools」などのツールで確認しましょう。
また、使用していないJavaScriptの削除方法は以下の3つがあります。
- 直接削除する
- WordPressのプラグインで削除する
- コマンドラインツールで削除する
不要なJavaScriptは可能な限り減らしてINPを改善しましょう。
画像の読み込みを遅らせる
画像を多く使用しているWebサイトの場合、1つひとつの画像データが大きくなくても、トータルで画像のデータ量が大きくなりがちです。そのため、ページの表示に時間がかかってしまいます。
この場合は、画像ファイルをすべて読み込むのではなく、必要な部分だけ画像を読み込むことでINPの改善につながるでしょう。
画像の読み込みを遅らせるWordPressのプラグインは以下の2つが挙げられます。
- EWWW Image Optimizer
- Autoptimize
上記のプラグインの設定は簡単で、EWWW Image Optimizerの場合は設定画面で「基本」タブ内の「遅延読み込み」にチェックを入れるだけ。一方のAutoptimizeについても「image」タブ内の「Lazy-load images」にチェックを入れるだけで完了です。
キャッシュを利用する
キャッシュとは、ブラウザなどが表示したWebページのデータを一時的にPCに保存する機能です。
次にWebページにアクセスしたとき、ネット上のデータではなく保存されたファイルを参照するため、すばやく表示できます。
必要なコンテンツはキャッシュから復元できるので、Webサイトの応答性能がよくなります。
そのため、キャッシュを利用することで、INPの改善につながるでしょう。
タスクの優先順位を最適化する
タスクの優先順位を最適化することで、INP改善につながります。
たとえば、即実行しなくてもよい処理は、アイドル状態のときに行うように設定するのも1つの方法です。
そのほか、不要タグの整理やサードパーティJavaScriptの影響を確認しましょう。
INPの計測方法
本章では、INPの計測方法について解説します。
INPが計測できるツールは以下の3つです。
- Google Search Console
- PageSpeed Insights
- Web vitals
上記のツールをうまく活用してINPを改善していきましょう。
Google Search Console
Google Search Consoleは、Googleが無料で提供しているツールです。
検索順位や表示回数、クリック数などを確認できるため、SEOツールとしても重宝されています。
Google Search ConsoleでINPを計測する方法は以下のとおりです。
- Google Search Consoleを開き、左側メニューの「ページエクスペリエンス」をクリックします
- 続いて、「ウェブに関する主な指標」をクリックしましょう
- 最後に、ページ下部でINPの確認ができます
問題がなければ、「INPの問題は検出されませんでした」の表示が出ます。問題があれば、「改善が必要」「不良」の表示が出るので、改善していきましょう。
PageSpeed Insights
PageSpeed InsightsもGoogleが無料で提供しているツールです。
WebページのURLを入力するだけでINPの測定ができます。
分析結果には、INP以外に「LCP」や「FCP」などの指標も表示されます。
また「携帯電話」「デスクトップ」のタブも用意されているので、見たい方を選びましょう。
Web vitals
Web vitalsはGoogle Chromeの拡張機能です。
INPを調べたいWebサイトを開き、右上に表示されているアイコンをクリックすれば計測できます。分析結果には、INP以外に「TTFB」や「CLS」なども表示されます。
Web vitalsの使用方法は以下のとおりです。
- Chromeウェブストアにアクセスし、ページ右上の検索窓に「Web vitals」を入力します
- 続いて、「Chromeに追加」をクリックし、「拡張機能追加」をすれば設定完了です
後は、INPを調べたいWebサイトを開き、右上に表示されているアイコンをクリックすれば使用できます。
まとめ:INPを改善しユーザー満足度を向上させよう
ここまで、INPの改善方法や低下する原因、計測方法について解説してきました。
INPを改善するためには、低下する原因を特定し、INPが計測できるツールを利用することが大切です。INPが改善すればコンバージョン率が向上し、売り上げアップにもつながります。
Webサイトの運用で改善したい課題がある、集客効果を最大化したい企業様は、ギャプライズにご相談くださいませ!
分析・施策立案からABテスト、最適化、実装までを一気通貫で支援いたします。
ぜひお気軽にお問い合わせください。
今本 たかひろ/MarTechLab編集長
料理人→旅人→店舗ビジネスオーナー→BPO企業にてBtoBマーケティング支援チームのPLを4年半経験し、2023年2月よりギャプライズへジョイン。フグを捌くのもBtoBマーケティングを整えるのも根本は同じだという思考回路のため、根っこは料理人のままです。家では猫2匹の下僕。虎党でビール党。