Web Vitals

Philip Walton

ウェブに関する指標とは、ウェブ上で優れたユーザー エクスペリエンスを提供するために不可欠なウェブページ品質シグナルに関する統一されたガイダンスを提供する Google の取り組みです。このツールの目的は、利用可能なさまざまなパフォーマンス測定ツールを簡素化し、サイト所有者が最も重要な指標である Core Web Vitals に集中できるようにすることです。

Core Web Vitals

Core Web Vitals は Web Vitals のサブセットであり、すべてのウェブページに適用されます。すべてのサイト所有者が測定する必要があり、すべての Google ツールに表示されます。Core Web Vitals は、それぞれユーザー エクスペリエンスの個別の側面を表し、現場で測定可能であり、ユーザー中心の重要な成果を実現するための実際のエクスペリエンスを反映しています。

Core Web Vitals を構成する指標は、時間の経過とともに進化していきます。現在のセットは、読み込み、インタラクティブ性、視覚的な安定性という、ユーザー エクスペリエンスの 3 つの側面に重点を置いています。これには次の指標が含まれます。

Largest Contentful Paint のしきい値に関する推奨事項 First Input Delay のしきい値に関する推奨事項 Cumulative Layout Shift しきい値の推奨事項
  • Largest Contentful Paint（LCP）: 読み込みのパフォーマンスを測定します。優れたユーザー エクスペリエンスを提供するため、LCP はページの読み込みが最初に開始してから 2.5 秒以内に発生する必要があります。
  • First Input Delay（FID）: インタラクティビティを測定します。優れたユーザー エクスペリエンスを提供するには、ページの FID を 100 ミリ秒以下にする必要があります。
  • Cumulative Layout Shift（CLS）: 視覚的な安定性を測定します。優れたユーザー エクスペリエンスを提供するには、CLS を 0.1. 以下に維持する必要があります。

これらの各指標について、ほとんどのユーザーで推奨される目標値を達成するには、モバイル デバイスとデスクトップ デバイスでセグメント化されたページ読み込みの 75 パーセンタイルを測定するしきい値として測定することをおすすめします。

Core Web Vitals のコンプライアンスを評価するツールでは、これら 3 つの指標それぞれについて 75 パーセンタイルで推奨目標値を満たしていれば、ページが準拠しているとみなす必要があります。

ライフサイクル

ウェブに関する主な指標のトラックの指標は、試験運用版、保留中、安定版という 3 つのフェーズで構成されるライフサイクルを経ます。

Core Web Vitals の指標の 3 つのライフサイクル フェーズが 3 つの山の形をしたものとして可視化されています。左から順に、試験運用版、保留中、安定版のフェーズとなります。
Core Web Vitals のライフサイクルのステージ

各フェーズは、各指標についての考え方をデベロッパーに伝えるためのものです。

  • テスト指標は将来を見据えた Core Web Vitals で、テストやコミュニティからのフィードバックによっては、まだ大幅な変更が行われている可能性があります。
  • 保留中の指標は、テストとフィードバックの段階に合格し、安定するまでのタイムラインが明確に定義された、今後の Core Web Vitals です。
  • Stable 指標とは、Chrome で優れたユーザー エクスペリエンスに不可欠であると考えられるウェブに関する主な指標の現在のセットです。

Core Web Vitals のライフサイクル ステージは次のとおりです。

INP の開発の詳細については、Advancing Interaction to Next Paint をご覧ください。

試験運用版

指標が最初に開発されてエコシステムに加わったときは、試験運用版指標とみなされます。

テストフェーズの目的は指標の適合性を評価することです。まず解決すべき問題を探り、場合によっては以前の指標では対処できなかった可能性のある問題を繰り返し処理します。たとえば、当初 INP はウェブのランタイム パフォーマンスの問題に First Input Delay（FID）よりも包括的に対処するための試験運用版指標として開発されました。

