モバイル検索の検索順位を決める要素の一つとして、Googleが2021年5月開始を予定しているのが「Core Web Vitals」です。利用者がWebサイトの利用で得られる体験や知識は重要（vital）ですが、特に中心的（Core）なものとして3つ指標にまとめられています。「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つの柱について基本をまとめています。言葉の意味が想像できず難しく感じられますが、意図されている内容はシンプルです。
画像引用：Google Developersより
LCP（Largest Contentful Paint）とは
画像引用：Google Developersより
ページの「主要な部分」をWebブラウザに表示する速度です。この「主要な部分」とは、ページの最上部にあるメイン画像（写真や動画など）のほかに文章の段落が含まれています。
LCP ではWebブラウザでページを開いてから、コンテンツ（ページを構成している画像や文章など）が実際に表示されるまでの時間として、2.5秒以内を「GOOD」と推奨しています。
Webサイトの管理者にとりポイントは以下と考えます。
・PCだけでなくスマートフォンなどのモバイル端末も対象
・画面に全てのコンテンツが表示されるまでの時間を計測するものではない
・利用者にとって優先順位の高い内容に絞り、表示速度の向上を目指すことが大切
【参考URL（公式サイト）】https://web.dev/lcp/
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では、「Layout shift score – レイアウトの変動によるスコア（筆者訳）」として、0.1未満を「GOOD」と推奨しています。なお「Cumulative」には蓄積するという意味があり、ここではレイアウト変動の発生件数を指さしています。
【参考URL（公式サイト）】https://web.dev/cls/
Core Web Vitalsの3指標を測定する方法
複数の方法があります。それぞれの方法の優劣などの情報は原稿執筆時点では見つからなかったため、導入して継続的に利用がしやすい方法を選べばいいと思います。なお、こちらの章では公式ページでの説明順に合わせて、設定方法や注意点をまとめています。
Chrome User Experience Report（Chrome UX Report）
| URL | https://datastudio.google.com/u/0/datasources/create |
|---|---|
| 導入方法 | ・上記URLにアクセス後「Chrome UX Report」を検索する ・画面にそってアクセス権の承認、利用するGoogleアカウントの選択などを行う ・「Chrome UX Report」の画面が表示されたら、「パラメータ」欄に測定したいWebサイトのURLを入力して「接続」ボタンをクリックする ・画面が変わったら、右上の「レポートを作成」ボタンをクリックする |
| 注意点 | 特になし |
PageSpeed Insights
| URL | https://developers.google.com/speed/pagespeed/insights/ |
|---|---|
| 導入方法 | 特になく、「ウェブページのURLを入力」欄に測定したいサイトのURLを入力し「分析」ボタンをクリックする |
| 注意点 | 特になし |
Search Console (Core Web Vitals report)
| URL | https://support.google.com/webmasters/answer/9205520 |
|---|---|
| 導入方法 | ・「レポートを開く」ボタンをクリックする ・画面が変わったら「プロパティ」の選択をする ・「ウェブに関する主な指標」ページに変わる（情報が表示されていない場合は「PageSpeed Insights を試す」の部分をクリックする） ・「PageSpeed Insights」の項目を参考にしながら操作する |
| 注意点 | 特になし |
Web Vitals Chrome Extension
■（1）GitHub利用の場合
■（2）chrome ウェブストアの場合
| URL | 2つのうち、どちらかにアクセスします （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
| URL | なし（ブラウザChromeを使用） |
|---|---|
| 導入方法 | ・Chromeの「ディベロッパーツール」を開く（Ctrl+Shift+I キー（Windows）または Cmd+Opt+I キー（Mac）） ・メニューの「performance」を選択 ・再読み込み（Ctrl+Shift+E キー（Windows）または Cmd+Opt+ E キー（Mac）） ・「Experience」欄を選択 |
| 注意点 | ・FIDは測定されず代替の方法で実施 ・上記の「再読み込み」には時間がかかる |
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にも対応し高速でおすすめです。
