コアウェブバイタルとは?重要な3つの指標からその改善方法まで詳しく解説

2020年にGoogleが発表した「コアウェブバイタル」。
サイトにおけるユーザーの体験の良し悪しを測る指標です。

実はこのコアウェブバイタル、検索順位を決定するための評価基準にもなっているのです。

そこで今回は、コアウェブバイタルとは何か?から数値の改善方法まで詳しく解説していきます。

コンテンツ一覧

コアウェブバイタル(Core Web Vitals)とは

コアウェブバイタルとは冒頭でも述べた通り、UX(ユーザーがサイトを通じて得る体験)の質を計測するための指標のこと。
LCP、FID、CLSという3つの指標で構成されており、主にサイトの使い勝手を重要視しています。

もともとGoogleにはWebで優れたUX(ユーザー体験)を実現するための「ウェブバイタル」という取り組みがあり、コアウェブバイタルは文字通りその核と言える存在なのです。

また、2021年6月からは検索順位を決めるための要素にもなっています。
現在はモバイル端末で検索を行った場合のみが対象ですが、いずれはPC版にも適用される予定。

そこを含め、今後も内容がアップデートされる可能性がありますので注意が必要です。

SEOへの影響

先ほどコアウェブバイタルが検索順位の決定に関わると言いましたが、一体どのくらい影響があるのでしょうか。
Google公式では以下のように説明されています。

ページ エクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページ エクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。
優れたページ エクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。 しかし、同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります。
引用:より快適なウェブの実現に向けたページ エクスペリエンスの評価

つまり、コアウェブバイタルが低いと評価が落ちるというわけではなく、同じような内容・質のページが複数あった場合、コアウェブバイタルが優れたものが上位に表示されるという仕組みです。

逆に言えば、いくらコアウェブバイタルを改善させても、結局は質の高いページのほうが優先されるということ。
まずは良質なコンテンツ作りを心がけましょう。

コアウェブバイタルの3つの指標

コアウェブバイタルはLCP、FID、CLSの3つの指標で構成されます。
一つずつ見ていきましょう。

LCP

LCPはLargest Contentful Paintの略。
「最大コンテンツの描画」という意味で、ページの読み込み速度を表します。

この指標はページ内における最も大きなコンテンツ(画像や動画など)が表示されるまでの時間を評価するもの。
読み込み開始から最大コンテンツが表示されるまでが2.5秒未満であることが理想的とされています。

FID

FIDはサイトの反応速度を評価する指標です。
First Input Delayの略で、「初回入力遅延」を意味します。

初回入力とは、ユーザーがページを訪れてから最初に行う操作(ボタンクリックやタップなど)のこと。
FIDは、その操作を行ってから応答が発生するまでの遅延時間を測定します。
理想的な遅延時間は100ミリ秒未満です。

CLS

CLSはCumulative Layout Shiftの略で、直訳すると「累積レイアウト移動」という意味。
ページの読み込み中に起こるレイアウトのずれを測定します。

何かのサイトを見ているとき、急にレイアウトが動いて意図しない広告をタップしてしまったという経験はないでしょうか。
Googleは、ユーザーにこうした不便をかけないよう、レイアウトの安定したサイトづくりを推奨しているのです。
スコアは0(移動なし)~1(画面における最大の移動量)で表され、0.1未満が理想的とされています。

コアウェブバイタル評価の確認方法

コアウェブバイタルの評価を確認するためのツールを紹介します。
代表的なものは以下の4つです。

Googleサーチコンソール

Googleサーチコンソールは、GoogleにおけるWebサイトの管理ツールです。

サーチコンソールでは、コアウェブバイタルの3指標をそれぞれ「良好」「改善が必要」「不良」の3段階で判定し、自動で問題のあるページを検出・リストアップしてくれます。
「ページエクスペリエンス」という項目から確認してみましょう。

Googleサーチコンソール

PageSpeed Insights

PageSpeed Insightsは、Webサイトの表示速度が計測できるツールです。
計測を行いたいURLを入力するだけで、ページ全体のスコアと、LCP・FID・CLそれぞれのスコアが表示されます。

また、サイト1ページごとの計測結果や修正箇所、改善提案も行ってくれるためかなり親切と言えるでしょう。

PageSpeed Insights

Lighthouse

Lighthouseは、開発者向けのWebサイト・アプリの評価ツールです。
Chromeに標準搭載されています。

FIDは計測されませんが、FIDに関連した指標である「TBT(Total Blocking Time)」が計測可能です。
TBTはユーザーの入力から応答までの合計待ち時間。
TBTを改善することはFIDを改善することにも繋がります。

Lighthouse

Web Vitals 

Web Vitalsは、Google Chromeの拡張機能。
計測したいページを開いて計測を行うと、コアウェブバイタルの3指標の測定結果ががリアルタイムでに表示される便利なツールです。

Web Vitals

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

最後にコアウェブバイタル各指標の改善方法を解説します。
数値が思わしくなかった場合は参考にしてみてください。

LCPの改善

スコア低下の原因

  • 画像など読み込みが遅い
  • CSSやJavaScriptのレンダリング(変換)による負荷
  • ブラウザのレンダリングが遅い
  • サーバーの応答時間が長い

主にデータの重さによる読み込みの遅延が原因。
ちなみにレンダリングとは、サイトを構成するコードを変換して画像や動きなどを表示することです。

改善策

  • ファイルの削除、圧縮
  • 重要でないファイルの読み込み優先順位を下げる
  • クライアント側に依存しないよう、可能な限りサーバー側で処理を行うようにする

必要のないデータはなるべくサイトに載せないようにしましょう。
また、ファイルに優先順位をつけ、重要なものから読み込ませるといった工夫も必要です。

FIDの改善

スコア低下の原因

  • 大量のJavaScriptの読み込み・実行による遅延

大量のJavaScriptが実行されているとき、ブラウザはユーザーからの操作に応答することがで来ません。
これによってFIDが悪化してしまいます。

改善策

  • 不要なスクリプトは削除する
  • 必要なスクリプトは圧縮する
  • Webワーカーを使用し、実行時間を短縮する

Webワーカーとは、バックグラウンドでJavaScriptの実行を行うためのツールです。
並列的に処理できるようになるため実行時間を短縮することができます。

CLSの改善

スコア低下の原因

  • 画像の読み込みによるズレ
  • Webフォントなど外部データの読み込みが発生する
  • スライダーの使用
  • 広告の表示

一番多い原因が、画像の読み込みによるものです。
コンテンツとコンテンツの間に画像が表示されることによってレイアウトがズレてしまいます。
また、Webフォントデータの読み込みが遅れると、途中でフォント変更が起こりズレが生じるという場合もあります。

改善策

  • 予め画像のサイズを指定しておく
  • フォントの読み込みを優先的に行うようにする
  • スライダーや広告枠の表示領域を予め確保する

画像のサイズ指定、表示領域の確保など、予め表示形式を固定しておくのが効果的です。
外部データは優先的に読み込みを行うようにすると、遅れて表示が変わるということが起こりにくくなります。

まとめ

今回はコアウェブバイタルについて解説しました。

大事なのは、ユーザーエクスペリエンスを考えること。
そのためにはLCP・FID・CLSの3指標を軸に、改善を行っていくことが必要です。

ただ、いくらコアウェブバイタル的に優れていても、内容で他のサイトに負けていては上位表示を狙うことはできません。
やはりユーザーの事を考え、内容・使い勝手ともに質の高いサイトづくりを心がけることが大切なのです。