コアウェブバイタルとは？各指標の概要や対策について解説

GoogleはWebページのユーザー体験（UX）の向上を目指して、Web Vitalsというプログラムを導入しています。その中で特に重要なコアウェブバイタルは2024年3月から新たな指標に変更されており、SEO対策に関わる方は必ず理解しておきたいところです。

UXと合わせてコンテンツの品質もチェックしておきたいという方は、記事の内容とあわせてコンテンツライティングチェックシートをご活用ください！

コアウェブバイタル（コアウェブバイタル）の3つの要素

コアウェブバイタルは、Web Vitalsの中で特にユーザー体験に直結する重要な指標として位置づけられており、以下の3つで構成されています。

各指標について詳しく解説します。

LCP（Largest Contentful Paint)

出典：web.dev

LCPとは、ページ内の最も大きなコンテンツが読み込まれるまでの時間を意味し、値が小さいほど良い評価を受けます。数値は秒単位で計測され、2.5秒以内に読み込まれることが理想とされています。

INP（Interaction to Next Paint）

出典：web dev

INPは、2024年3月にFIDに代わって新設された指標で、ユーザーがページでインタラクション（クリックやタップなど）を行った際、その操作に対するブラウザの応答速度を測定する指標です。値が小さい（応答時間が短い）ほど、ユーザーにとっての体験が良好であることを示します。

ページが読み込まれた後、Googleはユーザーが行うすべてのインタラクションを追跡し、各インタラクションに対する応答時間を測定します。そして、ページ全体で最も遅かったインタラクションの応答時間がINPの数値となります。

INPを計測することで、全体のパフォーマンスが一定レベル以上であるかを判定する仕様です。

CLS（Cumulative Layout Shift)

出典：web dev

CLSは意図せぬレイアウトの“ズレ”がどれぐらい発生したかを表す指標です。 表示されたページ内で意図せず発生したズレに対して、その影響範囲の大きさと最大移動距離から独自のレイアウトスコアを算出しています。

値は小さければ小さいほうが高い評価を受けます。数値はスコアで表され、0.1未満が理想的です。

コアウェブバイタルがSEOにもたらす影響

コアウェブバイタルはランキング要因ではあるものの、検索順位に対する影響力はそれほど大きくありません。したがって、コアウェブバイタルの改善だけに固執するよりも、コンテンツの質やキーワードの最適化など、他の重要なSEO要因にもバランスよく取り組むことが重要です。

ただし、場合によっては優先的にコアウェブバイタルの改善を行う必要があります。以下のような場合は改善を検討してください。

優先的に改善を行った方がいいパターンで最もわかりやすいのが、PCやスマホで操作したときの読み込み速度が遅い場合です。ほとんどの方が、見たいページをなかなか開けず離脱した経験があると思います。ユーザーは遅延を感じると、サイトから離脱する可能性が高くなるといえます。

その他新しいデザインや機能を導入した際も、パフォーマンスが悪化する恐れがあるので注意が必要です。

ユーザー体験の向上という観点でコアウェブバイタルの改善を意識しつつ、総合的なSEO対策を進めていきましょう。

コアウェブバイタル最適化ツールと使い方

まずはサイトの現状を確認しましょう。 コアウェブバイタルを分析するためのツールとして、以下の3つを紹介します。

CrUX Vis

出典：CrUX Vis

CrUX Visでは、ページのコアウェブバイタルの状態の変動をグラフで確認することができます。記事の順位が下がってしまった場合などは、コアウェブバイタルの状態が以前と比べて下がっていないか確認することが可能です。

使い方

①「URL」の欄に確認したいページのURLを入れ、enterを押下します。

②ページ下部にコアウェブバイタルの状態が表示されます。

Search Console

出典：Search Console

獲得キーワードなどを分析するために使われるSearch Consoleでも、コアウェブバイタルを確認できます。

使い方

• 「ウェブに関する主な指標」をクリックすると、モバイル・PCの不良URL・改善が必要なURL・良好URLの遷移をグラフで閲覧できます。

• 「レポートを開く」をクリックすると、そのデバイスの詳しい状況を確認することができます。

PageSpeed Insights

出典：PageSpeed Insights

PageSpeed Insightでは、入力したURLの読み込み時間を0から100のスコアで確認することができます。

使い方

