「Core Web Vitals（コア ウェブ バイタル）」の対策、改善方法

Webサイトの運用管理者やSEO担当者であれば、目下、「Core Web Vitals（コア ウェブ バイタル）」とどう向き合っていくか、画策あるいは奮闘されている方も多いのではないでしょうか。

本記事では、Webサイトでのユーザー体験を左右しGoogle検索の結果においても影響を及ぼす「Core Web Vitals（コア ウェブ バイタル）」について、基礎知識からその重要性、構成される3項目の詳細、対策や改善方法にいたるまで幅広く解説します。

Core Web Vitals（コア ウェブ バイタル）とは

※Core Web Vitals（コア ウェブ バイタル）の表記について、以下、略称のCWVで統一します。

CWVは、検索順位を決める評価指標の一つ「ページ エクスペリエンス シグナル」に含まれます。なお、当てはまる要素は、以下に挙げる5つです。

・CWV（ウェブに関する主な指標）
・モバイル ユーザビリティ
・セキュリティの問題
・HTTPS
・広告に関する問題

そして、件のCWVは以下の3つで構成されます。

・LCP（Largest Contentful Paint）
・FID（First Input Delay）
・CLS（Cumulative Layout Shift）

LCPは、「最大コンテンツの描画」を意味する、読み込みパフォーマンスの尺度です。Webページの読み込みに要する時間が長いほど、LCPの数値は高くなります。
主なリソースの対象は画像や動画が考えられますが、記事のみのコンテンツであれば本文もしくが見出しがその的になるでしょう。なお、2021年6月には、その定義に変更があり、ページから削除された（対象の）リソースが削除されても、それはLCP 候補のままとのことです。つまり、既定のサイズ値があるなかで、すぐに新しい最大コンテンツを見つけようとはしません。より大きな LCP 要素が見つかってはじめて新たな候補として選択されます。
おそらく、カルーセルなどを用いた同じサイズの画像を複数回挿入するサイトが（良い）影響を受けそうです。

FIDは、「初回入力遅延」を意味する、インタラクティブ性の尺度です。
クリックやタップなど、Webページにアクセスしたユーザーのアクションに対して、ブラウザが反応するまでの時間（操作入力が開始可能になるまでの待機時間）を表します。

CLSは、「累積レイアウト変更」を意味する、視覚的安定性の尺度です。
たとえば、Webページを開きテキストを読み始めようとしたところ、上部に画像が読み込まれ、読もうとしたテキストが画面外に押し出されてしまうことってありませんか？
これは当然、ユーザー体験を損ねます。ページへとアクセスしたら、なるべく早くスムーズに「見たい」「読みたいコンテンツ」にアプローチしたいものです。
そうしたなか、CLSでは、表示されるレイアウトが安定されるまでの時間を測ります。
また、LCP同様、CLSも2021年6月に定義変更のアナウンスがありました。
従来のレイアウトシフトが全ての累積スコアであったのに対し、変更後はSession Window（セッション ウィンドウ）の概念が用いられます。一度のセッションのなかでもいくつかのグループに分けられたうえで、もっとも大きなグループの累積スコアが対象です。

なお、CWVを構成するLCP・FID・CLSは、いずれも数字が小さいほど良好とみなされます。

CWVが重要である理由

冒頭でお伝えした通り、CWVはユーザーアクション、そしてSEOに影響を及ぼすものです。ページの読み込み遅延やコンテンツ（レイアウト）移動は、ユーザーに不快感をもたらし、いとも簡単に離脱させます。

反対にCWVが良好であれば、ストレスを感じさせないことはもちろん、サイトの回遊率やコンバージョン率の向上も期待できるはずです。

そして、SEOですが、まず前提としてGoogleはCWVよりもコンテンツ自体の価値を重視します。あくまで総合的な判断でありCWVが優れているだけで検索結果の上位に表示されるわけではありません。むしろ、CWVの優先順位は高くないともいえます。ただし、他の要素で均衡しているとなれば、順位決定に大きく作用するのも確かです（明確にアナウンスされています）。そう、いわゆる同点決勝（タイブレーク）の形をとるわけです。

そのため、価値あるコンテンツを提供するだけでなく、やはりCWVを改善することは、SEOにおいて重要だと考えます。

CWVの状況を認識する方法

自サイトが運用するWebページのCWV改善には、状況認識が必須です。
その方法として、チェックツールの使用が挙げられます。
手順は以下の通りです。

「Google Search Console」で問題のあるページを把握する

まずは、「Google Search Console」です。管理画面左の「エクスペリエンス」から「ウェブに関する主な指標」をクリックしましょう。すると、「モバイル」及び「PC」それぞれで“不良URL”“改善が必要なURL”“良好URL”のステータスがグラフ化されているのが分かります。

「不良」または「改善が必要」に分類されたページは対策が必要です。「レポートを開く」へと進み、ステータスを指定すれば、画面下部の詳細部分にLCP、FID、CLSの問題が表示されます。さらにクリックすると、問題のあるURLが列挙されるため、サイトのどのページが該当するかを把握できます。

「PageSpeed Insights」でさらに詳細を確認する

