Googleが提唱する、Webサイトの健全性や質を示す指標。 以下はweb vitalsの一部だがこのような指標がある
- Time to First Btte(サーバーの初期応答時間)
- First Contentful Paint(視覚コンテンツの初期表示時間)
- Time to Interactive(操作可能になるまでの時間)
- etc...
これらの指標はChrome Dev toolのLigthhouseタブから計測できる。
web vitalsの中にはさまざまな指標があるが、その中で特に重要な指標をcore web vitalsという。
web vitalsの中で特に重要な3つの指標。すべてのwebページに適用可能なweb vitalsのセットとしている。
- LCP(Largest Contentful Paint): 最大視覚コンテンツの表示時間
- FID(FIrst Input Delay): 初回入力までの遅延時間
- CLS(Cumulative Layout Shift): 累積レイアウトシフト数
ページの読み込みが開始されてから、もっとも大きい画像 or テキストのまとまりが表示されるまでの時間。
2.5s以内なら良いとされている。
表示されたページをユーザが最初に操作した時から、ブラウザがイベントハンドラーの処理を開始するまでの時間。
100ms以内ならいいとされる。
視覚的な安定性を測定するための指標。 もっとわかりやすくいうと、ページのロードの最中から完了までに要素が予期せず移動しないかということ。 この例がめっちゃわかりやすいです。
0.1以内ならいいとされている(なんか算出方法があるっぽいがここでは触れません)。
GoogleのSEOにweb vitalsの指標が完全に組み込まれたから(2021年8月末の時点で完全に組み込まれたっぽい)。
なので、SEO対策には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はいい