お問い合わせはこちら

【最新SEO】Core Web Vitals(コアウェブバイタル)とは?をわかりやすく解説します(2021)

公開
更新
SEO

モバイル検索の検索順位を決める要素の一つとして、Googleが2021年5月開始を予定しているのが「Core Web Vitals」です。利用者がWebサイトの利用で得られる体験や知識は重要(vital)ですが、特に中心的(Core)なものとして3つ指標にまとめられています。「Core Web Vitals」は検索結果の順位にも影響があるため、開始スケジュールに間に合うよう可能な限り対策をしていきましょう。

記事のメインイメージ画像です。

Core Web Vitalsとは?

まだまだ聞きなれない「Core Web Vitals」の概要や目的、なぜいま重要かについて解説しています。

Core Web Vitalsとは?のイメージ画像です。

Web Vitalsとは

Googleの公式ページによれば、Webサイトの管理者向けに同社が提唱する指針です。これまで専門家によって改善された研究結果であり、具体的な数値目標です。Webサイトの利用者がより良い体験ができるように、管理者はWeb Vitalsの考え方が求められています。

この指針により、管理者にとって何が重要(vital)か整理できると考えます。そもそも検索エンジンの評価は結果であり、利用者にとって大切なことに対応することがWeb Vitalsの本来の目的ではないでしょうか。

Core Web Vitalsとは

Webサイトの管理者にとり重要な対策は非常に多いため、すべてを同時に実施し維持していくことは困難です。Webサイト運営での状況変化や関連技術の進展にともない、対策自体も更新する必要があるからです。

そのため無数にある対策に優先順位をつけ、特に中心的(Core)なものを重点的に取り組むことが「Core Web Vitals」の目標と考えられます。さらに想定されるメリットは、以下のようにまとめることができるでしょう。

管理者客観的な数値で把握でき、目標や実現方法を立案しやすくなる
利用者サイトの利用時間を短縮できる

Core Web Vitals の3指標について

Core Web Vitalsの3つの柱について基本をまとめています。言葉の意味が想像できず難しく感じられますが、意図されている内容はシンプルです。

Core Web Vitals の3指標についての画像です。


画像引用:Google Developersより

LCP(Largest Contentful Paint)とは

LCP(Largest Contentful Paint)の概略画像です。


画像引用:Google Developersより

ページの「主要な部分」をWebブラウザに表示する速度です。この「主要な部分」とは、ページの最上部にあるメイン画像(写真や動画など)のほかに文章の段落が含まれています。

LCP ではWebブラウザでページを開いてから、コンテンツ(ページを構成している画像や文章など)が実際に表示されるまでの時間として、2.5秒以内を「GOOD」と推奨しています。

Webサイトの管理者にとりポイントは以下と考えます。

・PCだけでなくスマートフォンなどのモバイル端末も対象
・画面に全てのコンテンツが表示されるまでの時間を計測するものではない
・利用者にとって優先順位の高い内容に絞り、表示速度の向上を目指すことが大切

【参考URL(公式サイト)】https://web.dev/lcp/

FID(First Input Delay)とは

FID(First Input Delay)の概略画像です。


画像引用:Google Developersより

閲覧中のページで以下のような動作をする場合の、PCやモバイル端末の反応速度です。

・文字や画像のリンクをクリックまたはタップする
・問い合わせフォームなどに文字入力をして送信する(JavaScriptまたはPHPで稼働)

利用者はページを読むだけではなく、画面上でさまざまな操作をします。FIDはその反応速度を計測し、反応時間が100ミリ秒(0.1秒)以下を「GOOD」と推奨しています。

公式サイトでは、私たちが誰かと会うときに感じる第一印象に例えて解説しています。普段の生活でも、相手の反応やその早さが大切ですね。FIDはページの反応速度が遅い場合に、イライラする度合いと言い換えることができるでしょう。

【参考URL(公式サイト)】https://web.dev/fid/

CLS(Cumulative Layout Shift)とは

CLS(Cumulative Layout Shift)の概略画像です。


最もわかりづらい指標です。あるページにアクセスしてページを読み込んでいる最中に、画像やボタンなどの表示位置が、予期せずに変わってしまうことがあります。このような状態でボタンをクリックすると、違うところをクリックすることになります。

またやり直せばいいことです。ただ、例えば商品代金の決済ボタンとキャンセルのボタンが並んでいる場合には、経済的な損失になる可能性があります。これでは、利用者にとり時間の無駄だけでなく、不信感につながりますね。

CLSでは、「Layout shift score – レイアウトの変動によるスコア(筆者訳)」として、0.1未満を「GOOD」と推奨しています。なお「Cumulative」には蓄積するという意味があり、ここではレイアウト変動の発生件数を指さしています。

【参考URL(公式サイト)】https://web.dev/cls/

Core Web Vitalsの3指標を測定する方法

複数の方法があります。それぞれの方法の優劣などの情報は原稿執筆時点では見つからなかったため、導入して継続的に利用がしやすい方法を選べばいいと思います。なお、こちらの章では公式ページでの説明順に合わせて、設定方法や注意点をまとめています。

Core Web Vitalsの3指標を測定する方法のイメージ画像です。

Chrome User Experience Report(Chrome UX Report)

URLhttps://datastudio.google.com/u/0/datasources/create
導入方法・上記URLにアクセス後「Chrome UX Report」を検索する
・画面にそってアクセス権の承認、利用するGoogleアカウントの選択などを行う
・「Chrome UX Report」の画面が表示されたら、「パラメータ」欄に測定したいWebサイトのURLを入力して「接続」ボタンをクリックする
・画面が変わったら、右上の「レポートを作成」ボタンをクリックする
注意点特になし

