新しくできた指標であるINPについて知りたい方は多いのではないでしょうか。INPは新たなコアウェブバイタルの指標の1つで重要な要素になります。
本記事では、INPの改善方法や低下する原因、計測方法についても解説します。
INPを改善して、ユーザー満足度を向上させましょう。
目次
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テスト、最適化、実装までを一気通貫で支援いたします。
ぜひお気軽にお問い合わせください。
