WebサイトのINPを改善する方法は？具体的な事例も解説
こんにちは。Wakka Inc.メディア編集部です。
Webサイトのパフォーマンスを評価する指標として、新たにINPが導入されました。
INPは「Interaction to Next Paint」の略で、ユーザー操作（クリック、キー入力など）から次の画面の更新までの時間を測定する指標です。Webページに滞在している時間ではなく、特定の操作に対する応答性能を評価します。
そこで本記事では、主に下記の内容を取り上げて解説します。
- INPの概要
- INPの測定方法
- INPが低下する原因と改善方法
INPをはじめ、Webサイトのパフォーマンスを評価する指標について理解を深めるために、ぜひとも本記事をお役立てください。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
【基礎知識】INPの概要
INPとは、Webサイトの応答性を評価する指標であり、Webページに滞在している時間が最も遅かった時間を計測します。
INPは、2024年3月からCore Web Vitalsの新たな指標として、FIDに代わって追加されました。
Webページの表示時間を計測することで、ユーザーが快適にサイトを利用できているかを判断します。
INPが低下すると、Webサイトの応答性が低下し、Core Web Vitalsへ悪影響を及ぼします。
以下ではINPについての理解を深めるため、次のポイントを押さえておきましょう。
- Core Web Vitalsとは
- 新たに設けられたINPとは
- INPとFIDの違い
Core Web Vitalsとは
Core Web Vitals（コアウェブバイタル）とは、Webサイトのユーザーエクスペリエンスを評価する指標で、2021年にGoogleが公開したものです。
評価対象には次の指標が設けられています。
| LCP | ページの読み込みパフォーマンスを評価する指標 |
|---|---|
| FID | ページのインタラクティブ性を評価する指標 |
| CLS | ページの視覚的安定性を評価する指標 |
これらの指標に基準を設けてWebサイトを評価すれば、Webサイトのユーザーエクスペリエンスがどの程度か定量的なレベルがわかります。
新たに設けられたINPとは
2024年3月からFIDに代わって新たに追加されるINPは、Interaction to Next Paintの略称です。これはWebサイト上でユーザーがクリックなどの操作をした際の応答性能を評価する指標を指します。
インタラクティブとは、対話型・双方向性のことを意味する言葉です。
INPもFIDと同じくインタラクティブ性を評価する指標であるため、ユーザーが実行したイベントに対する反応の速さが評価のポイントです。
INPとFIDの違い
FIDとは、First Inpot Delayの略で、Webサイトを表示してから次の操作が可能になるまでの時間を表します。
対してINPは初期応答時だけではなく、ユーザーがWebサイトを訪れてから離れるまでに実行されたすべての操作が評価の対象です。
つまり、FIDはWebサイトの初期表示さえ速ければ高い評価を得られますが、INPの場合は初期表示以外のあらゆるアクションについても反応が速くなければ高い評価は得られません。
INPの測定方法と目標値
INPはPageSpeed Insightsというツールを使用すれば簡単に測定できます。
具体的には、PageSpeed Insightsのページを開き、評価したいWebサイトのURLを入力して分析ボタンを押せば数十秒～1分程度で分析結果が確認可能です。
分析結果画面にはCore Web Vitalの3つの指標と、その他の重要な指標が数値で表示されます。
各指標の測定値はバーで表示され、その判定・評価は次の通りです。
- バーが緑色の範囲内に収まれば応答性能が良好（GOOD）
- バーがオレンジ色の領域にはみ出ると改善が必要（NEEDS IMPROVEMENT）
- バーが赤色の領域までいくと応答性能が不良（POOR）
そのため、分析結果画面を見ればWebサイトの改善すべき問題点が明確化されます。
各指標で判定基準の数値は異なりますが、INPの場合はそれぞれ200ミリ秒以下なら良好、201ミリ秒～500ミリ秒の範囲なら改善が必要、501ミリ秒以上なら不良と判定されます。
INPが低下する原因
PageSpeed InsightsでWebサイトを分析し、INPの改善が必要だとわかっても、INPが低くなる原因がわからなければ改善のしようがありません。
そこで本章では、INPが低下する主な原因を解説します。
INPを改善し、Core Web Vitalsの対策を行いましょう。
大きな画像や動画の読み込みに時間がかかりすぎている
INPの低下原因として、まず画像や動画ファイルのサイズが大きく、読み込みに時間がかかりすぎているケースが挙げられます。
画像や動画だけでなく、テキストでもファイルサイズが大きい場合はINPを低下させます。さらに、ページの初期表示で処理される場合はINPが低下しやすいです。
Webサイトで読み込むファイルのサイズが大きくなれば、当然ページの応答時間に影響してきます。
Webページの応答時間が遅くなれば、ユーザー体験の質が低下するため、利用者の満足度低下につながります。
近年は、スマートフォンなどのモバイルデバイスによるアクセスも多いため、ファイルサイズを調整してモバイルデータ量を減らし、ファイルの読み込みにかかる時間を短縮することが大切です。
JavaScriptの実行時間が長い
JavaScriptの実行時間が長い場合も、INPの低下原因になり得ます。
特に、WordPressのプラグインやテーマを使っていると、ものによってはページで使用されていないJavaScriptやCSSを知らないうちに読み込んでいる可能性があります。
なぜなら、サーバーが返したコンテンツをユーザーの端末側で、レンダリングする際に時間がかかってしまうからです。
そのため、JavaScriptの実行時間が長いと、レンダリングに時間がかかりINPの低下につながります。
DOM操作が複雑で時間がかかっている
DOM操作が複雑で時間がかかっている場合、INPが低下します。DOMとは、HTMLをツリー構造で表現したコードの数や仕組みのことです。
DOM操作が簡単であれば、処理速度が早くすぐにWebページに応答できます。
しかし、DOM操作が複雑なWebサイトでは、ページの表示速度が遅くなりユーザー体験の質を低下させてしまいます。
多くのサードパーティスクリプトを読み込んでいる
INPが低下する原因の1つが、多くのサードパーティスクリプトの読み込みに時間がかかることです。
サードパーティスクリプトとは、サードパーティベンダー（外部の第三者団体）がサイトに直接埋め込めるスクリプトを指します。
サードパーティスクリプトの具体例は、次の通りです。
- ソーシャル共有ボタン（Facebook、Xなど）
- 動画プレーヤーの埋め込み（YouTube、Vimeo）
- 広告 iframe
- 分析と指標のスクリプト
- テスト用のA/Bテストのスクリプト
- ヘルパーライブラリ（日付形式、アニメーション、関数ライブラリなど）
多くのサードパーティスクリプトが埋め込まれている場合、読み込みに時間がかかりユーザー体験に悪影響を及ぼします。
レンダリングがブロックされている
レンダリングがブロックされると、INPの低下につながります。レンダリングとは、データを処理・演算して画像や映像を表示することです。
この処理が遅くなると、画面描画が思い通りにできず、ページの応答が遅延してしまいます。Webサイトの応答性が低下し、ユーザー体験の質が悪化します。
このようにレンダリング処理の重さによって画面描画が遅延する現象を、レンダリングブロックといいます。
レンダリングブロックは、主に以下の要因で発生します。
- 複雑なDOM構造
- 幅や高さが規定されていないコード
- レンダリング指定を外部ファイルの読み込み後に設定している
メインスレッドで長時間タスクが生じている
メインスレッドで長時間タスクが発生すると、INPの低下につながります。
メインスレッドとは、Webサイトが最初に読み込む基本的な処理を行う中心的なスレッドのことです。
このメインスレッドに大量の画像やテキストを配置すると、処理に時間がかかってしまいます。
特に、Webフォントの読み込みや複雑な計算処理が含まれる場合、大きな処理負荷が発生し、INPの値が低下する原因となります。
CSSファイルに問題がある
INPが低下する要因として、CSSファイルに問題がある可能性があります。
CSSファイルは、ページの要素を選択して表示方法を制御する役割がありますが、内容に問題がある場合はINPに悪影響を及ぼすのです。
具体的には、CSSアニメーションが重すぎる場合など、読み込みに時間がかかる場合は画面処理が遅延し、Webサイトの応答速度が低下します。
INPが低下している場合は、CSSファイルが適切に配置できているか確認しておきましょう。
ネットワーク環境に問題がある
ネットワーク環境に問題がある場合は、INPが低下します。
サーバーが遅い、キャッシュの利用が不十分など、ネットワーク環境に問題が生じている場合は、Webサイトの応答速度が低下してしまうのです。
ネットワーク環境に問題がある要因として、次のようなものが挙げられます。
- サーバーの容量不足
- サーバーの劣化
- VPN側の問題
- プログラムやマークアップが最適化されていない
- ファイルサイズが大きい
INPは、Webサイトの処理速度や表示遅延時間、入力遅延時間などさまざまな要因で計測します。
そのため、ユーザー体験の質を低下させ、Webサイトの利用者満足度が低下する事態へと発展します。
不要なJavaScriptやCSSを特定するにはChromeの開発者向けツールであるDevToolsのCoverageを確認するなど、ツールを使用すれば比較的容易に見つけ出せます。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
INPを改善する方法
前章ではINPの低下原因として考えられる主なポイントを解説しました。
本章では、INPの改善に効果的な次の対策について解説します。
- 画像サイズを縮小する
- 画像フォーマットを最適化する
- 画像の遅延読み込みを実行する
- JavaScriptの最適化を図る
- 不要なJavaScriptを削除する
- CSSの最適化を行う
- サーバーの高速化を行う
- PHPをアップデートする
- プラグインを見直す
- キャッシュを有効活用する
それぞれの対処法を確認して、Webサイトの利用者満足度を向上させましょう。
画像サイズを縮小する
まず、Webサイトにファイルサイズの大きい画像ファイルなどのコンテンツを使用している場合は、ファイルの軽量化を目指しましょう。
画像の縦横サイズが大きすぎる場合は、適切なサイズに縮小するだけでファイルサイズも小さくなります。
さらに、画像圧縮ツールを使用すれば、画質にはほとんど影響なくファイルサイズを縮小可能です。
スマートフォンやデジタルカメラで撮影した写真、ダウンロードしたフリー画像などをそのまま使っている場合は、画像サイズの縮小と画像ファイルの圧縮だけでかなりの軽量化を達成できます。
画像フォーマットを最適化する
また、WebP形式、AVIF形式など、次世代フォーマットと呼ばれる最新の画像フォーマットの利用も効果的です。
従来の画像形式として一般的なJPEGやPNGなどの形式と比較してもファイルの圧縮率が高いため、サーバーからのダウンロードにかかる時間やデータの消費量を抑えられます。
画像読み込みを遅らせる
画像や動画を多く使用しているWebサイトの場合、1つ1つのコンテンツファイルは小さくてもトータルのデータ量が大きくなってしまいます。
データ量が多い場合は、Webページの応答が遅れるためINPが低下します。
対処法として、ページで使用されている画像ファイルをすべて読み込むのではなく、画面をスクロールしないと表示されない部分は読み込みを遅らせるのが効果的です。
方法としては2種類あります。
- オフスクリーン画像の遅延読み込みプラグインの活用
- jQueryライブラリを使用して画像の遅延読み込みを実装
オフスクリーン画像とはスクロールしないと画面に表示されない画像を指します。
つまり、画面の初期表示時はまだ読み込まず、スクロールして画面に表示されるタイミングで初めて読み込むことで画面の応答性能を改善する手法です。
1.はWordPressのプラグインを使用して遅延読み込みを実現します。
プラグインの種類もa3 Lazy Load、Lazy Load、EWWW Image Optimizerなど数種類が公開されているため、INPの改善に効果がありそうなものを試してみましょう。
2.はjQueryライブラリと呼ばれるJavaScriptの部品群を導入し、JavaScriptで画像の遅延読み込みを実現する方法です。
jQueryの設定を追加するだけで実現できるため、容易に実装できます。
JavaScriptの最適化を図る
JavaScriptの実行時間が長い場合はINPが低下するため、コードを最適化すると改善できます。
具体的には、次のような対処法が効果的です。
- 非同期処理の導入
- イベントリスナーの最適化
- DOM操作の効率化
JavaScriptの実行時間を短縮できれば、Webページの応答時間を短くし、INPを改善できます。
INPが低い場合は、JavaScriptが適切に配置できているか確認し、必要があれば上記の対処法を実行しましょう。
JavaScriptを減らす
Webサイトで使われているJavaScriptが多い場合は、不要なJavaScriptを削除して減らすことによってINPが改善する可能性があります。
JavaScriptを多く使用していると、サーバーからダウンロードしたコンテンツファイルをユーザーのパソコン側でレンダリングする際の足かせになっていることが考えられるからです。
不要なJavaScript、あるいは効果的に使われていないJavaScriptがあるなら、見直して可能な限り削除しましょう。
もし、WordPressのプラグインなどが使っていて不要か判断できない場合は、前述したChromeの開発者向けツールのDevToolsでCoverageを確認してみてください。
使われていないJavaScriptは比較的容易に判断し、不要なコードを削除できます。
CSSの最適化を行う
INPが低い場合は、CSSの最適化を行ってWebサイトの応答時間を改善しましょう。
CSSの最適化を行う具体的な方法は、次の通りです。
- CSSファイルを圧縮する
- 使用していないCSSを削除する
- インライン化する
CSSの問題を改善することで、Webサイトの応答時間を短縮しINPを向上できます。
なお、CSSファイルを圧縮する場合は、次のような方法が効果的です。
- CSS圧縮ツールを使用する
- コードエディタ上で圧縮する
- node.jsを使う
サーバーの高速化を行う
サーバーの高速化によって、INPの改善が可能です。
Webサイトの応答時間を短縮すれば、ユーザー体験の質を向上させてINPを改善できます。
サーバーの高速化を行うには、次の対処法が効果的です。
- サーバーのスペックを上げる
- サーバーキャッシュ機能を使う
- ソースコードを整理する
- ファイルを軽量化する
- データベースの管理を最適化する
サーバーの応答速度を向上させるために、なぜWebサイトの応答が遅いのか、原因を特定する必要があります。
現状の課題を特定してから、効果的な対処法を実行しましょう。
PHPをアップデートする
PHPのバージョンが最新でない場合、Webサイトの処理性能に影響を与えます。
使用しているPHPのバージョンが最新かどうかを確認し、古いバージョンを使用している場合はアップデートしておきましょう。
最新のPHPを利用することで、Webサイトの処理性能を向上させてINPを改善できます。
プラグインを見直す
プラグインやテーマを使用すると、不要なJavaScriptやCSSがWebサイトに埋め込まれる可能性があります。
同じ機能を持つプラグインが複数ある場合は、必要なものだけを残し、INPを改善しましょう。
不要なプラグインやテーマを削除することで、Webサイトの処理性能を向上させられます。
キャッシュを利用する
キャッシュとは、Webサイトにアクセスしたときに読み込むコンテンツファイルを、ユーザーが使用しているパソコンのブラウザに保存しておくことです。
必要なファイルを保存しておくことで、次回からのアクセスでは画面表示に必要なコンテンツを読み込み直す必要がありません。
つまり、必要なコンテンツはキャッシュから復元できるため、Webサイトの応答性能が良くなるのです。
もしキャッシュを使用していなければ、キャッシュを設定することでINPを改善できる可能性があります。
INPを改善しないと生じる影響
INPの向上が求められる理由は、改善しないまま放置していると次のような影響が起きるからです。
- ページの離脱率が上昇する
- コンバージョン率が低下する
- SEO評価が低下する
それぞれの影響を確認して、INPを改善するべきか検討しましょう。
ページの離脱率が上昇する
INPを改善しないと、ユーザーのページ離脱率が上昇します。
Webページがスムーズに表示されず、画像や動画コンテンツの応答が遅いサイトは、ユーザーにストレスを与えます。
そのため、応答速度が遅い自社サイトを離れて、スムーズにコンテンツを展開するサイトへ移行されてしまうのです。
コンバージョン率が低下する
INPを改善せず、ページの離脱率が上昇すると、コンバージョン率が低下します。
コンバージョン率を向上させるには、ユーザーが問い合わせや資料請求など、コンバージョンに至るまでサイト内ページを遷移し閲覧しなくてはなりません。
INPが低くページの離脱率が高い状態では、コンバージョンに至らずコンバージョン率の低下につながります。
SEO評価が低下する
INPは、ユーザー体験に起因する重要な要素であり、SEO評価に影響します。
また、INPが低下してユーザー体験の質が低くなると、SEO評価が下がりサイトの上位表示も難しくなります。
INPの低下は、ユーザー体験の質のみならず、SEO評価の低下にも影響するので、慎重に対応することが必要です。
INPの改善に役立つヘッドレスCMS
INP改善には、ヘッドレスCMSを使う方法も効果的です。
ヘッドレスCMSとは、WordPressなどと同じコンテンツ管理システムの一種です。
WordPressなどの従来のCMSは大きく、制作したコンテンツを表示するフロントエンドの機能と、コンテンツデータを管理するバックエンドの機能に分かれます。
CMSのフロントエンド部分をヘッドと呼びますが、ヘッドレスCMSはヘッドの部分（フロントエンド）の機能が備わっていません。
ヘッドを持たないことでフロントエンドとバックエンドが分離されるため、それぞれの機能に影響を受けることなく柔軟にシステムを変更できます。
さらにヘッドレスCMSを使用すれば、ユーザーに表示するファイルを生成する工程が不要になるため、表示速度を向上しサーバーにかかるコストも抑えられます。
そのため、INPを改善する上でヘッドレスCMSの導入が効果的です。
INPの改善方法を理解してWebサイトをチューニングしよう
WebサイトのINPを改善するには、応答速度を向上させてユーザー体験の質を上げる必要があります。
画像サイズやJavaScript、CSSファイルを最適化し、サイトの処理にかかる負荷を軽減しましょう。
また、ヘッドレスCMSを使用すれば、処理速度を向上させてINPを改善できます。
ヘッドレスCMSの導入する際には、自社に適したCMSを選ぶことが大切です。
下記のボタンから、「ヘッドレスCMSの選定ができるポイントを押さえた資料」をダウンロードできます。
代表的なヘッドレスCMSの特徴や選定ポイントを詳しく解説しているため、INPを改善するために、チェックしておきましょう。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
