Core Web Vitals（CWV）とは？

Core Web Vitals（CWV）とは？

コアウェブバイタル（CWV）は、3つのウェブパフォーマンス指標のセットです。Googleの検索エンジンは、ユーザーが検索を行った後に表示するウェブサイトの決定に、この3つの指標の測定結果を使用しています。ページのロード時間は、長い間検索エンジン最適化（SEO）の重要な要素でしたが、2021年半ば以降、Googleはランキングアルゴリズムの一部として特にCWVに焦点を当てています。

CWVには次のものがあります：

1. 最大コンテンツの描画（LCP）：読み込み速度の測定尺度
2. First Input Delay（FID）：ページのインタラクティビティの測定尺度
3. Cumulative Layout Shift（CLS）：視覚的な安定性の測定尺度

コアウェブバイタルはSEOにどう影響するか？

すべての検索エンジンは、ウェブクローラーまたはウェブスパイダーと呼ばれるボットを使用してウェブサイトを分析します。これらのボットは、各Webサイトのコンテンツの内容を判断し、検索クエリに応答してそのウェブサイトを表示するタイミングを決定するのに役立ちます。ウェブパフォーマンスは、GoogleのボットがチェックするWebサイトの要素の 1 つです。

Googleはランキングのアルゴリズムのほとんどを秘密にしているため、LCP、FID、CLSがSEOにどの程度影響するかは正確には分かっていません。しかしながら、CWVはSEOに大きく影響を与えます。Googleは2021年6月にCWVをアルゴリズムに組み込んだことを発表しました。そして、多くの業界関係者が、WebサイトのCWVの変化に基づいて検索順位の改善や損失を実証するケーススタディを実施しました。

このことは現実にどのように展開されるのでしょうか。Googleが、「ARPANETとは」という検索クエリに対して、WebサイトAとWebサイトBのどちらを検索結果の上位に置くかを選ばなければならないとします。WebサイトAとWebサイトBは、どちらもインターネットの歴史に関する事実を提供することで高い評価を得ており、ARPANETというテーマについても同様に詳細な情報を提供しています。他の条件が同じ場合、WebサイトAがWebサイトBよりも読み込みや反応が速く、読み込み中に起こるレイアウトのずれが少なければ、たとえWebサイトが同程度の情報を提供していたとしても、GoogleのアルゴリズムはWebサイトAを検索結果の上位に表示するという判断を下すでしょう。

（検索エンジンのランキングはこの例で描かれているよりも複雑で、多くの要素がWebサイトの検索結果に影響します）。

なぜGoogleはウェブパフォーマンスを考慮するのか？

Googleのような検索エンジンは、検索者に最も関連性の高い情報をできる限り素早く提供したいと考えています。読み込み時間の遅延は、ユーザーをイライラさせる傾向があります。 — それとは逆に、読み込みの速いページは、ユーザーが再度訪問してくれる確率を高めます。現在、英語圏の検索市場の大半をGoogleが占めていますが、ユーザー体験が悪ければ、検索者は他のソースに目を向けるかもしれません。

同様の理由で、DuckDuckGoやBingなどの他の検索エンジンもウェブパフォーマンスを考慮に入れる可能性があります。ただし、Googleと同様に、これらのページランキングのアルゴリズムも、どのように機能しているかは定かではありません。

最大コンテンツの描画（LCP）とは？

LCPとは、Webページの最大の部分（通常は画像やテキストブロック）の読み込みにかかる時間の測定値です。

LCPは、Webページ全体を読み込むのにかかる時間を測定するものではありませんが、Webページの読み込み速度を示す良い指標となります。また、通常、Webページの最大の要素はメインコンテンツであるため、その読み込み時間は、多くの場合ユーザーがページが読み込まれたと認識する時間と一致します。

専門家によると、LCPは長くても2.5秒にすべきとされています。しかし、速いに越したことはありません。

最初の操作遅延（FID）とは？

FIDとは、ユーザーが最初にウェブページを操作しようとしてから、それに反応するまでの時間の測定値です。言い換えれば、FIDは、人が最初に画面をクリックして何かを起こすことができる時間を数値化したものです。WebページのFIDは100ミリ秒以下であることが望ましいとされています。

アランが「靴の磨き方」というタイトルのWebページを訪問したとします。彼は、ページの上部にあるカルーセルで靴磨き用品の写真を見ながら右矢印をクリックして次の写真に移動します。ここでのFIDは、矢印をクリックしてから、次の写真の読み込みが始まるまでの経過時間です。

FIDはリクエストされたイベントの所要時間、つまりアランのブラウザが次の写真の読み込みを終えるまでの時間は計測していません。あくまでも、リクエストしてからリクエストの実行が開始されるまでの時間を計測するものです。

累積的レイアウト移動（CLS）とは？

CLS は、Webページのロード中に、どの程度「ズレが発生するか」を測定します。具体的には、ページレイアウトのシフトのうち、最大の「バースト」を測定します。

レイアウトシフトとは、ページのコンテンツが、元々表示されていた場所から上、下、またはその他の方向に移動することを指します。この指標では、バーストとは、互いに1秒以内に発生する一連のレイアウトシフトを指します。バーストは最大5秒までで、任意の数のレイアウトシフトを含むことができます。

