【SEO担当者必見】Core Web Vitals(コアウェブバイタル)って何？対策方法を徹底解説！

Googleはユーザー体験(UX)の向上を図るため、Core Web Vitals(コアウェブバイタル)という新たな指標の導入を発表しました。

（Googleは2021年の5月にCore Web Vitalsを導入する予定でしたが、Google検索セントラルブログにて、導入を少し遅らせて、6月中旬より徐々に導入すると発表しました。）

今回はCore Web Vitalsを構成する3つの指標と対策方法をお伝えします。

弊社ブログでも詳しくご紹介していますのであわせてご覧ください。

Core Web Vitals 3つの指標

Core Web Vitalsは下記の3つの指標から成り立っています。

画像引用：Web.dev

ページの表示速度を測るLCP (Largest Contentful Paint)

LCPはメインとなる最も大きいコンテンツ(画像など)が読み込まれるまでの速度(ローディングパフォーマンス)を表す指標です。
ページが最初にロードを開始してから、2.5秒以内にページで最も大きな要素が読み込まれることが理想とされます。

ユーザーとの対話性を測定するFID (First Input Delay)

FIDはユーザーがページ内でアクションを起こせるまでの待機時間を測定する指標です。
リンクのクリックやボタンのタップなどが考えられ、1/100秒未満であることが理想とされます。

コンテンツの移動を示すCLS (Cumulative Layout Shift)

CLSは、ページのレイアウトが突然変わることによる、UX低下を防ぐための視覚的安定を図る指標です。
例えば、レイアウトのずれにより、ユーザーが意図していなかった場所に突然バナー広告が現れ、購入まで進んでしまうといったケースを減らすためです。

CLSのスコアはページを読み込む際に、どれだけレイアウトが移動したか（読み込み中のページのズレ）の最大移動距離をもとにスコアが算出されます。
優れたユーザー体験を提供するためには、ページのCLSを0.1未満にすることが理想です。

Core Web Vitalsを検証する方法

Core Web Vitalsの検証が可能なツールはいくつか存在しますが、今回はGoogleサーチコンソールでの確認方法をご紹介いたします。
（閲覧には、サイトのオーナーであるか、権限を委託されている必要があります。）

まずはGoogleサーチコンソールにログインし、左のサイドメニューの「ウェブに関する主な指標」から、Core Web Vitalsの評価を確認できます。Googleサーチコンソールでは3つの指標を「良好」「改善が必要」「不良」の3段階で評価します。右上の「レポートを開く」からは、さらに詳細な情報を取得できます。

レポートからは下記についての確認できます。
「LCP/FID/CLSのうち、どこに問題があるか」
「いくつのページが基準を満たしていないか」
「基準を満たさないURL数の遷移」

さらに「詳細」の項目をクリックすると、代表URLがひとつ提示され、それに基づいく類似URLが最大20個取得できます。

右のサイドメニューからは「PageSpeed Insights（ページスピード インサイト）」で個別のページ測定が可能です。

「改善できる項目」では、具体的な改善方法を提示してくれるので、ページのパフォーマンス改善に役立てることができます。

Core Web Vitalsの改善策

実際にCore Web Vitalsを改善するにはどのような施策を行えばよいのでしょうか。
具体的に説明していきます。

LCPの改善

LCP悪化の要因は、最大コンテンツのリソースの読み込みです。

そのため、下記のような最適化の施策を行う必要があります。

①画像の最適化
②重要なリソースをプリロード
③テキストファイルの圧縮
④Adaptive servingの活用
（ユーザーのデバイスや回線等の環境に応じて配信するファイルを変更する）
⑤Service Workerを使ったキャッシュの利用

特に、画像はLCPへの影響が大きいため、具体的に下記のような施策を行う必要があります。
・必要でない場合、ファーストビュー内に画像を使用しない
・画像圧縮
・WebPなどの次世代フォーマットの活用
・レスポンシブ画像の使用
・画像CDNを利用した配信

FIDの改善

FIDを改善するためには、主に下記のような対策が求められます。

①サーバーの応答時間改善

