What is "Core Web Vitals"?

●Core Web Vitals

全てのウェブページに適用される動作指標のサブセット。
Coreとされる指標は以下3つ。
・LCP - Largest Contentful Paint
・INP - Interaction to Next Paint
・CLS - Cumulative Layout Shift

●LCP

Largest Contentful Paintの字面通り、 ページ上における最大サイズの画像またはテキストブロックが表示されるまでの所要時間。
読み込みパフォーマンスの尺度として用いられ、2.5秒以上を要する場合は改善が必要と判断される。

●INP(旧FID)

Interaction to Next Paint (旧：First Input Delay)
「<summary>要素をクリックしてから実際にアコーディオンが展開されるまでの待機時間」など、ユーザの操作が実際のペイント(視覚で捉えられるもの)として表示されるまでの所要時間(待機時間)のことを指す。

INPはページで行われた全てのインタラクション(クリック、タップ、キーボード操作)のレイテンシをモニタリングすることで測定される。
ページの計測区間として設定された領域(ページ全体の75%が推奨されている)において、大半のページでは「最も大きなレイテンシ」がINPとして記録される(※)。
INPが200ms以下の場合ページは良好、500ms以上の場合は不良と判断され、両者間の場合は要改善とされる。

※
インタラクションが多数発生するページでは外れ値を除くため「50回のインタラクションごとに一度、最も高いレイテンシを排除する」という挙動が発生するが、Wevdev曰く殆どのサイトで50回を超えるインタラクションは発生しないとされている。
●FIDとは何が異なるのか
FIDは初回操作時のレイテンシのみを計測する。総体的なレイテンシの計測をよりふさわしいものとして、2024年3月からFIDに代わる形でINPがCore Web Vitalに採用されている。

参照：
・Interaction to Next Paint（INP） - wev.dev
・INP を Core Web Vitals に導入 - Google Search Central Blog
・応答性の指標の改善に向けて - web.dev

●CLS

Cumulative Layout Shift / レイアウトシフト堆積。
サイトの閲覧時、ページのレイアウトにどれだけのズレが生じたかを数値化したもの。

発生の主原因としてはサイズが指定されていない画像や動画、初期フォールバックより大きいまたは小さくレンダリングされるフォント、サードパーティ製広告やウィジェット等が挙げられる。

参照：
・Cumulative Layout Shift (CLS) - Web.dev

●FCP

First Contentful Paint
ページ遷移後、ブラウザが最初のDOMコンテンツをレンダリングするまでに要する時間。
画像、白色以外の<canvas>、SVGはDOMコンテンツとみなされるが、<iframe>はDOMコンテンツとみなされない。
99%のサイトは1.2秒以内にFCPのレンダリングが開始されるため、同値を基準として超える場合はLighthouse上のスコアが下がっていく。

参照：
・First Contentful Paint - Chrome for Developers