コアウェブバイタルとは？

コアウェブバイタル（Core Web Vitals）とは、サイトのパフォーマンスや安定性を測定するための指標のことです。
閲覧者が見やすく使いやすいサイトかどうかを評価するものと考えればわかりやすいと思います。

コアウェブバイタルは、Googleがウェブのユーザーエクスペリエンスを向上させるために始めた取り組みで、2021年5月から検索順位のランキング要因になると発表されており、SEO的にも対応していく必要がある項目です。

コアウェブバイタルは、「LCP」「FID」「CLS」の3つの指標で評価されます。
それぞれの指標を簡単に解説すると、以下のような内容になります。

コアウェブバイタルの測定方法

コアウェブバイタルを測定するには、Googleが提供しているPageSpeed Insightsツールを使用します。
入力欄に調べたいページのURLを入力すると、サイトの速度に関する様々な項目の評価が表示され、フィールドデータとラボデータの欄からコアウェブバイタルの測定結果を確認できます。

項目の左にあるマークの色分けは、緑色が良好の判定、オレンジ色は改善が必要という判定、赤色が低速の判定となります。

もっと簡易的に測定したい場合は、Google Chromeの拡張機能「Web Vitals」を使用する方法があります。
細かいデータを見ることはできませんが、ブラウザ右上にある拡張機能ボタンをクリックするだけで、手軽にコアウェブバイタルの測定ができます。

コアウェブバイタルの評価基準

「LCP」「FID」「CLS」の評価基準は、それぞれ以下のようになっています。

	良好	改善が必要	低速
LCP	2.5秒以下	4秒以下	4秒を超える
FID	100ミリ秒以下	300ミリ秒以下	300ミリ秒を超える
CLS	0.1以下	0.25以下	0.25を超える

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

コアウェブバイタルの評価を改善する方法は、基本的にサイトを高速化する方法と同じです。
主な取り組みとしては、以下のような方法があります。

gzip圧縮についての詳細：gzip圧縮の設定方法【.htaccessの書き方】

ブラウザキャッシュについての詳細：ブラウザキャッシュの設定方法【.htaccessの書き方】

CLSの改善方法について

CLSに関しては、サイトのパフォーマンスではなく、サイトの構造やデザインそのものが評価を下げる原因になります。
CLSを低下させる原因は、主に以下のようなものがあります。

画像のレイアウトシフト対応

一番多く見かけるCLS低下の原因は、画像（特にアイキャッチ画像）を読み込む時に、周辺のレイアウトがずれてしまうことです。
解決策としては、画像のimg要素にwidthとheightを指定して、画像の表示領域を事前に確保しておくことです。

<img src="images/eye-catching.png" width="1200" height="630" alt="アイキャッチ">

指定するwidthとheightのサイズは、元画像のサイズを指定すれば問題ありません。
最近のブラウザでは、widthとheightから画像のアスペクト比を計算し、最適な表示領域を確保してくれます。

ただし、CSSで「max-width:100%;」と「height:auto;」を指定していないと、画面サイズが変わったときにアスペクト比を維持したまま拡大縮小（レスポンシブ対応）できず、表示領域が正しく確保できなくなるので注意が必要です。

img {
  max-width: 100%;
  height: auto;
}

埋め込み動画やマップのレイアウトシフト対応

埋め込みの動画やマップの場合、アスペクト比を維持したままサイズ変更するのが難しく、CLS低下の大きな原因となっています。
改善方法としては、新しくできたプロパティの「aspect-ratio」を使用することで、画面サイズが変わってもアスペクト比を保ちつつ、表示領域の確保にも対応することができます。

HTMLでは、以下のようにiframeをdivで囲みます。

<div class="embed-box">
<iframe width="560" height="315" src="YouTubeなどの埋め込みURL"></iframe>
</div>

CSSでは、divに「aspect-ratio」を記述し、埋め込みコンテンツのアスペクト比を指定します。
YouTubeの埋め込み動画の場合は、16：9のアスペクト比になりますが、指定する時は「16 / 9」と記述します。

また、「display: inline-block;」を加えることで、埋め込みコンテンツがサイトの画面幅より小さくてもブロック要素のdivが画面幅一杯にならなくなり、埋め込みコンテンツの幅とぴったり合うようになります。

.embed-box {
  max-width: 100%;
  aspect-ratio: 16 / 9; /* 埋め込みコンテンツのアスペクト比を指定 */
  display: inline-block; /* 画面幅より小さいサイズの埋め込みコンテンツにも対応 */
}
.embed-box iframe {
  max-width: 100%;
  max-height: 100%;
}

コアウェブバイタルに直接関わる要素を調べる方法

PageSpeed Insightsのテスト結果から「診断」の欄を見ていくと、実際にどの要素がコアウェブバイタルに影響しているかがわかります。

上画像の場合であれば、「最大コンテンツの描画」要素の項目をクリックすると、LCPに影響がある1件の要素が表示されます。

コアウェブバイタルのSEOへの影響

検索順位のランキング要因に組み込まれるコアウェブバイタルですが、検索順位を大きく上下するほどの影響はありません。
ランキング要因で一番重要なのはコンテンツの質であって、コアウェブバイタルの評価が優れていても検索順位が大きく上昇するわけではなく、複数のサイトでコンテンツの質が同じならコアウェブバイタルの優れた方が評価されるというものです。

具体的にいうと、コアウェブバイタルは「ページエクスペリエンス」と呼ばれるシグナルのひとつとして組み込まれることになります。
ページエクスペリエンスとは、コンテンツの価値以外の部分に関するランキング要因で、主に以下の5つのシグナルがあります。

ただし、ランキング要因への影響が大きくないからといって、コアウェブバイタルを無視していいというわけではありません。
なぜならコアウェブバイタルは閲覧者の行動に直接影響するからです。
例えば、Search Consoleヘルプのウェブに関する主な指標レポートには、以下のようなデータが記載されています。

• ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加する。
• ページの読み込み時間が1秒から6秒に増加すると、直帰率は106%増加する。

サイトの速度や操作性は、閲覧者がサイトに留まってくれるのか離れてしまうのかという行動に大きく関係します。
また、閲覧者が離れていくようなサイトであれば、当然検索順位も下がる可能性があります。
閲覧者と検索エンジンの両方の目線から見て、コアウェブバイタルなどのページエクスペリエンスには必ず対応していくべきだということです。

コアウェブバイタルをふまえたレンタルサーバー選び

レンタルサーバーはサイトの速度に直接影響するため、コアウェブバイタルの評価にももちろん関係してきます。
コアウェブバイタルを低下させる問題はいくつかありますが、レンタルサーバーそのものの性能も見過ごせない問題です。

特に、画像や動画を多く使用しているサイト、JavaScriptなどによる複雑なデザインのサイト、WordPressで運営しているサイトでは、ページのパフォーマンス（LCP・FID）がどうしても低下しますし、レイアウトシフト（CLS）への影響も多く出てきます。
サイト速度のテストで「最初のサーバー応答時間を速くしてください」と忠告された場合は、レンタルサーバーの引っ越しかプランのグレードアップを検討してください。

レンタルサーバーは、性能以外にもデータ転送量や同時アクセス数といったアクセスに影響する箇所があるため、多くの人に見てもらうためのサイトであれば年間1万円くらいの高性能レンタルサーバーをおすすめします。

• 
• 
• 
• 
•