①対象ページのURLを入れ、「分析」をクリックします。

②下記のようにスコアが表示されます。

表示スコアは以下のような意味を持ちます。

スコアに100が表示されることはほとんどないため、以下のように表示される「診断」の内容を改善するようにしましょう。

PageSpeed Insightsの使い方についてより詳しく知りたい方は、以下の記事もご覧ください。

【WEB担当者必見】PageSpeed Insightsを使ってサイトの表示速度を改善しよう！

WEBサイトの表示速度はサイトを運営する上で非常に重要です。サイトの表示速度が速いと、ユーザーの利便性向上やSEOにもよい影響を与えることができます。本記事では、自社サイトの表示速度が遅く、改善策を検討しているWEB担当…

Lighthouse

出典：Lighthouse

LighthouseはWebアプリを監査するためのツールです。もともとGoogleが公式で運営していたツールで、こちらからGoogle Chromeの拡張機能をインストールすることで使用できます。

ページの読み込みや、ユーザーの操作によって生じるレスポンスの速さなど、サイト内のスピードに関する評価がPerformanceとして表示されます。こちらも改善項目についての解説が表示されるため、それをもとに修正を行いましょう。

Lighthouseの使い方をより詳しく知りたい方は、以下の記事もご覧ください。

Lighthouseとは？SEOに便利なチェックツールを紹介します

今回はサイトの評価を確認することができるLighthouse（ライトハウス）についてご紹介します。Lighthouse（ライトハウス）で現状サイトがどのような評価を受けているのかを把握してSEOに役立てていきましょう！ま…

コアウェブバイタルの改善方法

基本的にはツールで示される改善方法に従うのがおすすめですが、今回はコアウェブバイタルの改善に効果的な方法をいくつか紹介します。

LCPの改善方法

不要な画像を削除する、画像を圧縮する

記事に画像を多く載せたり、スマートフォンで撮影した画像やスクリーンショットをそのまま載せたりすると、ページの読み込み速度が遅くなってしまう可能性があります。

WordPress上で画像を圧縮する際は、EWWWW Image Optimizerなどのプラグインを使うのがおすすめです。

不要な画像を削除する、添付している画像の容量を圧縮するなどして、記事の読み込み速度を改善しましょう。

HTML・JavaScript・CSSのファイルを軽くする

HTML、JavaScriptやCSSのコードに含まれる余分な改行やコメントアウトなどを削除することでファイルサイズが軽くなり、表示速度を改善することができます。

全てのコードを手動で書き換えるのには膨大な時間がかかってしまうため、CSS Minifierのような自動圧縮ツールを活用することをおすすめします。

改善方法について詳しく知りたい方は、以下の記事もご覧ください。

事例で見る｜WEBサイトページ表示速度改善方法とその結果

最近では、ページ表示速度が大事だと耳にする機会も増えてきましたが、実際の改善方法とその効果はどれくらいなのでしょうか？今回の記事ではチェックツール、実際のサイトでの表示速度の改善対応、改善後の結果まで詳しく紹介していきま…

サーバーの応答を速くする

サーバーの応答が遅い場合、LCPに大きな悪影響を及ぼし、ユーザーが離脱しやすくなります。

サーバーの応答を速くするには、以下の方法があります。これらの方法を使って、サーバーの応答を早急に改善しましょう。

CLSの改善方法

画像のフォーマットを変更する

画像のフォーマットを変更することでファイルの容量が抑えられ、表示速度を改善することができます。

画像フォーマットはPNG、JPEG、GIFなどがありますが、これらのファイルはサイズが重くなってしまうため、多くの画像を使用しているサイトでは表示スピードが落ちてしまうことがあります。

そこでおすすめなのが、「WebP」という画像フォーマットです。WebPとは2010年にGoogleが発表した画像フォーマットで、特徴は以下の二つです。

今回は、Squooshで画像をWebPに変換する方法を紹介します。

画像をWebPに変換する方法

SquooshはGoogle Chrome Labsが開発している画像圧縮サービスで、このサービス上で画像をWebPに変換することができます。

「ドロップまたはペースト」に画像をアップ、もしくはドロップすることで変換が開始されます。その後は変換後の画質が悪くなっていないかを確認し、圧縮率を調整すれば完成です。

画像のサイズを指定する