アランが「靴の磨き方」のページを読み込んだ後、カルーセルの次の画像を見るために右矢印をクリックしようとした場合を想像してください。ところが、画像のカルーセルは突然ページの下に移動してしまい、アランはもともとカルーセルがあった場所の上に読み込まれたテキストをクリックしてしまいます。すべてが同時に読み込まれなかったためにページが移動してしまい、アランは混乱したままです。

このようなWebページは、CLSのスコアが低い可能性があります。明らかに大きな移動があり、写真のカルーセルが数十から数百ピクセル下方に移動しています。

CLSの測定方法

Googleは以下の式でCLSスコアを算出しています。

影響の割合 * 距離の割合 = レイアウトシフトスコア

• 影響の割合は、レイアウトシフトが発生したときに変化する画面の割合です。
• 距離の割合では、画面上で要素が移動する距離を、画面に対するパーセンテージで測定します。

Webページが400ピクセルの高さの画面を読み込み、新しい要素が読み込まれたときにそのうちの200ピクセルがシフトした場合、影響の割合は200/400、つまり50%となります。新しい要素が別の要素を50ピクセル下に移動させた場合、距離の割合は50/400、つまり12.5%となります。

レイアウトシフトスコアの算出は、この2つの割合を小数で表記し、それを掛け合わせることで行います。

0.50 * 0.125 = 0.0625

これがWebページの最大移動量である場合、ウェブページのCLSスコアは0.0625となります。

Webページの読み込に中に一切のシフトが発生しないことが望ましいですが、それでもこのスコアは十分なものです。専門家は、WebページのCLSスコアが0.10以下であることを推奨しています。

この3つの指標に対して、開発者はどのようにWebサイトを最適化すればよいのでしょうか。

LCPの改善方法

• コンテンツ配信ネットワーク（CDN）を利用する：CDNは世界中の場所にコンテンツをキャッシュしているため、より早くコンテンツがユーザーに届くようになります。
• 画像の最適化：多くの場合、画像はページの中で最も大きな要素になりま��。画像のファイルサイズを小さくすることで、画像の読み込み時間を短縮することができます。

FIPの改善方法

• JavaScript関数のサイズを小さくする：ブラウザはすべてのコードが読み込まれるまで待機してから実行するため、コードの多い動的なウェブページでは入力の遅れを引き起こすことがあります。JavaScriptを縮小することで、このプロセスを高速化することができます。
• 静的なウェブページを構築する：静的なHTMLウェブページは、特にCDN経由で配信した場合、動的なページよりもはるかに速く読み込まれます。静的サイトジェネレーターまたは静的コンテンツを重視する開発哲学であるJamstackについてはこちらをご覧ください。

CLSの改善方法

• ページのサードパーティ要素を少なくする：ページ上のサードパーティ要素は、ページの他の部分とは別の場所から読み込まれます。このため、これらの要素が読み込まれるタイミングがわずかに異なることがあり、読み込まれるとページのレイアウトが変化します。これらのサードパーティ要素の使用を最小限に抑えることで、結果的にレイアウトにシフトが発生する回数を減らすことができます。
• 埋め込みコンテンツ用のスペースを確保する：広告などの多くのサードパーティ要素は、Webサイトの機能やビジネスモデルにとって不可欠であり、排除することはできません。開発者は、ブラウザが実際の要素を取得する前に、これらの要素を読み込むためのスペースをWebページ上に確保することができます。
• 画像が最適なサイズで読み込まれるようにする：これは、一般的な画像の最適化とは少し異なる処理になります。デスクトップパソコン、タブレット端末、スマートフォンは、それぞれ画面の大きさが異なるため、若干異なるサイズの画像を必要とします。最初にデスクトップ用に最適化された大きな画像が読み込まれた後で、使用するデバイスがスマートフォンであるためにモバイル用に最適化された画像を取得する必要がある場合、異なるサイズの画像が読み込まれると、ページ上のコンテンツにズレが発生する可能性があります。
• 画像と動画にheightとwidthを含める���heightおよびwidthプロパティは、画像や動画が読み込まれる前に画像の大きさをブラウザーに通知してその領域を確保します。HTML5の動画の記事に、動画でこれを行う方法に関する詳細情報が掲載されています。
• CSSのaspect-ratioボックスを使う：ページ要素のスペースを確保するために、開発者が使えるaspect-ratioを使用したCSSのテクニックは数多くあります - 詳しくはこちらをご覧ください。

また、Cloudflareはコアウェブバイタルを改善するための特別なサービスをいくつか提供しています。詳しくはこちらの記事をご覧ください：Cloudflareを使用してコアウェブバイタル用にWebサイトを最適化する方法。

他に重要なパフォーマンス指標は？

CWVの他にも多���の、「ウェブバイタル」があります。視覚コンテンツの初期表示時間（FCP）、DOMContentLoaded（DCL）、操作可能になるまでの時間（TTI）、最初の1バイトを受信するまでの時間（TTFB）は、SEOにはそれほど影響しませんが、開発者がCWVに影響する問題を特定するのに役立ちます。

（単独では、TTFBは特に有用な指標でありませんが、開発者が修正すべき追加的な問題の指標にはなり得ます）。

さらに詳しく知りたい方は、多くのパフォーマンス指標を定義する用語集を含むこちらホワイトペーパーをダウンロードしてください。