Core Web Vitalsとは? 実際のユーザー体験を測定する

Core Web Vitalsとは、実際のユーザーが体験する読み込み速度、インタラクティビティ、視覚的安定性を測定するGoogleのメトリクス群です。

ページ品質を1つの数値で捉えるのは難しいため、Googleはユーザー中心のメトリクスに絞った一連の指標をCore Web Vitalsとして定義しました。これらは、メインコンテンツがどれだけ速く読み込まれるか、ページが入力にどれだけ速く反応するか、レイアウトがどれだけ安定しているかを測定します。検索ランキングに影響し、フロントエンドの作業を導き、CIはこれらをbuildごとに追跡できます。

3つのメトリクス

Largest Contentful Paint (LCP): メインコンテンツが表示されるタイミング。
Interaction to Next Paint (INP): ページが入力に対してどれだけ反応良く感じられるか。
Cumulative Layout Shift (CLS): レイアウトが予期せずどれだけずれるか。

なぜこの3つなのか

これらは3つの体感に対応します。読み込まれているか、操作できるか、安定しているか、です。これらを合わせると、ユーザーが最も気づく瞬間を捉えられます。だからこそGoogleはこれらを中核の指標として選びました。

ラボとフィールド

フィールドデータは実ユーザーを反映しており、検索ランキングに影響するのはこちらです。Lighthouseが生成するようなラボ測定は再現性があり、リリース前のリグレッション検出に適していますが、あくまで近似です。

vitalsが悪化する一般的な原因

最適化されていない大きな画像はLCPを悪化させ、重いJavaScriptはINPを悪化させ、スペースを確保していない画像や広告はCLSを悪化させます。多くの修正はbuild時に行えます。assetの最適化、コード分割、レイアウトスペースの確保です。

CI/CDにおけるCore Web Vitals

CIは各pull requestでビルド済みのpreviewに対してラボvitalsを測定し、メトリクスが予算(budget)を超えて悪化したときにbuildを失敗させることができます。vitalsのリグレッションをpipelineで捉える方が、ユーザーやランキングにすでに影響を与えた後にフィールドデータで発見するよりもはるかに安上がりです。

重要なポイント

Core Web Vitalsは、読み込み(LCP)、インタラクティビティ(INP)、安定性(CLS)を測定します。
フィールドデータはランキングに影響し、ラボデータはリリース前にリグレッションを検出します。
CIはラボvitalsの予算(budget)をゲートに使い、pull requestごとにリグレッションを検出できます。