Core Web Vitals(GoogleのUX指標)の全貌と改善方法【前編】

Core Web Vitals(GoogleのUX指標)の全貌と改善方法【前編】

  • マイナビニュース
  • 更新日:2021/10/14
No image

昨今、企業のWebサイト運用において、快適なUX(ユーザーエクスペリエンス)を提供することは欠かせない要素となってきています。特に、GoogleがUXに直結した、ページの快適な表示速度や操作性、画面の安定性などを定量的に測る「Core Web Vitals」という定義を発表し、2021年6月から検索アルゴリズムの一部に適用したことで、多くの企業がこの「Core Web Vitals」を通じたUX改善に本格的に取り組み始めています。

本稿では、電通デジタルにて「Core Web Vitals」改善ソリューションを開発・推進し、多くの企業のUX改善を支援している現場担当者が「Core Web Vitals」の概要、現場で見てきたよくある課題とその改善手法などを紹介します。今回は、「Core Web Vitals」の3つの指標について具体的に説明します。

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

「Core Web Vitals」とは、GoogleがWebサイトのユーザー体験を測るうえで定義した指標です。Core Web Vitalsの中には、現在Largest Contentful Paint(LCP)、First Input Delay(FID)、Cumulative Layout Shift(CLS)の3項目が含まれています。

Googleは、検索結果画面を生成する上で、膨大なシグナルを基に生成しています。その中に「ページエクスペリエンス」というユーザー体験を評価するシグナル群があります。2021年6月に、ページエクスペリエンスの一つの指標として、このCore Web Vitalsが追加されました。

したがって、SEO(検索エンジン最適化)の領域において、このCore Web Vitalsに直結するWebページの快適な表示速度やユーザー体験の改善という部分は、昨今のSEOにおいてますます重要度を増してきています。

Core Web Vitals改善の効果

次に、Core Web Vitals改善における効果を掘り下げて解説します。Core Web Vitalsの改善は「Googleの評価を高める」というSEO施策としての意義があります。

しかし、それ以上に重要なのがCore Web Vitalsの改善は「ユーザー体験の最適化」であり、SEOへの効能だけでなく、Webページの最終ゴールであるコンバージョンの最適化(CRO)にも直結してくるということを多くの改善支援を通じて実感しています

一般的に、表示速度が1秒遅くなると7%CVR(コンバージョン率)が下がる※1、表示速度が1秒から3秒に落ちるとWebページの直帰率が32%上昇する※2と言われています。実際に、Core Web Vitalsの改善を通じて表示速度が短縮されると、ページコンテンツは変わらないにもかかわらず、CVRが総じて上昇するケースをよく目にします。

したがって、Core Web Vitalsを対策した先には、Googleからの評価が高まるだけでなく、Webページ上でのユーザー体験が最適化されるという、より本質的で価値のある施策になっているのを現場で実感しています。そのため、Webページの最適なユーザー体験を提供するための一つの施策として、是非ともCore Web Vitalsの改善をご検討されることをおすすめします。

※1:読み込み時間が収益にどのように影響するか(出典:NEILPATEL)

※2:(出典:Think with Google)

Core Web Vitalsに含まれる3つの指標(LCP・FID・CLS)

それでは、Core Web Vitalsの3つの指標であるLCP、FID、CLSについて、一つずつ解説していきます。

Largest Contentful Paint(LCP)

LCPはページで最も有意義なコンテンツが表記される、または主要な要素が表示されるまでの時間を測定したものと定義されています。

より具体的に説明すると、ページを読み込んでから画面にメイン画像やメインブロックなどが表示されるまでの時間を指します。Webページによってページ構成が異なるため、以下の図のようにLCPと判定される要素はページによって異なります。

例えば、上の図のCNNのページであれば、記事のメイン画像がLCPと判定され、下の図のInstagramのページであれば、インスタグラムのロゴ画像がLCPと判定されており、LCPは描画開始からこの要素が表示されるまでの時間を測定したものになります。

