Web Vitals

Philip Walton

ユーザー エクスペリエンスの品質を最適化することは、ウェブ上のあらゆるサイトを長期的な成功に導く鍵となります。ビジネス オーナー、マーケティング担当者、デベロッパーのいずれにとっても、Web Vitals はサイトのエクスペリエンスを定量化して改善の機会を特定するのに役立ちます。

概要

ウェブに関する指標とは、ウェブ上で優れたユーザー エクスペリエンスを提供するために不可欠な品質シグナルに関する統一的なガイダンスを提供する Google の取り組みです。

Google は長年にわたり、パフォーマンスを測定してレポートするためのツールを数多く提供してきました。これらのツールを使いこなすエキスパートもいれば、ツールと指標が豊富に豊富にあっても対応が難しいと感じている開発者もいます。

サイト所有者がパフォーマンスのエキスパートでなくても、ユーザーに提供するエクスペリエンスの品質を理解できます。ウェブに関する指標のイニシアチブは、環境をシンプルにし、サイトが最も重要な指標である Core Web Vitals に集中できるようにすることを目的としています。

Core Web Vitals

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

Core Web Vitals を構成する指標は、時間の経過とともに進化していきます。2020 年の現在の目標は、読み込み、インタラクティブ性、視覚的な安定性というユーザー エクスペリエンスの 3 つの側面に重点を置いており、それぞれの基準（およびその基準値）が含まれています。

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

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

Core Web Vitals のコンプライアンスを評価するツールでは、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 のライフサイクル ステージは次のとおりです。

  • LCP: 安定的
  • CLS: 安定版
  • INP: 安定版

試験運用版

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

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

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

保留

試験運用版の指標について十分なフィードバックがあり、その効果が実証されると、Chrome チームは保留中の指標になります。たとえば、2023 年に INP は最終的に FID を廃止することを意図して、試験運用版から保留中のステータスに昇格しました。

エコシステムが適応する時間を確保するため、保留中の指標は最低 6 か月間このフェーズで保持されます。この指標を使用するデベロッパーが増える中、コミュニティからのフィードバックは依然としてこのフェーズの重要な側面です。

安定的

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

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

Core Web Vitals を測定して報告するツール

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

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

Chrome ユーザー エクスペリエンス レポートでは、ウェブに関する主な指標ごとに、匿名化された実際のユーザー測定データが収集されます。このデータにより、サイト所有者はページに対して手動で分析を行うことなく、パフォーマンスをすばやく評価でき、PageSpeed Insights や Search Console の Core Web Vitals レポートなどのツールを強化できます。

  LCP INP 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, onINP, 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);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

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

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

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

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

この表示オプションは、自社サイト、競合他社のサイト、ウェブ全体のパフォーマンスを把握するのに役立ちます。

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

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

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

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

Core Web Vitals はすべて現場の指標ですが、その多くはラボでも測定可能です。

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

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

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

ラボでの測定は優れたエクスペリエンスを提供するために不可欠な要素ですが、現場での測定に代わるものではありません。

サイトのパフォーマンスは、ユーザーのデバイスの機能、ネットワーク状態、デバイス上で実行される可能性のある他のプロセス、ユーザーがページをどのように操作しているかによって大きく異なります。実際、ウェブに関する主な指標の各指標は、ユーザー インタラクションの影響を受ける場合があります。全体像を正確に捉えることができるのは、現場での測定のみです。

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

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

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

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

これらの他の指標は、ウェブに関する主な指標の 3 つの指標を補完する代替指標として機能し、エクスペリエンスの大部分を捕捉したり、特定の問題の診断に役立てたりすることができます。

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

同様に、Total Blocking Time（TBT）などの指標は、INP に影響する可能性があるインタラクティビティの問題を検出して診断するうえで不可欠なラボの指標です。ただし、ウェブに関する主な指標のセットに含まれていません。フィールドで測定できず、ユーザー中心の結果を反映するものでもありません。

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

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

Core Web Vitals はすべてのウェブページに関連しており、関連する Google ツールで紹介されています。これらの指標の変更は広範囲に影響を及ぼします。そのためデベロッパーは、Core Web Vitals の定義と基準が安定し、更新が事前通知され、予測可能な年 1 回の頻度で行われることを期待する必要があります。

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

すべてのウェブに関する指標の変更は、こちらの CHANGELOG に公開されています。