ブログ運営

コアウェブバイタル(Core Web Vitals)とは?グーグルの評価基準や確認ツールを解説

コアウェブバイタルとは?評価基準や確認方法について

「コアウェブバイタル!?グーグル先生またランキング要因ふやすの!?マジ勘弁・・・」

こんにちは!30代Webディレクターこま(@koma_piece01)です。

今回はサイト運営者向けの記事になります。

先日コアウェブバイタルについてツイートしました。

googleが来年にコア・ウェブ・バイタルをランキング要因にするとのこと。ページ表示速度などユーザー体験の快適性を判定する基準。

コアウェブバイタルの導入は来年ということですが、ブロガーさんをはじめサイト運営者には気になる内容ですので、今回は私なりに「コアウェブバイタル(Core Web Vitals)」の概要や評価基準・確認方法について調べたことを記事にしてみました!

この記事でわかること

  • コアウェブバイタルの概要
  • コアウェブバイタルの評価基準
  • 評価の確認方法

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

コアウェブバイタルとは?

2020/5/28のGoogleの公式ブログ(日本語翻訳)では、コアウェブバイタルについて以下のように触れられています。

読み込み時間、インタラクティブ性、読み込み時のコンテンツの安定性など、ウェブの使いやすさの側面を測定します

こま
この3項目については、それぞれ「速度」「応答性」「視覚的安定性」という言葉でも表現されています。

「読み込み時のコンテンツの安定性」については少しわかりにくいかと思うので、googleの開発者向けサイト「web.dev」(英語)にあるわかりやすい動画のリンクを張っておきます。

>web.dev(累積レイアウト変更:CLS)

文章でも一応説明を。

こま
上記のリンクで動画をみられた方は読み飛ばしてもらってかまいません。

私たちがあるページを開いた際にそのページの読み込みが完全に終わるまで待つかというとどうでしょう?

待ちませんよね?

大半の方がまだページの一部が読み込み中の時点で操作を始めていると思います。

ところがまだデータを読み込み中のページを操作する際、こんな経験をしたことはないでしょうか?

あるボタン(ボタンAとします)をタップしようとした際にちょうどボタンAの上に新しいコンテンツが表示されて、タップしようとしていた位置にあったボタンAは下にずれてしまい、タップしようとしていた位置には別なボタン(ボタンBとします)が。

そしてタップするつもりのなかったボタンBをタップしてしまった!

私は頻繁にこんな場面に遭遇しています笑

しかも、こういう意図しない操作が起きる時って急いでいる時が多いんですよ。

そのため今度は意図したボタンをタップしようとするんですが、焦ってるからまた同じ間違いをしてしまったりして。。

これってものすごくストレスですよね?

googleはこのように、評価対象のウェブサイトがユーザーにとってストレスを感じさせる作りになっていないかを、コアウェブバイタルという指標で判定をしようとしています。

 

コアウェブバイタル(Core Web Vitals)の具体的な評価基準は?

コアウェブバイタルの評価基準は?

コアウェブバイタルがページ閲覧時の快適性を評価するものということはわかりましたが、もう少し掘り下げてみます。

googleはユーザー体験の快適性において重視している「読み込み時間」「インタラクティブ性」「読み込み時のコンテンツの安定性」それぞれの要素を数値化するためにどんな判定基準を設けているのでしょうか?

その答えが「LCP」「FID」「CLS」という指標になります。

 

LCP(Largest Contentful Paint):最大コンテンツ表示

LCP(Largest Contentful Paint):最大コンテンツ表示は、そのページ内でもっとも大きな要素が読み込まれる(表示される)までの指標です。2.5秒以内であれば良好、2.6秒〜4.0秒の場合は要改善、4.1秒以上は不良という判定になります。

画像出典:web.dev

LCP(Largest Contentful Paint):最大コンテンツ表示は、そのページ内でもっとも大きな要素が読み込まれる(表示される)までの指標です。2.5秒以内であれば良好、2.6秒〜4.0秒の場合は要改善、4.1秒以上は不良という判定になります。

また、現状でLCPの対象となるタグが決まっているようです。

  • <img>要素
  • <svg>要素内の<image>要素
  • <video>要素(poster属性を使っている場合のみ)
  • CSSによる背景画像
  • <div>などのブロックレベル要素
こま
今後、<svg>や<video>も対象に含まれる可能性があることも触れられています。

 

FID(First Input Delay):最初の入力の遅れ

First Input Delayの単語をそれぞれ直訳すると、「最初の」「入力」「遅れ」となりますので、FIDはユーザーがページ操作を開始できるまでに要した時間を測定する指標です

画像出典:web.dev

First Input Delayの単語をそれぞれ直訳すると、「最初の」「入力」「遅れ」となりますので、FIDはユーザーがページ操作を開始できるまでに要した時間を測定する指標です。

100ミリ秒(0.1秒)、300ミリ秒(0.3秒)が境界線となり、良好・要改善・不良の3段階で判定されます。

 

CLS(Cumulative Layout Shift):累積レイアウト変更

CLS(cumulative Layout Shift):累積レイアウト変更は、ページの読み込み中にページ内のコンテンツがどの程度移動するかを表す指標です。この指標は画面内でレイアウト変更が起きた「範囲(%)」と「移動距離(%)」を乗じたものが数値化されるようで、数値が小さいほど高評価になります。

画像出典:web.dev