そして、実際に対象のWebページにアクセスしたユーザーの統計値において、LCPのスコアが、75パーセントタイル(最小値から数えて、母数全体の75%に位置するデータ)で2.5秒以内に収まっているとスコアとしては「良好」と判定されます。

また、75パーセントタイルでLCPが2.5秒超~4.0秒のレンジであると「要改善」、4.0秒を超えると「不良」として判定されます。

当然このスコアが「良好」に収まることは、Core Web Vitalsの対策として重要ですが、ユーザーがストレスなく、Webサイトを利用するということを考えた際にも、この指標をGoogleが重要視するのは納得感があります。

ページにアクセスした際に、アクセスしたページで確認したい情報がなかなか表示されないとストレスを感じる方も多いと思いますが、まさにそういった点に配慮された指標の一つとなっています。

First Input Delay(FID)

最初の入力までの遅延時間や応答性を測定して、ユーザーが最初にページを操作した際の速度を定量化した数値となります。

といっても、イメージがわきづらいですが、簡単な例で紹介すると、あるページでユーザーがボタンをタップした際の反応速度をイメージすると分かりやすいかもしれません。

上記のようなアクションが行われる際、ブラウザはボタンのタップを検知し、タップに応じた処理を開始します。このボタンタップを検知し、ボタンタップに応じた処理を開始するまでの時間がFIDの計測対象となります。

ここで注意が必要なのが、ボタンタップをして行われる処理がすべて完了するまでの時間がFIDに含まれるということではなく、あくまでボタンタップを受けとって、処理を開始するまでの時間がFIDになるという点です。

当然、ユーザー体験において、ボタンタップした後の処理がサクサク動く方がうれしいところはありますが、現状のFIDの計測においてはあくまで入力処理をブラウザが受け取り、処理を開始するまでのリードタイムを計測したものになっているという点は押さえておくべきポイントになります。

そして、このFIDにおいては、Webページにアクセスしたユーザーの統計値において75パーセントタイルが100ms(0.1秒)以下で収まっていると「良好」と判定されます。

このFIDの指標もLCPと同様3段階のレンジに分かれており、75パーセントタイルで100ms(0.1秒)超~300ms(0.3秒)のレンジであると「要改善」、300msを超えると「不良」として判定されます。

このFIDもCore Web Vitalsの対策という点で重要になりますが、サクサクと操作できるページ体験を提供することでユーザーの満足度を高めることができるので非常に理にかなった指標になっています。

Cumulative Layout Shift(CLS)

3つ目の指標である「CLS」は、ページがどのくらい安定しているように感じられるかを測定し、表示されるページコンテンツにおける予期しないレイアウト崩れが生じた数を定量化した指標となります。

具体的には、画面上でページのがたつきが生じたり、画像の読み込みが終わったタイミングでページのレイアウトが変更されたりした際などの、レイアウトが崩れたスコアを算出したものになります。

以下の図のように、ページが描画された後にぴょこっとボタンが現れてレイアウトが崩れたことがある方も多いかもしれませんが、まさにそれを算出したものがこのCLSに該当します。

CLSはLCPやFIDのように時間で計測されず、画面内でレイアウトが崩れた領域とレイアウトが崩れた距離を掛け合わせて計算されます。したがって、CLSにおいてはスコアが0に近づけば近づくほど、画面内でのレイアウト崩れがないというように判断できます。

CLSのスコアにおいては、Webページにアクセスしたユーザーの統計値において、75パーセントタイルで0.1以下であれば「良好」と判断されます。CLSも3段階のレンジで判定されるようになっており、75パーセントタイルで0.1~0.25のレンジであると「要改善」、0.25を超えると「不良」として判定されます。

記事を読んでいた際にレイアウト崩れが発生するというだけでも当然ストレスです。さらにひどいケースだと「ECサイトなどで商品を見ていた際にレイアウト崩れが発生して、購入ボタンを誤タップ」「スマートフォンで記事を読んでいて、レイアウト崩れによって広告を誤タップ」など、意図していない行動をさせられることもあります。したがって、ユーザー体験を考える上でも欠かせない指標であると考えられます。

