はじめに
この記事はWebの基礎をおさらいカレンダー Advent Calendar 2022です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！
今回の記事では、Core Web Vitalsについて説明します！
Core Web Vitalsとは
ユーザー体験を優れたものにするためにGoogleが提唱している指標(Web Vitals)の中でも、中心となる3指標のことを指します。
GoogleのSEOの指標として導入されたことで、対策をするサイトが増えている。
- LCP(Largest Contentful Paint): 最大視覚コンテンツの描画までの時間
- FID(First Input Delay): 初回入力までの遅延時間
- CLS(Cumulative Layout Shift): 累積のレイアウトのずれ
LCP
簡単に言えば、一番メインとなるコンテンツが表示するまでにどれだけ待たされるか？というのを指標にしています。
2.5秒以内であれば、問題ないとしてGoogleは定めています。
| 基準 | 基準値 |
|---|---|
| 良好 | 2.5秒未満 |
| 要改善 | 4秒以下 |
| 不良 | 4秒以上 |
FID
ページに訪れてから、ユーザーが操作を行えるようになるまでの時間です。
重たいサイトだと、アクセスしてから画面が真っ白になる時間があると思いますが、
あの真っ白な画面が終わるまでの時間だと思っても大きな相違はないです。
| 基準 | 基準値 |
|---|---|
| 良好 | 100ミリ秒未満 |
| 要改善 | 300ミリ秒以下 |
| 不良 | 300ミリ秒以上 |
CLS
ページを表示した後に、予期しないレイアウトのずれの大きさを計測する指標です。
ページをタップしたときに、コンテンツが後から描画されて別の部分を誤タップしてしまったことはないですか？
ああいった事象を避けるために、このCLSという基準があります。
| 基準 | 基準値 |
|---|---|
| 良好 | 0.1未満 |
| 要改善 | 0.25以下 |
| 不良 | 0.25以上 |
測り方
PageSpeed Insightsで測るのが手軽でおすすめです。
下記のような形で、問題ないかどうかを測定してくれます。
まとめ
以上、Core Web Vitalsについての説明でした！
Webの基礎をおさらいカレンダー Advent Calendar 2022でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！