はじめに、サーバー応答が遅ければ読み込み速度のパフォーマンスを保つことはできません。
サーバー応答の速度を測る指標には、TTFB(Time To First Byte)があります。
Chrome Dev Toolなどを用いて、TTFBがGoogleの推奨時間200ミリ秒以下になっているか確認します。

サーバー応答時間が200ミリ秒以上だった場合、下記の施策を行う必要があります。
・サーバーの最適化
・ユーザーから地理的に近いCDNを活用する
・キャッシュの活用

②JavaScriptやCSSによるブロックの軽減

ブラウザがHTMLを解析中に反映すべきCSSやJavaScriptを見つけると、解析・レンダリングが止まり、ページの読み込み速度が遅くなってしまいます。

LCPの悪化の原因にもなるため、下記のような対策を行う必要があります。
・各ファイル内のスペースやコメントの削除による最小化
・使用されていないCSSとJavaScriptファイルの削除
・初期の読み込みに必要でないものを非同期で読み込む
・JavaScriptのチューニング

③クライアントサイドレンダリングの改善

特に、Reactなどを用いてSPA (Single Page App)を作成している場合は、クライアントサイドでのレンダリングが負荷をかけていないかどうかに注意する必要があります。

負荷がかかっている場合の改善方法には以下のようなものがあります。
・JavaScriptの最小化
・JavaScriptの非同期化
・サーバーサイドレンダリングの使用

④サードパーティーのコードによる影響の削減

広告や分析用などのサードパーティタグがインタラクションの待ち時間に影響を与える可能性があります。
そのため、ファーストビューの外にある広告は、その近くまでスクロールしたときにはじめて読み込まれるようにするなど、必要な時に読み込めるようにできないかを検討する必要があります。

CLSの改善

CLSを改善するためには、HTMLやCSSの工夫しレイアウトシフトを起こさないようにする必要があります。

レイアウトのずれの要因として、サイズ指定のない画像、動的に挿入されたコンテンツ、Webフォントの読み込みなどが挙げられます。
また、カルーセルやスライドショーなどとも呼ばれる「カルーセル」の画像の枚数も、LCPのスコアの直結します。

そのため、下記のようにHTMLやCSSの記述を工夫することでコンテンツのレイアウトのずれを防ぎます。

①画像のサイズを常に指定する
画像に常にwidthとheight要素を付与するか、cssアスペクト比率を使用して、画像が表示される前から必要な領域を予約するようにします。

②広告のスペースを確保しておく
広告は必ずしもサイズが決まっていませんが、スペースを確保しておくという考え方は画像の時と同じです。
過去の経験に基づいて最も適切なサイズで領域を予約しておくことが推奨されています。
（常に最大サイズで予約すると空白が生じてしまうため注意）
また、viewportの上部に広告を配置することは避けるようにします。

③動的なコンテンツの追加をしない
ユーザーのアクションなしに新たなコンテンツの追加は行わないようにします。

④フォントのフォールバックによるずれの改善
Webフォントの読み込み時に、フォールバックのフォントが置き換えられることによってずれが生じる場合があります。
そのため、ダウンロード可能なフォントが完全に読み込まれる前にどのように処理すべきかや、読み込みが失敗してしまったときにどのような挙動にするかを指定するCSSプロパティ「font-display」を使用するか、<link rel=preload>を使用してレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースとして指定をします。

Core Web Vitalsに影響するAMPの導入

「AMP(Accelerated Mobile Pages)」とはGoogleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。

AMPについて詳しくはこちら

Googleによると、AMPを導入したドメインの60％がCore Web Vitals(コアウェブバイタル)の基準を満たしているとのことです。

Core Web Vitals(コアウェブバイタル)の改善のため、AMPの導入も検討してみてください。

まとめ

ユーザー体験(UX)向上は、ユーザーの離脱率の低下やランキングにも関わります。そのため、早急にCore Web Vitalsへの対策を進める必要があります。

Core Web Vitalsについてや、SEOに関するその他の情報について、弊社ブログでも詳しく解説していますので、併せてご覧ください。