LCP・FID・CLSを計測する主なツール

2021年9月現在、Core Web Vitalsの3つの指標であるLCP・FID・CLSを計測する主なツールとしては以下が存在します。

これらのうち、最も簡単に対象のページのCore Web Vitalsのスコアを測定できるツールとして、ページスピードインサイトを紹介します。

このページスピードインサイトは、Core Web Vitalsのスコアを知りたいページのURLを入力するだけで、Core Web Vitalsのスコアや阻害している要素を機械的に判定してレポートしてくれます。

もちろん、阻害要因をこのページスピードインサイトだけですべて把握することは現実的には難しいですが、改善のあたりをつける上でも役立つのでおすすめです。

フィールドデータとラボデータの違い

上記で紹介したページスピードインサイトでも確認することができますが、Core Web Vitalsに関する指標には「フィールドデータ」と「ラボデータ」という2つのデータが存在します(厳密には、FIDのみラボデータに存在しない)。この違いについても、簡単に紹介します。

フィールドデータとは、実際にユーザーが対象のWebページにアクセスしたときの各指標の数値を統計化したデータになります。また、このフィールドデータに基づいたCore Web Vitalsのスコアが、検索のシグナルであるページエクスぺリエンスに適用されています。

Googleは、実際のユーザーのアクセス情報をChromeユーザーエクスペリエンス レポート(CrUX)に格納しており、このデータはAPIやBigQueryからも取得が可能です。また、より簡易に確認する方法としては、先述のページスピードインサイトのフィールドデータという項目からも確認ができます。

一方のラボデータは、対象のWebページにアクセスしたときのLCPとCLSのシミュレーション数値を確認することができます。

「固定化された環境下でのシミュレーション数値のため、実際のユーザーの利用データとは異なる」という点がデメリットですが、一方で以下のようなメリットがあります。

公開前の開発用ページなどでも数値を算出することができる

すべてのページで数値を算出できる ※フィールドデータは、対象のページが、Chromeユーザーエクスペリエンス レポート(CrUX)に存在していないとCore Web Vitalsのスコアを確認することができない

残念ながら、ラボデータはシミュレート値なので、ユーザーの入力操作に依存したFIDの値を取得することができません。ただし、ラボデータではコンテンツの初回描画から操作可能になるまでの各タスクの処理時間において、50ミリ秒を超えてあふれたものの合計時間を確認するTBT (Total Blocking Time)を取得することができ、それを改善することがFIDの改善につながります。FIDのデータ取得ができないページについては、TBTを計測指標として改善を進めましょう。

ここまでCore Web Vitalsはどういう指標で、その中にはどういった項目が含まれており、その項目は具体的にどのようなものかについて紹介してきました。次回は、実際に企業のCore Web Vitals改善、さらに広義の意味で捉えると表示速度改善を基点にUX改善を通じて培った代表的な改善のナレッジを紹介します。

四本松太郎 しほんまつ たろう 株式会社電通デジタル グロースコンサルティング事業部 SEOストラテジスト 大手通信キャリアにてSE・サービスプランナーを担当後、大手メーカーと大手Web企業のジョイントベンチャー企業でデジタルマーケティング領域(SEO・CRO・Web広告運用など)を管轄。電通デジタルではSEOストラテジストとして大規模サイトやSEO難易度の高い業界を中心にコンサルティング支援を担当。直近では、Web開発の経験を活かし、Core Web Vitals(コアウェブバイタル)に対応したサイト速度改善ソリューションを開発し、すでに数十社の改善支援業務も担当。 この著者の記事一覧はこちら

この記事をお届けした
グノシーの最新ニュース情報を、

でも最新ニュース情報をお届けしています。
  • このエントリーをはてなブックマークに追加