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

PageSpeed Insights

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

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

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

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

Chrome UX Report

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

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

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

Search Console

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

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

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

Chrome Devtools

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

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

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

Lighthouse

LighthouseはGoogleChromeの拡張機能を使ったものです。

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

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

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

Web Vitals Extension

こちらのサービスWeb Vitals Extensionは、Google Chromeに追加をすることによっての拡張機能を使って簡単に設定をすることができます。

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

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

LCP（Largest Contentful Paint ）の改善方法

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

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

FID（First Input Delay ）の改善方法

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

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

CLS（Cumulative Layout Shift ）の改善方法

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

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

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

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