名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

MARKETING

Core Web Vitalsに追加されるINPの概要と改善策

2023
.08.24

Core Web Vitalsに追加されるINPの概要と改善策

2023年5月10日、Google検索セントラルブログ内でコアウェブバイタルズに新しくINPが追加されることが発表されました。
コアウェブバイタルズは、Googleからの評価にも密接に関わっている要素で、ホームページの運用担当者であれば必ず知っておくべき知識です。
そこで今回は、コアウェブバイタルズに新たに追加される指標INPに焦点を当て、その役割や意味について説明していきます。

【目次】
1.コアウェブバイタルズの概要と各指標の説明
 a.FCP:ファーストコンテントフルペイント
 b.LCP:ラージコンテンフルペイント
 c.FID:ファーストインプットディレイ
 d.CLS:キューミュラティブレイアウトシフト
2.コアウェブバイタルズに新たに追加されるINPとは
3.INPの重要性
4.INPの追加によるコアウェブバイタルズの変更
5.INPスコアの測定方法
 a.Lighthouseの概要と使用の手順
6.INPスコアを改善する方法
 a.レンダリングの最適化
 b.JavaScriptの最適化
 c.リソースの最適化
 d.サーバーの最適化
7.今回のまとめ

コアウェブバイタルズの概要と各指標の説明

コアウェブバイタルズは、ホームページのパフォーマンスとユーザー体験を評価する指標です。ホームページの読み込み速度や応答性、レイアウトの安定性など、Googleが提唱するこれらのバイタルズは、ユーザーがホームページを快適に利用できるかどうかを測定するために使用されます。
Googleからの評価を向上させるためには、これらの指標を正しく理解して最適化することが大切です。まずは、コアウェブバイタルズのそれぞれの主要な指標を理解しましょう。

FCP:ファーストコンテンフルペイント

FCPは、ユーザーがホームページを開いてから、何かしらのコンテンツ(テキストや画像など)がブラウザ上に表示されるまでの時間のことです。
FCPが1.8秒未満の場合は良好であり、1.8〜3秒未満の場合は要改善、3秒以上の場合は不良と判断されてGoogleからの評価が低下するおそれがあります。

LCP:ラージコンテンフルペイント

LCPは、ページの主要なコンテンツ(テキストや画像など)のうち、最大サイズのコンテンツ、つまりそのページ内で最も目立つコンテンツが画面に完全に表示されるまでの時間です。
LCPが2.5秒未満の場合は良好であり、2.5以上4秒未満の場合は要改善、4秒以上の場合は不良と判断されてGoogleからの評価が低下するおそれがあります。

FID:ファーストインプットディレイ

FIDは、クリックやタップといったユーザーの行動に対してホームページが反応するまでの時間です。
ホームページのインタラクティブ性を表した数値であり、FIDが0.1秒未満の場合は良好であり、0.1以上0.3秒未満の場合は要改善、0.3秒以上は不良と判断されてGoogleからの評価が低下するおそれがあります。

CLS:キューミュラティブレイアウトシフト

CLSは、ページ上の要素が動的に変更されることによるレイアウトの安定度合いを表した数値です。スコアは0〜1で評価され、レイアウトが大きく変わるほど数値が大きく、レイアウトの変更が少なければ数値が低下します。
CLSが0.1秒未満の場合は良好であり、0.1以上0.25未満の場合は要改善、0.25秒以上は不良と判断されてGoogleからの評価が低下するおそれがあります。

コアウェブバイタルズに新たに追加されるINPとは

INP(Interaction to Next Paint)は、2024年3月にコアウェブバイタルズに追加される新しい指標で、クリックやスクロール、入力といったユーザーの行動後、次の画面に更新されるまでの時間を指します。
INPの数値は、ホームページのユーザーエクスペリエンスを測る重要な要素です。ユーザーがホームページ上で何かしらの操作を行ったにもかかわらず、反応が遅れている・更新に時間がかかっている状況が続いてしまうと、ユーザーはホームページが動作していないと感じます。
当然、ユーザーのストレスは増加し、離脱率が上昇するおそれがあります。特にモバイルデバイスのユーザーエクスペリエンスにおいては、INPの最適化がより重要となるため、必要に応じてホームページを改善する必要があります。なお、INPの改善例は、後ほど記述します。

INPの重要性

前項のとおり、INPはホームページのユーザーエクスペリエンスに大きく資する項目であり、重要な指標であることが理解できたかと思います。本項目では、INPの重要性についてより深く説明していきます。
Googleは、ユーザーファーストをポリシーとして検索エンジンサービスを提供しています。
ホームページの評価項目は、大別しても200以上のカテゴリに分けることができ、その中でもユーザーエクスペリエンスの影響は他の項目と比較して大きいと予想されています。
前述の通り、INPはホームページのユーザーエクスペリエンスを表す指標であるため、INPのスコアがより一層Googleからの評価に直結することとなり、ホームページの検索順位に多大な影響を及ぼすことが予想されます。
また、INPは、ホームページを利用するユーザーのストレスにも直結します。INPが悪い、つまり応答性が欠けているホームページは、離脱率が高い傾向にあるため、せっかくユーザーをホームページに呼び込むことができたとしてもコンバージョンに繋がる確率が低下してしまいます。
ユーザーエクスペリエンスは、検索エンジンのランキングアルゴリズムとユーザーの双方に影響を与える重要な要素でるため、ホームページを公開したら終わりではなく、これまでのコアウェブバイタルズだけでなく、新たに追加されたINPも確認し、必要に応じて改善していくことが大切です。