画像のサイズをあらかじめ指定しておくことで、その画像のための領域を確保することができ、レイアウトのズレを防げます。記事に画像を追加するときは、必ずwidthとheightの値を指定するようにしましょう。

広告の位置を変更する

広告を配置する場所も、記事の見やすさにおいては非常に重要です。一般的にはページ上部に広告を配置するとレイアウトが崩れやすくなるといわれているので、避けるのがベターです。

また画像と同様、広告もwidthとheightの値を指定し、事前に表示領域を確保することをおすすめします。

INPの改善方法

最後にINPの改善方法を紹介します。

画像を読み込むタイミングを遅くする

ページのデータ量が多いと表示に時間がかかってしまい、INPの値が悪くなる原因となります。

最初に全ての画像を読み込むのではなく、ページをスクロールしたタイミングで画像を読み込む設定に変更することで、INPを改善することが可能です。画像を読み込むタイミングを遅らせる方法として、以下を紹介します。

この2つの方法のやり方について解説します。

<img>タグにloading=”lazy”を追加する

画像を追加する際、以下の例のようにloading=”lazy”の記述を追加すれば対応完了です。

WordPressを使う

WordPressには、画像のHTMLタグに自動的に「loading=”lazy”」が追加される機能があります。そのため、特に追加の対応をする必要はありません。

今WordPressを利用していない方は、導入を検討してみてください。

PHPのバージョンを最新にする

PHPのバージョンを更新することで、サイトの処理能力を上げることができます。今のバージョンが最新になっているか定期的に確認するようにしましょう。

不要なプラグインを削除する

不要なプラグインが残ったままだと、サイトの処理スピードが遅くなることがあります。プラグインを定期的に見直し、不要なものは削除することをおすすめします。

検索順位に影響するWeb Vitalsの4指標と改善方法

Googleは検索ランキングは、コアウェブバイタルに加えて既存の指標との組み合わせで決まるとされています。この既存の4指標についても解説します。

モバイルフレンドリーな状態になっているか

モバイルフレンドリーとは、モバイルデバイスにおけるサイトの表示や操作が最適化されている状態を指します。

先ほど解説したPageSpeed InsightsやSearch Consoleを使えば、サイトがモバイルフレンドリーな状態になっているか確認することができます。

モバイルフレンドリーについてより詳しく知りたい方は、以下の記事もご覧ください。

モバイルフレンドリー（スマホ最適化）とは？SEOへの影響や対応方法を解説

 モバイルフレンドリーとは？モバイルフレンドリーとは、スマートフォンやタブレットなどのモバイルデバイスにおけるWebサイトの表示・操作が最適化されている状態のことです。PC版のページがそのままスマートフォンの画…

安全にページを閲覧できるか

サイト内に危険なコンテンツが存在しないことは、ユーザーにとって非常に重要なポイントです。

サイトが安全な状態か確かめたい場合は、[セキュリティの問題] レポートから確認することができますので、ぜひご活用ください。

HTTPSでページが保護されているか

HTTPSは安全性が高く暗号化された通信を行うことのできる方式で、HTTPS化を行うことでユーザーは安心してサイトにアクセスすることができます。

サイトがHTTPS化されていない場合「HTTPSでサイトを保護する」から設定できますので、ご覧ください。

インタースティシャル広告がないか

インタースティシャル広告とは、サイトで画面が切り替わる際に画面を覆うように表示される広告のことを指します。

Googleからは、広告がユーザーの邪魔になってしまうケースとして以下が挙げられています。

• ユーザーが検索結果からページに移動した直後やページを閲覧している最中に、メインのコンテンツを覆い隠すようにポップアップを表示する。
• スタンドアロン インタースティシャルを表示して、それを閉じないとメインのコンテンツにアクセスできないようにする。
• レイアウトを使用して、スクロールせずに見える範囲をスタンドアロン インタースティシャルのように見せかけ、メインのコンテンツをインライン化してスクロールしないと見えないようにする。

出典：Google 検索セントラル

※スタンドアロンインタースティシャル…検索結果のページを開く際、強制的に開かれる広告

このように広告がユーザーのコンテンツ閲覧の邪魔になっていないか、再度確認しましょう。

まとめ

コアウェブバイタルの指標に合わせてサイトを見直すことで、ユーザー体験を向上させることができます。サイトの内容も合わせてユーザー体験の向上に努めましょう。