Core Web Vitals

# Core Web Vitals
## とは何か
まず、`Web Vitals`とは2020年にGoogleよって提案された、パフォーマンス・ユーザエクスペリエンスに関する指標群のこと。
そして`Core Web Vitals`とは、その`Web Vitals`のサブセットであり、具体的には以下の3指標で構成される。

- **[`LCP（Largest Contentful Paint）`](https://qiita.com/toshi00ysm/items/ed8a9de8b0a86dc969b2)**: 読み込みのパフォーマンスを計測する。良好なユーザエクスペリエンスには、このLCPをページの読み込みが開始されてから**2.5秒**以内に収める。
- **[`FID（First Input Delay）`](https://qiita.com/toshi00ysm/items/794d9b66b7b83d8a35c6)**: （UIの）応答性を測る指標。良好なユーザエクスペリエンスには、このFIDを**100ミリ秒**以下にする。
- **[`CLS（Cumulative Layout Shift）`](https://qiita.com/toshi00ysm/items/1af1bfd071e73f0edd05)**: 見た目の安定性を測る指標。良好なユーザエクスペリエンスには、CLSスコアを**0.1**以下に維持する。

そして上記の指標において、これらをほとんどのユーザで体験できることを目指すのであれば、ページロードにおいて75[パーセンタイル](https://www.google.co.jp/search?q=%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%82%BF%E3%82%A4%E3%83%AB)[^1]に当たるところが良い閾値となるとのこと。

[^1]: 75パーセンタイルはざっくり言うと、上位25%（下から数えて75%）に位置する値のこと。100人いたら下から75人までをカバーできる値。

提案者のGoogleは`Core Web Vitals`について以下のように[説明](https://web.dev/vitals/#core-web-vitals)している。

> Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. 

_Core Web Vitalsは、Web Vitalsのサブセットであり、（そしてそれは）全てのWebページに当てはまり（=適用することができる）、全てのサイトオーナーに計測されるべき、そして全てのGoogleのツールよって明らかにされることになる。_

また併せて、

> The metrics that make up Core Web Vitals will evolve over time. 

_Core Web Vitalsを構成するこれらの指標は、時がたつにつれて変更（改善）されていくだろう。_

と今後適宜変更される可能性があることについても明言している。

## `Core Web Vitals`が計測可能なライブラリ・ツール
- [web-vitals](https://github.com/GoogleChrome/web-vitals/)（npmライブラリ）
- [Web Vitals Chrome Extension](https://github.com/GoogleChrome/web-vitals-extension/)（Chrome拡張機能）
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)および[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)
- [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report)
- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
- [Search Console (Core Web Vitals report)](https://support.google.com/webmasters/answer/9205520)

## `Core Web Vitals`対応で期待できるビジネス的メリット
`Core Web Vitals`は単なるエンジニアの自己満足的指標ではなく、これを改善することでビジネス上のメリットも十分期待できると言われ、実際にいくつかの国内メガベンチャーを含む世界中の多くのtech企業が有意なビジネス的[成果を挙げているとの報告](https://web.dev/vitals-business-impact/#case-studies)がある。

抜粋すると以下のとおり。

- Tencent Videoは、`Core Web Vitals`の基準を満たすことで、動画の**CTRが70%向上**
- Cdiscountは、3つの指標すべてを改善し、Black Fridayセールでの**収益が6%増加**
- Wixは、`Core Web Vitals`の基準を満たすことで、モバイルからの**アクセスが前年比250%に増加**
- Nykaaは、`LCP`を40%改善することで、T2/T3の都市からの**オーガニックトラフィックが28%増加**
- NIKKEI STYLEは、`LCP`を18%改善することで、**セッションあたりのページビューが9%増加**
- [NDTVは、他のプロダクトの変更とともに`LCP`を半減させることで、**直帰率が50%改善**](https://web.dev/ndtv)
- [Agrofy Marketは、`LCP`を70%改善することで、読み込み中の**離脱を76%削減**](https://web.dev/agrofy/)
- Flipkartは、`Core Web Vitals`指標を改善することで、**直帰率を2.6%削減**
- Ameba Mangaは、`CLSスコア`を10分の1に改善することで、**読まれたコミックの数が2〜3倍に増加**
- [Yahoo! Japanは、パフォーマンスの低いページの`CLS`を修正して98%削減することで、**セッションあたりのページビューが15%増加**](https://web.dev/yahoo-japan-news/)
- AliExpressは、`CLS`を10分の1に、`LCP`を半分に改善することで、**直帰率が15%減少**

## 参照
- [Web Vitals - web.dev](https://web.dev/vitals/)
- [Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標](https://developers-jp.googleblog.com/2020/05/web-vitals.html)
- [Google Developers Japan: Core Web Vitals によるビジネス インパクト](https://developers-jp.googleblog.com/2021/05/core-web-vitals.html)