Google「Core Web Vitals」とは？LCP・FID・CLSの意味＆ランキング改善方法

Web Vitalとは

Web Vitalsというのはgoogleが設定しているシステムのことです。SEO対策にも役立つシステムで、Web Vitalを使って上手に対策をすることで、自分のページを上位に表示させることができます。

Core Web vitalsとは？

Web Vitalsの中でも根本となる3つの要素があります。これをCore Web Vitalsと呼びます。ポイントとなるのは、以下の通りです。

PageSpeed Insights

こちらのサイトではパソコンだけではなくスマホでのデータもパフォーマンスを測定することができます。

近年ではパソコン以外にスマホでネットをチェックする人も増えていますし、パソコンとスマホでは表示の仕様が違います。

そのため、パソコンとスマホの両方の視点でシステムを診断してくれるというのは、非常に便利なツールと言えるでしょう。

ページの読み込み時間などをベースに診断して数値化できるので、具体的にどのようなところを改善すればいいのかということがわかりやすいのが大きな魅力です。

Chrome UX Report

実際に現場でページを閲覧している人のデータをかき集めて数値化することのできるこちらのサービスでは、リアルな情報を得ることができるのが大きな魅力です。

ドメインやURLを入力するだけで簡単にそのページの情報の指標を出すことができます。

このデータは毎日更新されていき、最大過去4週間までのデータをまとめていくことができます。長期的なデータを基に分析することができるので、サイト運営のための対策や方針を固めやすいのが大きなメリットです。

Search Console

シンプルで使いやすいこちらのサイトは、サイト運営に長けている人だけではなく、運営の経験が少ないというほとでも気軽に利用することができます。

ネットを利用しているすべてのユーザーに向けて作られているのが特徴です。

このサイトではページ内だけのユーザーのアクションだけではなく、ページに訪れる前のユーザーの動きも分析することができるのが大きなポイントです。ユーザーがページにたどり着くのに使った検索ワードや、クリックの回数なども詳しくデータ化することができるのです。

Chrome Devtools

こちらのサイトでは、意図しないレイアウトのズレが生じた場合に検出することができます。

Core Web Vitalsでいう「CLS」の重要なポイントなので、こちらの計測ができるのはメリットとして大きいでしょう。

また、書き込み部分の入力から反映までにかかる時間も細かく算出することができます。

Lighthouse

こちらのサイトでは、サイトのパフォーマンスやアクセシビリティなどを基準にユーザー利用時の状況を細かく測定してくれます。

審査項目としては「フォントサイズ」「リンクへの誘導文字のわかりやすさ」「ページ表示の際にプラグインが必要とされないか」など細かなところまで見てくれるので、より使いやすいサイトを作るのに役立ちます。

ただ、このサイトは2019年2月時点で英語表示のみで、日本語には対応していません。これからの成長が期待されるサイトの一つです。

Web Vitals Extension

こちらのサービスは、Google Chromeに追加をすることによって簡単に設定をすることができます。

見ているページのCore Web Vitalsのデータ（LCP・FID・CLS）をバックグランドで自動計測してくれるので、特に操作も必要ありません。

計測中のデータは、Chrome上の右上に出るアイコンをクリックすることでいつでも簡単にチェックすることができます。今見ているサイトの情報を知りたいという時に気軽に利用することができるので、使い勝手が良いのが大きな魅力です。

LCPの改善方法

LCPが悪くなってしまう要因としては、サーバーが重いことによる応答時間の遅さやリソース読み込みの遅延などが挙げられます。

適宜圧縮などを行いながらページの読み込み速度を速める工夫をすることで、LCPの判定を改善することはできます。

FIDの改善方法

FIDの改善をするためにも、サイトの軽量化が必要になります。リクエストの数やデータ送信の量を少なくすることによってサイト自体のデータの重さを軽減することで、サクサクと操作をしていくことができるようになります。

例えば長いタスクは分割にするなどして、少しでも負担がかからないように調整していくことが大切です。

CLSの改善方法

CLSが起こる原因としては、表示されている画像や広告などのサイズ指定がなされていないことなどが挙げられます。

またWebフォントや動くコンテンツがある場合にも、意図せず画面が動いてしまって知らないところを誤タップしてしまう原因になります。

これを防ぐためには、画像のサイズをあらかじめ指定しておき、動かないように設定していくことが大切です。広告などもページのズレの原因になるので、こちらもサイズを決めておくようにしましょう。

動くコンテンツなども多用しすぎるとズレの原因になるので、使いすぎないように気をつけましょう。