「Google Search Console」で列挙される問題のURLをクリックすれば、右側に「例の詳細」が表示されるのですが、その上部には分かりやすく「PageSpeed Insights」のリンクが置かれています。
このツールもSEO担当者にとってはお馴染みでしょう。Webページのパフォーマンスを測定し、対策まで提示してくれるすぐれものです。

実際にリンク先へと遷移し、「改善できる項目」もしくは「診断」に表示された項目をクリックすると、具体的な問題点、改善策が出てきます。
詳細を確認できれば、いざ実行です。

LCPを改善する方法

LCPは、Webページにおいて最大コンテンツと判断されたリソースの読み込み時間を表します。メインとなるのは、大抵画像です。つまり、ほとんどのケースで画像の読み込み速度を短縮することが、LCP改善につながります。
以下、具体的な改善方法です。

画像を圧縮する

画像を圧縮し、データサイズを軽くすることで、読み込みが速くなります。
圧縮すると画質が荒くなるため、画質とデータサイズのバランスをとることが大事です。その際、画像編集ソフト「Photoshop」の「Web用に保存」機能の使用をおすすめします。
また、無料の圧縮サービスならGoogleが提供する「Squoosh」も、画質を確認しながら圧縮の程度を調整できるため便利です。

適切な画像フォーマットを選ぶ

画像ごとに最適なフォーマットを選択することも有効です。多くのブラウザに対応している一般的なフォーマットは、「GIF」「JPEG」「PNG」の3種類ですが、それぞれの特徴をおさえたうえで適用できれば、読み込み速度にも寄与するでしょう。
GIFは、256色に限られる分、データサイズを抑えやすく、複数の画像を用いたアニメーション作成や、背景を透明にすることができます。
JPEGは注意が必要です。色数の少ない画像をJPEGで保存すると、かえって容量が大きくなってしまいます。
PNGは、GIF同様、透明部分の表現が可能です。さらに比較すると、より多くの色を使えます。そのため、背景の透過および多くの色を要する画像、たとえばロゴなどに最適です。

FIDを改善する方法

FIDには、JavaScriptが大きく影響しています。
裏を返せば、JavaScriptを必要最小限に減らすことで、FIDは改善可能です。

不要なJavaScriptを削除する

JavaScriptが過多に使われているWebサイトは実は、そう少なくありません。ここで使いたいのが先述した「PageSpeed Insights」です。「使用していないJavaScriptの削除」をクリックすると、不要なJavaScriptが一覧で表示されます。
たとえば、WordPressに組み込んだプラグインやGoogle Tag Manager（タグマネージャー）で作成したタグのなかには、使わなくなったものも多いはずです。問題無ければ、削除しましょう。

JavaScriptを最小化する

削除できないJavaScriptは、サイズを最小化することで読み込み速度の向上につながります。
JavaScriptの最小化とは、余計な空白や説明テキストを削除し、データサイズを最小限に留めることです。「JSMin」や「packer」といった無料の最小化ツールも多く、手っ取り早く無駄な動作を減らせます。快適なブラウジングこそ、まさしく良好なFIDです。

CLSを改善する方法

CLSの改善もまた、画像調整がキーになるといえます。ちょっとした設定、工夫だけでも効果的です。
以下、確実におさえておきましょう。

width（横幅）とheight（高さ）を設定する

CLSを改善する基本的な方法は、画像にwidth（横幅）とheight（高さ）を設定することです。画像の大きさをHTMLで示すことにより、（画像の）表示領域があらかじめ確保されるため、読み込みによるレイアウトの変更を防げます。
設定の際の記述例は以下の通りです。

<img src=”URL” alt=”代替テキスト” width=”横幅の数値” height=”高さの数値”>

上記を全ての画像に対して行います。
なお、動画を埋め込む場合は、<iframe>タグにwidthとheightを入力してください。

広告の種類、配置を変更する

広告バナーの自動表示を設定している場合、まずはバナーに先述のwidthとheightが設定されているか確認しましょう。
仮に未設定、なおかつ広告の種類を変更できなければ、表示位置の変更が対応手段です。たとえば、Webページの最上部は視認性も高く、広告効果の高い一等地ですが、最上部の広告に遅延が起きると、以下のコンテンツ全てが移動するため、CLSは大きく悪化してしまいます。そのため、対象の広告をページの中盤以降に設置する調整が必要です。
広告認知の点においては多少の犠牲を払うことになりますが、（対象の広告より）上部のコンテンツの移動は回避できます。

CWVを改善し、ユーザー体験とSEO評価の向上につなげよう！

LCP・FID・CLSの3要素で構成されるCWVは、その仕組みや定義の更新、改善のためのベストプラクティスなど、今後も何かと話題に上ると考えられます。
まずは地道に向き合うことです。
拙稿で取り上げた「Google Search Console」及び「PageSpeed Insights」を使って改善点を把握し、然るべき対処法で一つずつ問題を解決していけば、自ずとGoogleから安定した評価を受けられるようになるでしょう。とりわけ、画像の圧縮と、widthとheightの指定は徹底しなければならない大事なポイントです。
ぜひ、意識して取り組んでみてください。
小さな工夫を積み重ねることで、ユーザー、検索エンジン、両方から愛されるWebページが生まれるはずです。