また、Core Web Vitals のライフサイクルの試験運用フェーズでは、バグを特定し、初期定義の変更を調査することで、指標の開発に柔軟性を持たせることも意図されています。コミュニティからのフィードバックが 最も重要なフェーズでもあります

保留

Chrome チームは、試験運用版指標に十分なフィードバックがあり、その有効性が実証されたと判断した場合、保留中の指標になります。エコシステムが適応する時間を確保するため、保留中の指標は最低 6 か月間このフェーズで保持されます。この指標を使用するデベロッパーが増える中、コミュニティからのフィードバックは依然としてこのフェーズの重要な側面です。

安定的

Core Web Vitals 候補の指標が確定すると、その指標は安定した指標になります。その指標がウェブに関する主な指標になるタイミングです。

安定版の指標は積極的にサポートされており、バグの修正や定義の変更が行われる可能性があります。Stable Web Vitals の指標は、1 年に 1 回を超えることはありません。Core Web Vitals の変更は、指標の公式ドキュメントと指標の変更履歴で明確に通知されます。Core Web Vitals もすべての評価に含まれます。

重要なポイント: 安定した指標は必ずしも永続的ではありません。安定した指標を廃止し、問題領域に効果的に対処する別の指標に置き換えることができます。

Core Web Vitals の測定とレポート

Google は、Core Web Vitals がすべてのウェブ エクスペリエンスに不可欠であると考えています。そのため、Google は一般的なすべてのツールでこれらの指標を表示するよう努めています。以降のセクションでは、Core Web Vitals をサポートするツールについて詳しく説明します。

Core Web Vitals を測定するフィールド ツール

Chrome ユーザー エクスペリエンス レポートでは、Core Web Vitals ごとに匿名化された実際のユーザー測定データが収集されます。このデータにより、サイト所有者はページのアナリティクスを手動で設定しなくても、パフォーマンスをすばやく評価できます。また、PageSpeed Insights や Search Console の Core Web Vitals レポートなどのツールを強化できます。

  LCP FID CLS
Chrome ユーザー エクスペリエンス レポート
PageSpeed Insights
Search Console（Core Web Vitals レポート）

Chrome ユーザー エクスペリエンス レポートでは、サイトのパフォーマンスを迅速に評価できますが、ページビューごとの詳細なテレメトリーは得られません。これは、回帰を正確に診断、モニタリングして、迅速に対処するために必要となる場合が多いものです。そのため、サイトで独自のリアルユーザー モニタリングを設定することを強くおすすめします。

JavaScript で Core Web Vitals を測定する

各 Core Web Vitals は、標準のウェブ API を使用して JavaScript で測定できます。

すべての Core Web Vitals を測定する最も簡単な方法は、web-vitals JavaScript ライブラリを使用することです。このライブラリは、本番環境に対応した小規模な API ラッパーで、Google ツールが指標をレポートする方法と正確に一致する方法で各指標を測定します。

web-vitals ライブラリを使用すると、1 つの関数を呼び出すだけで、簡単に各指標を測定できます（使用方法と API の詳細については、ドキュメントをご覧ください）。

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

web-vitals ライブラリを使用して、ウェブに関する主な指標データを測定し、分析エンドポイントに送信するようにサイトを設定したら、そのデータを集計してレポートを作成し、ページ訪問の 75% 以上でページが推奨しきい値を満たしているかどうかを確認します。

一部の分析プロバイダでは Core Web Vitals の指標のサポートが組み込まれていますが、そうでないプロバイダでも、Core Web Vitals をツールで測定できる基本的なカスタム指標機能を組み込む必要があります。

その一例として、ウェブに関する指標レポートがあります。このレポートでは、サイト所有者が Google アナリティクスを使用してウェブに関する主な指標を測定できます。他の分析ツールを使用して Core Web Vitals を測定する方法については、現場でのウェブに関する指標の測定に関するベスト プラクティスをご覧ください。

また、Web Vitals の Chrome 拡張機能を使用して、コードを記述せずに Core Web Vitals の各レポートを作成することもできます。この拡張機能は、web-vitals ライブラリを使用してこれらの各指標を測定し、ウェブをブラウジングするユーザーに表示します。