PageSpeed Insights

PageSpeed Insightsのトップ画面の画像です。
URLhttps://developers.google.com/speed/pagespeed/insights/
導入方法特になく、「ウェブページのURLを入力」欄に測定したいサイトのURLを入力し「分析」ボタンをクリックする
注意点特になし

Search Console (Core Web Vitals report)

Search Console (Core Web Vitals report)での計測方法の補足画像です。
URLhttps://support.google.com/webmasters/answer/9205520
導入方法・「レポートを開く」ボタンをクリックする
・画面が変わったら「プロパティ」の選択をする
・「ウェブに関する主な指標」ページに変わる(情報が表示されていない場合は「PageSpeed Insights を試す」の部分をクリックする)
・「PageSpeed Insights」の項目を参考にしながら操作する
注意点特になし

Web Vitals Chrome Extension

Web Vitals Chrome Extensionでの計測方法の補足画像です。(GitHub)
Web Vitals Chrome Extensionでの計測方法の補足画像です。(chromeウエブストア)

■(1)GitHub利用の場合

■(2)chrome ウェブストアの場合

URL2つのうち、どちらかにアクセスします
(1)GitHub利用の場合
https://github.com/GoogleChrome/web-vitals-extension
(2)chrome ウェブストアの場合
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
導入方法(1)「Download ZIP」ボタン(赤枠)をクリックし、プログラムをダウンロード後インポートする
(2)「Chromeに追加」ボタンをクリックする
注意点(2)導入直後に「Metrics data unavailable」と表示される場合は、しばらく時間を空けて確認

Chrome DevTools

Chrome DevToolsでの計測方法の補足画像です。
URLなし(ブラウザChromeを使用)
導入方法・Chromeの「ディベロッパーツール」を開く(Ctrl+Shift+I キー(Windows)または Cmd+Opt+I キー(Mac))
・メニューの「performance」を選択
・再読み込み(Ctrl+Shift+E キー(Windows)または Cmd+Opt+ E キー(Mac))
・「Experience」欄を選択
注意点・FIDは測定されず代替の方法で実施
・上記の「再読み込み」には時間がかかる

Lighthouse

Lighthouseでの計測方法の補足画像です。
URLなし(ブラウザChromeを使用)
導入方法・Chromeの「ディベロッパーツール」を開く(Ctrl+Shift+I キー(Windows)または Cmd+Opt+I キー(Mac))
・メニューの「Lighthouse」を選択
・「Generate report」ボタンをクリック
・「Performance」欄を確認
注意点・FIDは測定されず代替の方法で実施
・上記の「再読み込み」には時間がかかる

3つの指標を使ってできる改善方法

指標別の方法

公式サイトから、主要な方法をいくつかご紹介しましょう。

LCP

利用しているサーバーの反応時間を短縮・コードの見直し
・利用者により近いCDNの設置
・サーバー側のキャッシュの有効活用
Web workersを導入しJavaScriptの実行時間を削減
・次世代の画像フォーマットWebPへの切り替え
JavaScriptおよびCSSの読み込み時間を短縮・ファイルの圧縮(ツール例 : Minify
・比較的重要でないファイルの読み込みを遅らせる
・重要なCSSはインラインに記述する
ユーザー側の環境への配慮・JavaScriptファイルの最小化、遅延読み込み
・可能な限りサーバー側での処理に切り替える

参考: Optimize Largest Contentful Paint(公式サイト)

FID

JavaScriptの負荷軽減・重要ではない部分の読み込みと実行の削減
Web workersの導入しJavaScriptの実行時間を削減

参考: Optimize First Input Delay(公式サイト)

CLS

画像ファイルの指定・縦横サイズ(比率)の明示
・レスポンシブデザインでは「srcset」で規定し、縦横の比率を同一にする
広告の表示・縦横サイズ(比率)の明示
・広告の位置は最上部を避ける
Webフォントの読み込み・を追加する
・可能であればWebフォントを使用しない

参考: Optimize Cumulative Layout Shift(公式サイト)

レンタルサーバー業者での対応事例

利用者にとって時間と専門的な知識が限定されている場合でも、できる方法があります。それは現在利用中のプランを見直し、サーバーのスペックを向上することです。これでサイトの表示を高速化することができるようになります。例えば、複数のリクエストを同時に処理できる「HTTP/2」を導入しているサーバーでは、Core Web Vitalsの改善にも効果があります。

WordPressなどのCMSを利用する場合には特に重要です。カゴヤ・ジャパンでは「HTTP/2」を用いることで、WordPressで運用するWebサイトを超高速で表示することが可能になりました。「共用レンタルサーバー」プランでも使われています。

HTTP/2について、さらに詳しく以下のページで解説しています。

【図解】HTTP/2って?HTTP/1.1との違いと導入メリット・課題まとめ
https://www.kagoya.jp/howto/webhomepage/http-2/

まとめ

Core Web Vitalsは単にGoogle対策という訳ではなく、サイト運営者が把握できる便利な指標であり、サイト改善に役立てることができる重要なヒントです。2021年5月開始予定のCore Web Vitalsに間に合うように、ぜひ対策を立てていただきたいと考えます。カゴヤ・ジャパンの「共用レンタルサーバー」プランは、HTTP/2にも対応し高速でおすすめです。