web-vitals.md

web vitals

web vitalsとは何か？

Googleが提唱する、Webサイトの健全性や質を示す指標。 以下はweb vitalsの一部だがこのような指標がある

• Time to First Btte(サーバーの初期応答時間)
• First Contentful Paint(視覚コンテンツの初期表示時間)
• Time to Interactive(操作可能になるまでの時間)
• etc...

これらの指標はChrome Dev toolのLigthhouseタブから計測できる。

web vitalsの中にはさまざまな指標があるが、その中で特に重要な指標をcore web vitalsという。

core web vitalsとは何か？

web vitalsの中で特に重要な3つの指標。すべてのwebページに適用可能なweb vitalsのセットとしている。

• LCP(Largest Contentful Paint): 最大視覚コンテンツの表示時間
• FID(FIrst Input Delay): 初回入力までの遅延時間
• CLS(Cumulative Layout Shift): 累積レイアウトシフト数

LCP(Largest Contentful Paint): 最大視覚コンテンツの表示時間

ページの読み込みが開始されてから、もっとも大きい画像 or テキストのまとまりが表示されるまでの時間。

2.5s以内なら良いとされている。

FID(FIrst Input Delay): 初回入力までの遅延時間

表示されたページをユーザが最初に操作した時から、ブラウザがイベントハンドラーの処理を開始するまでの時間。

100ms以内ならいいとされる。

CLS(Cumulative Layout Shift): 累積レイアウトシフト数

視覚的な安定性を測定するための指標。 もっとわかりやすくいうと、ページのロードの最中から完了までに要素が予期せず移動しないかということ。 この例がめっちゃわかりやすいです。

0.1以内ならいいとされている(なんか算出方法があるっぽいがここでは触れません)。

なぜ今注目されているのか？

GoogleのSEOにweb vitalsの指標が完全に組み込まれたから(2021年8月末の時点で完全に組み込まれたっぽい)。

なので、SEO対策にはweb vitalsの指標の向上も必要となってくる。

core web vitalsの計測方法

計測ツール

• chrome extension(https://chrome.google.com/webstore/detail/core-web-vitals/adeniimnihmbpgpbljmnohjpoolmgabj?hl=ja)
• npmライブラリ(https://github.com/GoogleChrome/web-vitals)
• page speed insights(https://developers.google.com/speed/pagespeed/insights/)
• Google Search Console
• etc...

実際に計測してみよう

• github
• google calendar
• gmail

参考文献

https://web.dev/vitals/ https://developers-jp.googleblog.com/2020/05/web-vitals.html https://developers.google.com/search/blog/2020/11/timing-for-page-experience

gistはいい