この拡張機能は、自社サイト、競合他社のサイト、ウェブ全体のパフォーマンスを把握するうえで役立ちます。

  LCP FID CLS
web-vitals
Web Vitals 拡張機能

基盤となるウェブ API を使用してこれらの指標を直接測定する場合は、次の指標ガイドで実装の詳細を確認できます。

一般的な分析サービスや独自の分析ツールを使用してこれらの指標を測定する方法については、現場でのウェブに関する指標の測定に関するベスト プラクティスをご覧ください。

Core Web Vitals を測定するためのラボツール

Core Web Vitals はすべてフィールド指標ですが、その多くはラボで測定することもできます。

ラボ測定は、開発中に機能のパフォーマンスをテストする最善の方法です。また、パフォーマンスの低下が発生する前に検出するための最善の方法でもあります。

ラボ環境で Core Web Vitals を測定するには、次のツールを使用できます。

  LCP FID CLS
Chrome DevTools （代わりに TBT を使用してください）
Lighthouse （代わりに TBT を使用してください）

シミュレーション環境でユーザーなしでページを読み込む Lighthouse などのツールでは、ユーザー入力がないため、FID を測定できません。ただし、Total Blocking Time（TBT）指標はラボで測定可能であり、FID の優れた代用となります。ラボでの TBT を改善するパフォーマンスの最適化により、フィールドの FID が改善されます。詳しくは、スコアを改善するための推奨事項をご覧ください。

ラボ測定は優れたエクスペリエンスを提供するために不可欠な要素ですが、フィールド測定に代わるものではありません。サイトのパフォーマンスは、ユーザーのデバイスの機能、ネットワーク状態、デバイスで実行されている他のプロセス、ユーザーがページをどのように操作しているかによって大きく変化することがあります。実際、ウェブに関する主な指標の各指標は、ユーザー操作の影響を受ける可能性があります。全体像を正確に捉えることができるのは、フィールド測定だけです。

スコアを改善するための最適化案

以下のガイドでは、Core Web Vitals ごとにページを最適化する方法の具体的な推奨事項について説明します。

その他のウェブに関する指標

Core Web Vitals は、優れたユーザー エクスペリエンスを理解して提供するための重要な指標ですが、他にも重要な指標があります。

これらの他のウェブに関する指標は、多くの場合、Core Web Vitals の代用指標または補足指標として機能し、エクスペリエンスの大部分を捕捉したり、特定の問題の診断に役立てたりします。

たとえば、Time to First Byte（TTFB）と First Contentful Paint（FCP）はどちらも読み込みエクスペリエンスに不可欠な要素であり、どちらも LCP（低速なサーバー応答時間やレンダリング ブロック リソース）の問題の診断に役立ちます。

同様に、Total Blocking Time（TBT）などの指標は、FID と INP に影響する可能性があるインタラクティビティの問題を検出して診断するための重要なラボ指標です。ただし、Core Web Vitals のセットに含まれていません。フィールドで測定できず、ユーザー中心の結果を反映していないためです。

ウェブに関する指標の変更

ウェブに関する指標と Core Web Vitals は、ウェブ全体でのエクスペリエンスの質を測定するために現在利用できる最適なシグナルを表していますが、これらのシグナルは完全ではなく、今後の改善や追加が想定されています。

Core Web Vitals はすべてのウェブページに関連し、関連する Google ツールで紹介されています。これらの指標の変更は広範囲に影響を及ぼします。そのためデベロッパーは、Core Web Vitals の定義としきい値が安定していることに加え、事前の通知と予測可能な更新スケジュールを想定しておく必要があります。

その他のウェブに関する指標はコンテキストやツールに固有であることが多く、Core Web Vitals よりも試験運用版になる場合があります。そのため、定義としきい値が頻繁に変化する可能性があります。

すべてのウェブに関する指標の変更は、こちらの一般公開変更履歴に記載されています。