INPの追加によるコアウェブバイタルズの変更

前述の通り、2024年3月にコアウェブバイタルズにINPが追加されると説明しましたが、厳密にはファーストインプットディレイ(FID)がINPに置き換わるという説明が正しいです。
FIDはクリックやタップといったユーザーの行動にホームページが反応するまでの時間を、INPはユーザーが行動してから次の画面に更新されるまでの時間を指しています。どれだけ初期の反応速度に優れていても、その後の通信・表示速度に時間を要するホームページはユーザーにとって優しいホームページとは言うことができません。FIDがINPに置き換わった背景は、ユーザーの立場から考えてみると分かりやすく、Googleが置き換えた意図を容易に理解することができます。
今後は、ユーザーのホームページ上での操作に対してスムーズにフィードバックすることができるよう、ホームページのパフォーマンスをしっかりと評価・改善することがより一層大切となります。

INPスコアの測定方法

Googleから評価されるホームページとして育てていくためには、INPの改善が必要不可欠ですが、その前に、自社ホームページのINPスコアの値を確認する必要があります。本項目では、Lighthouseというツールを利用し、ホームページのINPスコアを確認する方法を紹介します。

Lighthouseの概要と使用の手順

Lighthouseは、 Google Chromeのデベロッパーツール内に含まれている機能の一つであり、ホームページのパフォーマンスやアクセシビリティなどを評価することができるツールです。オープンソースであるため、Google Chromeをインストールしているパソコンであれば、誰もが無料で利用することができます。
以下、Lighthouseを使用してホームページのINPスコアを確認する手順です。

  1. INPのスコアを確認したいホームページをGoogle Chromeで開き、ページ上で右クリックし、「検証」または「要素を検証」を選択します。
  2.  デベロッパーツールを開いた後、メニューバーから「Lighthouse」を選択します。
  3. 「Timespan」のモードを選択し、「Start timespan」をクリックすることで計測が開始されます。
  4.  計測終了後、「End timespan」をクリックすることでINPスコアを確認することができます。
  5.  各カテゴリのスコアが表示され、問題点や改善すべき項目がリストアップされます。

INPスコアを改善する方法

Googleからの評価を向上させ、ホームページの集客力を向上させるためには、優れたコンテンツやデザインだけでなく、今以上にINPスコアの改善が必要不可欠となります。
ホームページを利用するユーザーが快適に閲覧・操作することができるようにするために、INPスコアの改善方法を知っておきましょう。
以下、INPスコアを改善するための代表的な解決策を記載しますが、自社で無闇にホームページを修正してしまうとかえってGoogleからの評価が低下するおそれがあるため、実際に修正を行う際は、ホームページ制作会社に依頼することをお勧めします。

レンダリングの最適化

ホームページのレンダリングを効率的に行うことで、次の画面の表示までの時間を短縮することができます。
ブラウザのレンダリングパフォーマンスを向上させるためには、CSSの最適化を行うことが必要で、使用していないCSS・フレームワークの削除やコードの圧縮などの方法が挙げられます。遅延を引き起こす要因を可能な限り排除し、コンテンツが素早く表示されることが大切です。

JavaScriptの最適化

上述の通り、INPはFIDと性質が似ているため、FIDを改善するための方法は、そのままINPの改善にもつながります。FIDスコアが悪くなる主な原因は、大規模なJavaScriptのコードであるため、不要なJavaScriptのコードを削減することで、ページの読み込みや処理速度を向上させることができます。

リソースの最適化

ホームページ上に掲載している画像や使用フォントなどのリソースを圧縮・軽量化することでブラウザ側のダウンロード時間を短縮します。ブラウザに合わせて適切なフォーマットを使用し、ページの読み込み速度を改善することでINPスコアを向上させることができます。

サーバーの最適化

ホームページのデータがアップロードされているサーバーのスペックを見直すことで、INPを改善することができるケースがあるため、サーバーサイドでの最適化を行い、リソースの効率的な提供と処理を確保します。
他には、クラウドサービスを利用して、コンテンツの配信や処理を高速化することができます。CDNの活用や、サーバーレスアーキテクチャを採用することでも効率的な処理を実現することが可能なケースがあります。

今回のまとめ

今回のブログを読むことで、コアウェブバイタルズのINPの概要や重要性、その改善方法を理解することができたかと思います。
繰り返し記載している通り、INPスコアの測定・改善は、ホームページの集客力を向上させるために欠かすことはできません。INPスコアが低下している問題を特定し、適切な改善策を講じることで、ユーザーエクスペリエンスの向上、ひいてはGoogleからの評価が向上します。
前項で紹介したINPスコアを改善する方法を正しく理解し、ホームページ制作会社と連携しながらホームページを運用していきましょう。

AUTHOR

著者情報

WEBディレクター

K.I.

前職では、設備メーカーで電気工事士として従事しながら、個人事業主のWEBコーダーとしてホームページ制作にも従事。株式会社オンカに入社後は、WEBコーダーとしての知見や、学生時代の留学で培った語学力を活かしたグローバルな情報収集力により、数々の顧客のWEBマーケティングに尽力している。

  • YMAA(薬機法医療法)広告遵守 個人認証マーク取得
  • KTAA(景表法・特商法)広告遵守 個人認証マーク取得

PAGE TOP