Web Vitals

Philip Walton

ユーザー エクスペリエンスの質を高めるための最適化は、ウェブ上のあらゆるサイトを長期的に成功に導く鍵となります。ビジネス オーナー、マーケティング担当者、デベロッパーの皆様は、Web Vitals を利用することで、サイトのエクスペリエンスを定量化し、改善の余地を特定できます。

概要

Web Vitals は、ウェブで優れたユーザー エクスペリエンスを提供するために不可欠な品質シグナルについて、統一されたガイダンスを提供する Google の取り組みです。

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

サイト所有者がユーザーにもたらすエクスペリエンスの質を把握するために、パフォーマンスの専門家である必要はありません。Web Vitals イニシアチブは、状況を簡素化し、サイトが最も重要な指標である Core Web Vitals に注力できるようにすることを目的としています。

Core Web Vitals

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

Core Web Vitals を構成する指標は、時間とともに進化します。現在のところ、ユーザー エクスペリエンスの 3 つの要素（読み込み、インタラクティビティ、視覚的安定性）に焦点を当て、次の指標（およびそれぞれのしきい値）が含まれています。

Largest Contentful Paint のしきい値に関する推奨事項 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 のコンプライアンスを評価するツールでは、3 つすべての Core Web Vitals 指標の 75 パーセンタイルで推奨目標を満たしている場合、ページ合格とみなす必要があります。

<ph type="x-smartling-placeholder">

Lifecycle

Core Web Vitals トラックの指標のライフサイクルは、試験運用版、保留中、安定版の 3 つのフェーズで構成されます。

<ph type="x-smartling-placeholder">
</ph> Core Web Vitals 指標の 3 つのライフサイクル フェーズが、一連の 3 つのシェブロンとして可視化されています。左から順に、試験運用版、保留、安定版のフェーズです。 <ph type="x-smartling-placeholder">
</ph> Core Web Vitals のライフサイクルのステージ。

各フェーズは、各指標についてデベロッパーがどう考えるべきかを示すことが目的です。

  • 試験運用版の指標は Core Web Vitals の候補であり、テストやコミュニティからのフィードバックによっては大幅な変更が加えられる場合があります。
  • 保留中の指標は、テストとフィードバックの段階に合格し、安定するための明確なタイムラインが定義された、今後の Core Web Vitals です。
  • 安定した指標とは、Chrome が優れたユーザー エクスペリエンスを実現するうえで不可欠と見なしている Core Web Vitals の現在のセットです。

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

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

試験運用版

指標が最初に開発されてエコシステムに投入された時点では、試験運用版指標とみなされます。

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

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

保留

Chrome チームによって、試験運用版の指標が十分なフィードバックを受け、有効性が証明されていると判断されると、保留中の指標になります。たとえば、INP は最終的に FID を廃止することを意図して、2023 年に試験運用版から保留状態に昇格しました。

保留中の指標は、エコシステムが適応するための時間を確保するため、このフェーズで最低 6 か月間保持されます。より多くのデベロッパーが指標を使用し始める中、コミュニティからのフィードバックは、このフェーズにおける重要な要素です。

Stable

Core Web Vitals の候補が確定すると、それが安定版の指標になります。これが Core Web Vitals の指標となる可能性がある時期です。

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

<ph type="x-smartling-placeholder">

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

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

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

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

  LCP INP CLS
<ph type="x-smartling-placeholder"></ph> Chrome ユーザー エクスペリエンス レポート
<ph type="x-smartling-placeholder"></ph> PageSpeed Insights
<ph type="x-smartling-placeholder"></ph> Search Console（Core Web Vitals レポート）
<ph type="x-smartling-placeholder">

Chrome ユーザー エクスペリエンス レポートが提供するデータは、サイトのパフォーマンスをすばやく評価する手段として利用できますが、ページビューごとの詳細なテレメトリーは提供されません。このような詳細な診断とモニタリングは、機能低下の正確な診断と監視、そして迅速な対応に欠かせません。そのため、サイトで独自のリアルユーザー監視を設定することを強くおすすめします。

JavaScript で Core Web Vitals を測定する

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

<ph type="x-smartling-placeholder">

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 ライブラリを使用して Core Web Vitals データを測定し、分析エンドポイントに送信するようにサイトを設定したら、次のステップでは、そのデータを集計してレポートを作成し、ページがページアクセスの 75% 以上について推奨されるしきい値を満たしているかどうかを確認します。

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

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

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

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

  LCP INP CLS
web-vitals
<ph type="x-smartling-placeholder"></ph> Web Vitals 拡張機能

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

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

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

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

ラボ測定は、開発中、つまりユーザーにリリースする前に機能のパフォーマンスをテストする最善の方法です。また、パフォーマンスの低下を未然に把握する最善の方法でもあります。

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

  LCP INP CLS
<ph type="x-smartling-placeholder"></ph> Chrome DevTools （代わりに TBT を使用）
<ph type="x-smartling-placeholder"></ph> 灯台 （代わりに TBT を使用）
<ph type="x-smartling-placeholder">

ラボ測定は優れたエクスペリエンスを提供するうえで不可欠な要素ですが、フィールド測定に代わるものではありません。

サイトのパフォーマンスは、ユーザーのデバイスの機能、ネットワークの状態、デバイスで実行中の他のプロセス、ユーザーによるページの操作によって大きく変動します。実際、Core Web Vitals の各指標のスコアは、ユーザー操作の影響を受ける場合があります。全体像を正確に把握できるのはフィールド測定のみです。

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

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

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

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 のセットには含まれていません。

Web Vitals の変更点

Web Vitals と Core Web Vitals は、デベロッパーがウェブでエクスペリエンスの質を測定するために現在利用できる最良のシグナルを表したものですが、これらのシグナルは完璧ではないため、今後の改善や追加は期待されます。

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

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

すべてのウェブに関する指標については、こちらの一般公開の変更ログに変更内容が明確に文書化されます。