コアウェブバイタル（Core Web Vitals）とは？SEOへの影響と改善方法
コアウェブバイタル（Core Web Vitals）とは、優れたユーザー体験を提供するために不可欠である指標の中でGoogleが特に重要とした3つの指標のことで、具体的にはLCP、FID、CLSの3つの指標があります。
Core Web Vitals（コアウェブバイタル）の指標であるサイトの速度改善は、SEO対策をするなら至上命令の改善項目となりました。今回は、コアウェブバイタル（Core Web Vitals）について解説します。
コアウェブバイタル（Core Web Vitals）とは？
コアウェブバイタル（Core Web Vitals）とは、優れたユーザー体験を提供するために不可欠である指標の中でGoogleが特に重要とした3つの指標のことで、具体的にはLCP、FID、CLSの3つの指標があります。
- LCP（Largest Contentful Paint）は最大コンテンツの描画、
- FID（First Input Delay）は初回入力遅延、
- CLS（Cumulative Layout Shift）は累積レイアウト変更と訳されます。ページのレイアウトが突然変わったりすることによる、ユーザーのUX低下を防ぐための視覚的安定を図る指標です。
例えば、PCサイト、モバイルサイトでは、きちんと表示されているのに、A4サイズタブレットでは、レイアウトが崩れてしまっていたりするとマイナス評価です。
優れたユーザー体験を提供するためには、ページのCLSを0.1未満にすることが理想となります。
コアウェブバイタルは新しいシグナルとして用いると発表はありましたが、対応は2021年からということもあり、現段階ですぐに影響があるというものではありません。
しかし、以前からユーザー体験がSEOに影響することは言われ続けていますので改善ができるのであれば早い段階で手を打っておきましょう。
コアウェブバイタルの３つの指標
コアウェブバイタルの指標には次の3つがあり、それぞれを改善することで優れたパフォーマンスを発揮するサイトに変えることが可能です。
- Largest Contentful Paint（LCP）:最大コンテンツ描画
- Fisrt input Delay（FID）: 初回入力遅延
- Cumulative Layout Shift（CLS）: 累積レイアウト変更
LCP（最大コンテンツ描画）とは
LCP（最大コンテンツ描画）とは、ページ内の最大コンテンツ（最も有意義なコンテンツ）が描画されるまでの時間を意味します。LCPが2.5秒未満であれば良好とされています。
最大コンテンツはメインコンテンツと近しい意味ですが、実際には微妙に異なります。最大コンテンツはGoogleが最も有意義だと判断したコンテンツという意味ですので、自身でコンテンツの核だと思っていてもLCPには関係がないことがあります。
FID（初回入力遅延）とは
FID（初回入力遅延）とはページの応答性を意味します。ユーザーがページに入って最初にアクション（クリックなど）をした際の反応の遅延を意味しています。FIDは100ミリ秒未満であれば良好とされています。
CLS（累積レイアウト変更）とは
CLS（累積レイアウト変更）とはページがどの程度安定しているかを示しています。ページの読み込みに時間がかかる場合、表示し終わったと思っても時間差で画像が表示されてコンテンツが下にずれてしまうというケースがあります。CLSは0.1未満であれば良好とされています。
これがレイアウトがずれている（Layout Shift）ということです。レイアウトのズレが起きるということはユーザーがクリックしようとしたときに誤って意図しないボタンをクリックしてしまうというようなことが起こるため非常に重要な指標といえます。
コアウェブバイタルの重要性
Googleはたびたびコアアップデートを行い、検索精度を向上させていますが、2021年6月16日に行われたアップデート（通称、ページエクスペリエンスアップデート）ではコアウェブバイタルを評価基準の1つに導入しています。
つまり、コアウェブバイタルを改善しユーザーエクスペリエンスを向上させることはSEO対策になるということです。
数値の確認方法
コアウェブバイタルの数値を確認する手法は複数ありますが、もっとも簡単に確認できる方法はPageSpeed Insightsを使うことです。
LCP、FID、CLSの3つの指標をそれぞれ数値で評価し、改善ポイントも出してくれるため非常に有用です。
コアウェブバイタルの改善方法
コアウェブバイタルの改善方法は多く、速度を突き詰めていくとキリがありません。重要なことは100点を取ることやライバルよりも早いことではなく、ユーザーにストレスを感じさせないことです。
改善点や手法はサイトによって大きく変わりますいので、ここでは代表的な改善点をご紹介いたします。
LCP（最大コンテンツ描画）の改善
LCPを改善するには速度を上げればよいため、代表的な改善方法としては次の3つが挙げられます。
- レンダリングを速くする
- サーバーの応答速度を速くする
- ファイルを小さくする
具体的には次のような手法があります。
- ファイルサイズの軽量化
- 重要なCSSのインライン記述
- 不要CSSの削除
- 不要javascriptの削除
- CDNの利用
- サーバー変更
- PHPなど環境の見直し
速度を早くするためには画像最適化が効果的で簡単なことが多いですが、それ以外にも高速化できる手法は様々です。時にはサーバー移転やサーバー環境の再設定などをすることで改善することもあります。
ファイルサイズの軽量化
画像最適化は効率的に速度改善ができる手法です。画像にはBMP、GIF、JPEG、PNGなど様々なものが使われています。PNGが比較的使われることが多いのですが、圧縮されずに使われているケースも多く、tinypngなどのツールを使うことで画像の質を損なうことなく圧縮することができます。
WebPなどの次世代画像を使うことで更に圧縮することが可能です。
※AVIFはWebPよりも新しい圧縮形式ですが、サポートしていない場合もありますので利用の際にはご注意ください。
重要なCSSのインライン記述
ウェブサイトの構築の際にはCSSでの記述は必須といえますが、表示速度のことを考えた場合には表示に重要な記述はインラインで記述し、残りはCSSに記述するということは有効な手法です。
不要CSSの削除
CSSはサイトの運用歴と共に長くなることがあり、圧縮されていないことも頻繁に見かけます。可能であれば一度CSSの不要部分を削除し、圧縮してみることをお勧めいたします。
不要javascriptの削除
javascriptはオープンで公開されているものも自作したものも圧縮されていないことがよくあります。一度記述してしまえば後は変更することが少ないことから、元データは残しておき、サイト表示に関わるものは圧縮してみることをお勧めいたします。
CDNの利用
CDNとはコンテンツ・デリバリー・ネットワークのことです。CDNはレイテンシー（アクセスしてから完全に読み込まれるまでの遅延のこと）を最小化するために利用されますので、CDNを導入することで表示速度が大きく改善することが見込まれます。
サーバー変更
数年前に作られたサイトの場合、当時のサーバーをそのまま使っているということもよくあります。サーバーが古いことが一概に悪いわけではありませんが、サーバーが古いということは設定やスペックが最新のものに劣ることがあり、サーバー変更をすることで速度が改善することがあります。
PHPなど環境の見直し
サーバーが古くなくても設定が古いということはあり得ます。古いサイトをそのまま移管した場合、PHPなどのバージョンも古いままということがあります。セキュリティ的にも速度の観点からもサポートされていないバージョンが使われていることは望ましくありません。
PHPのバージョンを変えただけで速度が30%改善したという例もありますので、現在の環境を見直すことも定期的に行いたい施策です。
FID（初回入力遅延）の改善
FIDはアクションに対する応答速度の改善をする必要があるため、該当するjavascriptを特定して修正する必要があります。
javascriptの読み込み遅延を行ったり、ポリフィル（古いブラウザで機能するようにするためのコード）を最小にしたり、長いタスクを分割分割したりすることで反応速度の延滞を短くすることができます。
CLS（累積レイアウト変更）の改善
CLSは多くの場合、画像か広告のサイズを指定していないことが起因して悪化します。きちんとしたWEB制作会社に依頼しても画像のサイズ指定はCSSだけで行っているということも頻繁に見られますのでCLS改善のためには、まずはソースコードを見直すところから開始してください。
画像サイズの設定
画像のサイズはCSSだけでも表示することができますが、CSSだけで表示してしまうと読み込みが終わるまでの間、画像の領域が確保されず、結果的に後から表示された画像の分だけコンテンツがずれるということが起こります。
具体的には
<img src=”***.png” width=”***” height=”***” />
のようにwidthとheightを設定するだけで解決できます。
サイトによっては作業量は多いですが、確実にCLSを改善させるためには必須です。
広告サイズの設定
画像と同様に広告が後から挿入されてコンテンツがずれるということもあります。内容は画像とまったく同じですが、広告の場合にはソースコードを自分で書き換えられないのが普通です。
その場合には
<div style=”min-height:***px;min-width:***px”>
のように<div>タグで囲って書くことで解消されます。
まとめ
コアウェブバイタルは意外に奥が深く、ここで紹介した手法を試してみても数値が改善しないということはあります。それでも改善しない場合には東京SEOメーカーにご相談ください。LCP、FID、CLSの3つに限らずSEOを広い視点で解決いたします。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。
