WordPressのINPは改善できる？低下原因と改善方法を解説
こんにちは。Wakka Inc.メディア編集部です。
Webサイトのパフォーマンスを評価する指標として、新たにINPが導入されようとしています。
しかし、まだINPという言葉を聞きなれない方や、言葉の意味を知らない方もいるのではないでしょうか。
そこで本記事では、主に下記の内容を取り上げて解説します。
- INPの概要
- INPの測定方法
- INPが低下する原因と改善方法
INPをはじめ、Webサイトのパフォーマンスを評価する指標について理解を深めるために、ぜひとも本記事をお役立てください。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
INPの概要
2024年3月からCore Web Vitalsの新たな指標として、FIDに変わって追加されることになったINP。
本章では、INPがどのような指標か概要を解説しますが、まずCore Web Vitalsから見ていきましょう。
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もインタラクティブ性を評価する指標であるため、ユーザーが実行したイベントに対する反応の速さが評価のポイントと言えるでしょう。
INPとFIDの違い
FIDとは、First Inpot Delayの略で、Webサイトを表示してから次の操作が可能になるまでの時間を表します。
あくまで、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の低下原因として、まず画像ファイルのサイズが大きいケースが挙げられます。
これは、画像が代表的ではありますが、もちろん動画でもテキストでもファイルサイズが大きく、しかもページの初期表示で処理される場合はINPを低下させる原因になるでしょう。
Webサイトで読み込むファイルのサイズが大きくなれば、当然ページの表示にかかる時間にも影響してきます。
近年は、スマートフォンなどのモバイルデバイスによるアクセスも多いため、適切なファイルサイズのコンテンツを配信してモバイルデータ量を減らし、ファイルの読み込みにかかる時間を短縮するのが重要になってくるでしょう。
サーバーにかかるコストが大きい
サーバーにかかるコストが大きい場合もINPの低下原因になることが考えられます。
下記のような場合、サーバーにかかるコストが大きくなっている可能性があるため、注意が必要です。
- 画像や動画ファイルなど、扱うファイルのサイズが大きい
- データベースのアクセスが遅い
- HTMLやCSS、プログラムが最適化されておらずムダが多い
- サーバーのスペックが低い
JavaScriptが多い
JavaScriptが多く使われている場合も、INPの低下原因になり得ます。
特に、WordPressのプラグインやテーマを使っていると、ものによってはページで使用されていないJavaScriptやCSSを知らないうちに読み込んでいる可能性があるようです。
これは、サーバーが返したコンテンツをユーザーのパソコン側でレンダリングする際に時間がかかってしまうためです。
不要なJavaScriptやCSSを特定するにはChromeの開発者向けツールであるDevToolsのCoverageを確認するなど、ツールを使用すれば比較的容易に見つけ出せるでしょう。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
INPの改善方法
前章ではINPの低下原因として考えられる主なポイントを解説しました。
原因が考察できれば、改善に向けた対策も打てるでしょう。
本章では、INPを改善するために実施しておきたい主な対策について解説します。
画像を軽量化する
まず、Webサイトにファイルサイズの大きい画像ファイルなどのコンテンツを使用している場合は、ファイルの軽量化を目指しましょう。
画像の縦横サイズが大きすぎる場合は、適切なサイズに縮小するだけでファイルサイズも小さくなります。
さらに、画像圧縮ツールを使用すれば、画質にはほとんど影響なくファイルサイズを縮小可能です。
スマートフォンやデジタルカメラで撮影した写真、ダウンロードしたフリー画像などをそのまま使っている場合は、画像サイズの縮小と画像ファイルの圧縮だけでかなりの軽量化を達成できるでしょう。
また、WebP形式、AVIF形式など、次世代フォーマットと呼ばれる最新の画像フォーマットの利用も効果的です。
従来の画像形式として一般的なJPEGやPNGなどの形式と比較してもファイルの圧縮率が高いため、サーバーからのダウンロードにかかる時間やデータの消費量を抑えられるでしょう。
画像読み込みを遅らせる
画像を多く使用しているWebサイトの場合、1つ1つの画像ファイルは大きくなくてもトータルのデータ量が大きくなり、ページの表示に時間がかかります。
このような場合はページで使用されている画像ファイルをすべて読み込むのではなく、画面をスクロールしないと表示されない部分は読み込みを遅らせるのが効果的です。
方法としては2種類あります。
- オフスクリーン画像の遅延読み込みプラグインの活用
- jQueryライブラリを使用して画像の遅延読み込みを実装
オフスクリーン画像とはスクロールしないと画面に表示されない画像を指します。
つまり、画面の初期表示時はまだ読み込まず、スクロールして画面に表示されるタイミングで初めて読み込むことで画面の応答性能を改善する手法です。
1.はWordPressのプラグインを使用して遅延読み込みを実現します。
プラグインの種類もa3 Lazy Load、Lazy Load、EWWW Image Optimizerなど数種類が公開されているため、INPの改善に効果がありそうなものを試してみると良いでしょう。
2.はjQueryライブラリと呼ばれるJavaScriptの部品群を導入し、JavaScriptで画像の遅延読み込みを実現する方法です。
jQueryの設定を追加するだけで実現できるため、容易に実装できるでしょう。
JavaScriptを減らす
Webサイトで使われているJavaScriptが多い場合は、不要なJavaScriptを削除して減らすことによってINPが改善する可能性があります。
JavaScriptを多く使用していると、サーバーからダウンロードしたコンテンツファイルをユーザーのパソコン側でレンダリングする際の足かせになっていることが考えられるからです。
不要なJavaScript、あるいは効果的に使われていないJavaScriptがあるなら、見直して可能な限り削除してみましょう。
もし、WordPressのプラグインなどが使っていて不要か判断できない場合は、前述したChromeの開発者向けツールのDevToolsでCoverageを確認してみてください。
使われていないJavaScriptは比較的容易に判断できるでしょう。
PHPをアップデートする
WordPressはPHPというプログラム言語で構築されているシステムです。
そのため、PHPのバージョンが最新でない場合、WordPressの処理性能に影響を与えることが考えられます。
使用しているPHPのバージョンが最新かどうかを確認し、古いバージョンを使用している場合はアップデートして最新にしておきましょう。
プラグインを見直す
WordPressのプラグインやテーマを使用していることで、不要なJavaScriptやCSSがWebサイトに読み込まれていることが考えられます。
同じ機能を持つプラグインが複数ある場合は使用するプラグインを見直し、INPがより良好なプラグインを選択してみてはいかがでしょうか。
キャッシュを利用する
キャッシュとは、Webサイトにアクセスしたときに読み込むコンテンツファイルを、ユーザーが使用しているパソコンのブラウザに保存しておくことです。
必要なファイルを保存しておくことで、次回からのアクセスでは画面表示に必要なコンテンツを読み込み直す必要がありません。
つまり、必要なコンテンツはキャッシュから復元できるため、Webサイトの応答性能が良くなるのです。
もしキャッシュを使用していなければ、キャッシュを設定すればINPの改善が期待できるでしょう。
ヘッドレスCMSでINPを改善する
ヘッドレスCMSとは、WordPressなどとも同じコンテンツ管理システムの一種です。
しかし、従来のCMSとは大きく違う点があります。
本章ではヘッドレスCMSの概要と、ヘッドレスCMSを導入してINPを改善する方法について簡単に解説します。
ヘッドレスCMSとは
WordPressなどの従来のCMSは大きく、制作したコンテンツを表示するフロントエンドの機能と、コンテンツデータを管理するバックエンドの機能に分かれます。
このうち、フロントエンドの部分をヘッドと呼びますが、ヘッドレスCMSとはヘッドの部分、つまりフロントエンドの機能を持たないCMSのことです。
フロントエンド機能を持たないことでフロントエンドとバックエンドが分離されるため、それぞれの機能に影響を受けることなく柔軟にシステムを変更できます。
ヘッドレスCMSのメリット
ヘッドレスCMSの大きなメリットのひとつが表示速度の速さです。
従来のCMSはフロントエンド機能が一体になっており、フロントエンドは管理しているコンテンツをもとに表示用のファイルを動的に生成しています。
そのため、画面の表示にどうしても時間がかかっていました。
しかし、ヘッドレスCMSの場合は表示用のファイルを生成する工程が不要なため、表示速度が早く、サーバーにかかるコストも抑えられます。
この点では、WebサイトのINPを改善する上でヘッドレスCMSの導入が効果的だと言えるでしょう。
ヘッドレスCMSの注意点
WebサイトのINPを改善する上でヘッドレスCMSの導入は効果的です。
しかし、導入にあたっては下記の点に注意する必要があります。
- フロントエンド機能の開発が必要
- 開発にあたってはAPIに関する知識が必要
ヘッドレスCMSはバックエンドに特化したシステムのため、フロントエンド機能を持ちません。
つまり、ヘッドレスCMSを導入してWebサイトを運営するためには、別途フロントエンド機能の開発が必要です。
また、ヘッドレスCMSはバックエンドで管理しているコンテンツをAPIで提供しています。
そのため、フロントエンド開発の際には導入するヘッドレスCMSのAPIに関する知識が必要です。
自社に開発できる人材がいない場合は、CMSが得意なシステム開発会社などに相談してみるのが良いでしょう。
Webサイトの指標と改善方法を理解して効率的なチューニングを
INPを改善するためにはまず、Core Web Vitalsの指標について理解し、PageSpeed Insightsなどのツールを利用して自社のWebサイトの評価を把握しておく必要があります。
その上で、INPが低い場合は考えられる原因を押さえ、適切なアプローチで改善策を実施していくのが近道です。
本記事で解説した内容を踏まえ、自社のWebサイトを効率的に改善していきましょう。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