CLS(cumulative Layout Shift):累積レイアウト変更は、ページの読み込み中にページ内のコンテンツがどの程度移動するかを表す指標です。

この指標は画面内でレイアウト変更が起きた「範囲(%)」に「移動距離(%)」を乗じたものが数値化されるようで、数値が小さいほど高評価になります。

良好・要改善・不良の境界線は、それぞれ0.1と0.25となっています。

CLS(累積レイアウト変更)の判定例

CLS(累積レイアウト変更)は、言葉だけだと私自身もわかりにくかったので、図を用いて説明します。

まずCLSの計算式のおさらいですが、レイアウト変更が起きた「範囲(%)」×「移動距離(%)」です。

では「範囲」「移動距離」の順で図解していきます。

 

CLSの「範囲」判定例

上記の画像は、最初は左図の表示だったものが、遅れて赤いボタンが表示された(右図)場合の範囲を示したものです。 赤いボタンが出現したことで、コンテンツが押し下げられました。 その結果、レイアウト変更の影響を受けた範囲(赤枠で囲った部分)は画面全体のうち80%で、CLSの範囲は「0.80」となります。

上の図は、最初は左のような表示だったページに対して赤いボタンが遅れて表示(右図)された場合の、レイアウト変更が起きた範囲を示したもの(赤枠)です。

赤いボタンが出現したことで、ブログ名より下のコンテンツが押し下げられました。

その結果、レイアウト変更の影響を受けた範囲(赤枠)は画面全体のうち80%に及びました。

レイアウト変更が起きた範囲は「0.80」となります。

 

CLSの「移動距離」判定例

赤いボタンの出現によって10%のズレが起きたため、CLSの距離は「0.10」となります。

次に移動距離についてです。

赤いボタンの出現によって、ブログ名より下のコンテンツは10%ほど押し下げられました

レイアウト変更による移動距離は「0.10」となります。

 

今回の判定例ではCLSは0.08

上記からレイアウト変更の「範囲」と「移動距離」がわかりましたので、それぞれCLSの計算式に当てはめてみます。

0.8(範囲)×0.1(移動距離)= 0.08

以上のことから判定例では0.1未満となり、良好判定内に収まる0.08という結果になります。

 

コアウェブバイタル(Core Web Vitals)の評価を確認する方法

コアウェブバイタルの評価を確認する方法

コアウェブバイタルの評価を確認する方法はいくつかあるようですが、私の方で確認した以下の3つをご案内します。

また、すでにお気づきかもしれませんが、このコアウェブバイタルの評価はページごとになります。

PageSpeed Insightsで確認する

コアウェブバイタルの導入発表に合わせて仕様が変わりました?ようで、LCP・FID・CLSそれぞれの評価が出てくるようになっています。

こま
対象のURLを入力することでページ表示速度を調べることができるツールです。

コアウェブバイタルの導入発表に合わせて仕様が変わりました?ようで、LCP・FID・CLSそれぞれの評価が出てくるようになっています。

以前スピードテストをした際に改善をしたはずなのですが、スマホページの評価は上記の通り散々な結果でした(笑

>>PageSpeed Insights

 

サーチコンソールで確認する

サーチコンソールで確認する場合は、左メニューの「ウェブに関する主な指標」からコアウェブバイタルの評価を見ることができます。PC版とモバイル版(スマホ版)それぞれでコアウェブバイタルの評価を見ることができます。

サーチコンソールで確認する場合は、左メニューの「ウェブに関する主な指標」からコアウェブバイタルの評価を見ることができます。

こちらも散々な結果(笑)あらあら。

ちなみにPC版とモバイル版(スマホ版)それぞれでコアウェブバイタルの評価を見ることができます(上記画像はモバイル版)。

>>サーチコンソール

 

Chromeの拡張機能「Web Vitals」で確認する

Chromeの拡張機能でもコアウェブバイタルの評価を確認することができます。 ページを表示させた状態でブラウザの「Web Vitals」のアイコンを押すだけなので簡単です。

Chromeの拡張機能でもコアウェブバイタルの評価を確認することができます。

ページを表示させた状態でブラウザの「Web Vitals」のアイコンを押すだけなので簡単です。

そしてここでも評価は散々。。改善に取り組まなければ・・!

>>Chrome拡張機能「Web Vitals」

 

おわりに

以上、「コアウェブバイタル(Core Web Vitals)とは?グーグルの評価基準や確認ツールを解説」でした。

要改善や不良判定に対する改善方法については時間がかかりそうだったため、ひとまずここで区切りを入れさせていただきました。

コアウェブバイタル対策の施策でうまくいったものについては、改めてブログ内で紹介したいと考えております。

まだ確認していないサイト運営者の皆様もぜひお試しください!

こま
最後まで読んでいただきありがとうございました!

友だち追加

ブログ更新の連絡や気になった情報などをお知らせしています!



  • この記事を書いた人

こま

30代独身男、都内勤務の会社員こまです。日々の節約や収入アップを模索しつつ、余裕資金を株や金・不動産などに投資しています

お金は生活する上でとても大切なものだからこそ、色々知識を増やしていくことが必要だと考えています。

お金に興味を持った方が、このブログを活用していただければ嬉しいなと思います!

詳細プロフィールはこちら

-ブログ運営

Copyright© こまの節約・投資ブログ , 2020 All Rights Reserved.