コアウェブバイタル！？グーグル先生またランキング要因ふやすの！？マジ勘弁・・・
こんにちは！30代Webディレクターこま（@koma_piece01）です。
今回はサイト運営者向けの記事になります。
先日コアウェブバイタルについてツイートしました。
googleが来年にコア・ウェブ・バイタルをランキング要因にするとのこと。ページ表示速度などユーザー体験の快適性を判定する基準。#googleアップデート#google変動#SEOhttps://t.co/M2rDR957Rj
— こま@節約・投資ブロガー (@koma_piece01) May 29, 2020
googleが来年にコア・ウェブ・バイタルをランキング要因にするとのこと。ページ表示速度などユーザー体験の快適性を判定する基準。
コアウェブバイタルの導入は来年ということですが、ブロガーさんをはじめサイト運営者には気になる内容ですので、今回は私なりに「コアウェブバイタル（Core Web Vitals）」の概要や評価基準・確認方法について調べたことを記事にしてみました！
この記事でわかること
- コアウェブバイタルの概要
- コアウェブバイタルの評価基準
- 評価の確認方法
目次（タップで移動できます）
コアウェブバイタル（Core Web Vitals）とは？
2020/5/28のGoogleの公式ブログ（日本語翻訳）では、コアウェブバイタルについて以下のように触れられています。
読み込み時間、インタラクティブ性、読み込み時のコンテンツの安定性など、ウェブの使いやすさの側面を測定します
「読み込み時のコンテンツの安定性」については少しわかりにくいかと思うので、googleの開発者向けサイト「web.dev」（英語）にあるわかりやすい動画のリンクを張っておきます。
文章でも一応説明を。
私たちがあるページを開いた際にそのページの読み込みが完全に終わるまで待つかというとどうでしょう？
待ちませんよね？
大半の方がまだページの一部が読み込み中の時点で操作を始めていると思います。
ところがまだデータを読み込み中のページを操作する際、こんな経験をしたことはないでしょうか？
あるボタン（ボタン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秒以上は不良という判定になります。
また、現状でLCPの対象となるタグが決まっているようです。
- <img>要素
- <svg>要素内の<image>要素
- <video>要素（poster属性を使っている場合のみ）
- CSSによる背景画像
- <div>などのブロックレベル要素
FID（First Input Delay）：最初の入力の遅れ
First Input Delayの単語をそれぞれ直訳すると、「最初の」「入力」「遅れ」となりますので、FIDはユーザーがページ操作を開始できるまでに要した時間を測定する指標です。
100ミリ秒（0.1秒）、300ミリ秒（0.3秒）が境界線となり、良好・要改善・不良の3段階で判定されます。
CLS（Cumulative Layout Shift）：累積レイアウト変更
CLS（cumulative Layout Shift）：累積レイアウト変更は、ページの読み込み中にページ内のコンテンツがどの程度移動するかを表す指標です。
この指標は画面内でレイアウト変更が起きた「範囲（％）」に「移動距離（％）」を乗じたものが数値化されるようで、数値が小さいほど高評価になります。
良好・要改善・不良の境界線は、それぞれ0.1と0.25となっています。
CLS（累積レイアウト変更）の判定例
CLS（累積レイアウト変更）は、言葉だけだと私自身もわかりにくかったので、図を用いて説明します。
まずCLSの計算式のおさらいですが、レイアウト変更が起きた「範囲（％）」×「移動距離（％）」です。
では「範囲」「移動距離」の順で図解していきます。
CLSの「範囲」判定例
上の図は、最初は左のような表示だったページに対して赤いボタンが遅れて表示（右図）された場合の、レイアウト変更が起きた範囲を示したもの（赤枠）です。
赤いボタンが出現したことで、ブログ名より下のコンテンツが押し下げられました。
その結果、レイアウト変更の影響を受けた範囲（赤枠）は画面全体のうち80％に及びました。
レイアウト変更が起きた範囲は「0.80」となります。
CLSの「移動距離」判定例
次に移動距離についてです。
赤いボタンの出現によって、ブログ名より下のコンテンツは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それぞれの評価が出てくるようになっています。
以前スピードテストをした際に改善をしたはずなのですが、スマホページの評価は上記の通り散々な結果でした（笑
サーチコンソールで確認する
サーチコンソールで確認する場合は、左メニューの「ウェブに関する主な指標」からコアウェブバイタルの評価を見ることができます。
こちらも散々な結果（笑）あらあら。
ちなみにPC版とモバイル版（スマホ版）それぞれでコアウェブバイタルの評価を見ることができます（上記画像はモバイル版）。
>>サーチコンソール
Chromeの拡張機能「Web Vitals」で確認する
Chromeの拡張機能でもコアウェブバイタルの評価を確認することができます。
ページを表示させた状態でブラウザの「Web Vitals」のアイコンを押すだけなので簡単です。
そしてここでも評価は散々。。改善に取り組まなければ・・！
おわりに
以上、「コアウェブバイタル（Core Web Vitals）とは？グーグルの評価基準や確認ツールを解説」でした。
要改善や不良判定に対する改善方法については時間がかかりそうだったため、ひとまずここで区切りを入れさせていただきました。
コアウェブバイタル対策の施策でうまくいったものについては、改めてブログ内で紹介したいと考えております。
まだ確認していないサイト運営者の皆様もぜひお試しください！
このブログは有料テーマ「WING（AFFINGER5）」を利用しています
このブログはWordPressの有料テーマ「WING（AFFINGER5）」を利用しています。
「WING（AFFINGER5）」は、ブログ初心者でも簡単に見やすい記事を作れるように、デザインや文字装飾、ボタン、広告表示スペースなどのパターンが数多く用意されています。
私自身、イチからホームページを立ち上げることができますが、「WING（AFFINGER5）」を導入することでブログ運営の時間をかなり短縮できることができています。
「WING（AFFINGER5）」を利用する場合、購入費用として14,800円がかかりますが、以降テーマのアップデートは無料で行うことができますので費用が発生するのは購入時のみです。
＼ 本格的にブログを作るなら ／
「WING（AFFINGER5）」で用意されている記事装飾のバリエーションについて知りたい方は、下記の記事をご覧ください。
無料テーマなら「Coccon」が高機能でオススメ
「有料テーマはちょっと・・・」という方には、無料テーマの「Coccon」が高機能で利用者も多いためオススメです。
私は別ブログにて「Coccon」を使用していますが、正直無料とは思えないほど機能が充実しています。
ブログにお金はかけたくないという方は、Cocconを試してみると良いでしょう。
＼ 無料でも驚きの高機能 ／
