Core Web Vitals（CWV）とは？

Core Web Vitals（CWV）とは？

Core Web Vitals（CWV）は、3つのWebパフォーマンスメトリクスのセットです。Googleの検索エンジンは、この3つのメトリクスを測定し、検索結果にどのページを表示するかの判断に反映させています。つまり、検索エンジン最適化（SEO）担当者は、そのページのランキングを向上させるための全体的な戦略の一環として、WebページのCore Web Vitalsを最適化する必要があるのです。

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

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

Googleページエクスペリエンスアップデートとは？

ページのロード時間は以前からSEOの重要な要素でしたが、Googleは、CWVが2021年半ばにランキングアルゴリズムの一部になることを2020年に発表しました。これは、Googleページエクスペリエンスアップデートと呼ばれています。

Googleは発表の中で、CWVをページの検索順位を決定するページエクスペリエンスシグナルに要素として含めると述べています。その他のページクスペリエンスの要素としては、HTTPSセキュリティ、モバイルフレンドリーであること、侵入的なインタースティシャル（ポップアップなど）の有無が挙げられます。このアップデートの目的は、ポジティブなユーザーエクスペリエンスを提供するWebページに報いることでした。

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

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

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

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

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

なぜGoogleはランキングの決定にWebパフォーマンスを取り入れるのか？

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

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

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

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

Googleのガイドラインでは、LCP測定値が2.5秒以下であれば「良好」に分類されます。しかし、速いに越したことはありません。

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

LCPメトリックの前身は、ページの主要コンテンツがいつ見えるようになったかを測定するFirst Meaningful Paint（FMP）です。Googleはこのメトリックが信頼性に欠けるものと分かり、その後、一部のレポートツールからこれを削除しました。

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

First Input Delayとは、ユーザーが最初にWebページを操作しようとしてから、それに反応するまでの時間の測定値です。つまり、FIDは、人が最初に画面をクリックして、どれだけ早く何かを起こせるかを数値化したものです。Googleのガイドラインによると、「良好」なFIDは100ミリ秒以下とされています。

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

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

なお、FIDは「フィールドメトリック」、つまり、仮説や「ラボ」での測定ではなく、実際のユーザーの観察に基づいて測定されるものです。

「ラボメトリック」の代替となるものとして、合計ブロック時間（TBT）や操作可能になるまでの時間（TTI）などがあります。TBTは、First Contentful Paint（FCP）とTTIの間の経過時間を測定するものです。FCPは、読み込みが始まってからユーザーの画面にアイテムが読み込まれるまでの時間を測定します。TTIはその名の通り、アイテムが読み込まれたように見えてから、ユーザーが実際に操作できるようになるまでの時間を測定するものです。

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

CLS は、Webページの読み込み中に、どの程度「ズレが発生するか」を測定します。具体的には、ページレイアウトのシフトのうち、最大の「バースト」を測定します。Googleのガイドラインでは、「良好」のCLS測定値は0.1以下とされています。

レイアウトシフトとは、ページのコンテンツが、元々表示されていた場所から上、下、またはその他の方向に移動することを指します。この指標では、バーストとは、互いに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以下であることを推奨しています。

Core Web Vitalsの測定方法

CWVをチェックするためのツールはたくさんあります。以下は、すべてGoogleから直接提供されるものです。

• Chrome UX Report（CrUX）は、Chromeユーザーから報告されたフィールドデータを提供し、サイト所有者に実際のユーザーがどのようにWebサイトを体験しているかについてのデータを付与します。
• Google Lighthouseは、CWVに関するラボメトリクスを提供する無料ツールです。パフォーマンス、SEO、アクセシビリティなどを向上させるための実用的なインサイトを提供します。
• Google PageSpeed Insightsは、CrUXとLighthouseの機能を統合し、CWVやその他のWebバイタルに関するフィールドとラボの両方のデータを提供します。ユーザーは、PageSpeed Insightsを使用して、自分が所有しているかどうかにかかわらず、Webサイトのパフォーマンスを確認することができます。PageSpeed Insightsのレポートの一例をご紹介します。
• Google Search Consoleは、CrUXのフィールドデータに一部基づいており、URLまたはURLのグループごとにCWVのパフォーマンスデータを得ることができます。

Core Web Vitalsの改善方法

LCPの改善方法

• コンテンツ配信ネットワーク（CDN）を利用する：CDNは世界中の場所にコンテンツをキャッシュしているため、より早くコンテンツがユーザーに届くようになります。
• 画像の最適化：多くの場合、画像はページの中で最も大きな要素になります。画像のファイルサイズを小さくすることで、画像の読み込み時間を短縮することができます。
• レイジーローディング（遅延読み込み）の実装：レイジーローディングでは、ユーザーが必要とするときだけWebサイトのリソースを読み込みます。これにより、ある程度はWebサイトの読み込みが効率化されますが、この機能の使いすぎは、LCPの低下と相関するという研究結果もあります。このため、Googleは、画像のレイジーローディングを「below the fold（ビロウ・ザ・フォールド）」、つまりユーザーがスクロールして表示しなければならないWebページの部分に限定することを提案しています。

FIDの改善方法

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

CLSの改善方法

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

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

CWVはGoogleがSEO担当者に優先すべきと伝えているメトリクスですが、存在するWebバイタルはこれだけではありません。First Contentful Paint（FCP）、DOMContentLoaded（DCL）、操作可能になるまでの時間（TTI）、最初のバイトまでの時間（TTFB）はSEOにはそれほど影響しませんが、開発者がCWVに影響する問題を特定するのに役立ちます。

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

CloudflareがCWVの改善に貢献できること

Cloudflareは、CWVを高めるための様々なサービスを提供しています。

• Cloudflareのコンテンツ配信ネットワーク（CDN）は、120カ国以上、330都市以上に広がるグローバルネットワークで静的および動的コンテンツをキャッシュしています。これにより、Webサイトの読み込みが速くなり、3つのCWVのすべてにメリットがあります。
• Cloudflare Imagesは、画像を圧縮し、Webサイトの読み込み速度をさらに向上させることができるサイズ変更機能を提供し、特にLCPに対応しています。
• Cloudflare Zarazは、サードパーティのリソースをブラウザから離れたクラウドに読み込み、FIDやCLSなどのメトリクスを向上させます。