Web Vitals

Philip Walton

公開日: 2020 年 5 月 4 日

ウェブサイトの長期的な成功を考えるうえで、ユーザー エクスペリエンスの質の最適化は不可欠な要素です。ウェブに関する指標は、ビジネス オーナー、マーケティング担当者、デベロッパーの皆様が、サイトのエクスペリエンスを数値化し、改善の機会を特定するのに役立ちます。

概要

ウェブに関する指標は、ウェブで優れたユーザー エクスペリエンスを実現する際に重要となる品質シグナルについて、統一的な目安を提供するための Google の取り組みです。

Google は、パフォーマンスを測定してレポートするためのツールを長年にわたり提供してきました。これらのツールを使いこなしているデベロッパーもいれば、ツールと指標の多さに苦労しているデベロッパーもいます。

サイト所有者は、ユーザーに提供しているエクスペリエンスの質を理解するために、パフォーマンスの専門家である必要はありません。ウェブに関する指標の取り組みは、状況を簡素化し、サイトが最も重要な指標である Core Web Vitals に集中できるようにすることを目的としています。

Core Web Vitals

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

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

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

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

Core Web Vitals の準拠状況を評価するツールでは、3 つの Core Web Vitals 指標すべてで 75 パーセンタイルの推奨目標値を満たしているページを合格と見なす必要があります。

Lifecycle

Core Web Vitals の指標は、試験運用、保留、安定版の 3 つのフェーズからなるライフサイクルをたどります。

Core Web Vitals 指標のライフサイクル フェーズを 3 つのシェブロンで表した図。左から右に、試験運用、保留中、安定版のフェーズがあります。
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 は 2023 年に試験運用版から保留状態に昇格し、最終的には FID を廃止する予定です。

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

Stable

Core Web Vitals の候補指標が確定すると、安定した指標になります。この時点で、指標は Core Web Vital になる可能性があります。

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

Core Web Vitals の測定と報告に役立つツール

Google は、Core Web Vitals はすべてのウェブ エクスペリエンスにとって重要であると考えています。そのため、すべての人気ツールでこれらの指標を表示することに取り組んでいます。以降のセクションでは、Core Web Vitals をサポートしているツールについて詳しく説明します。

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

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

  LCP INP CLS
Chrome ユーザー エクスペリエンス レポート
Chrome DevTools
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 ライブラリを使用すると、各指標の測定は単一の関数を呼び出すだけで行えます。使用方法と 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 を測定できる基本的なカスタム指標機能が含まれているはずです。

基盤となるウェブ API を使用してこれらの指標を直接測定することを希望するデベロッパーは、代わりにこれらの指標ガイドで実装の詳細を確認できます。

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

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

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

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

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

  LCP INP CLS
Chrome DevTools
Lighthouse （代わりに TBT を使用）

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

サイトのパフォーマンスは、ユーザーのデバイスの性能、ネットワークの状況、デバイスで実行されている他のプロセス、ページでの操作方法によって大きく異なります。実際、Core Web Vitals の各指標のスコアは、ユーザー インタラクションによって影響を受ける可能性があります。実地測定からしか全体像を正確に把握することはできません。

スコアを改善するための推奨事項

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

Core Web Vitals を改善する方法は数多くあり、それぞれ効果、関連性、使いやすさが異なります。Chrome チームが推奨する最も効果的な方法の概要については、Core Web Vitals 改善のための最も効果的な方法をご覧ください。

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

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

これらのその他の指標は、Core Web Vitals のプロキシまたは補足指標として機能し、エクスペリエンスの大部分を把握したり、特定の問題の診断に役立ちます。

たとえば、Time to First Byte（TTFB）とFirst Contentful Paint（FCP）はどちらも読み込みエクスペリエンスの重要な側面であり、LCP の問題（サーバーのレスポンス時間の遅延またはレンダリングをブロックするリソース）を診断するうえで役立ちます。

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

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

ウェブに関する指標と Core Web Vitals は、ウェブ全体のエクスペリエンスの質を測定するために、現在デベロッパーが利用できる最良のシグナルですが、完璧なものではありません。今後、改善や追加が行われることが予想されます。

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

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

すべてのウェブに関する指標について、変更はこの一般公開のCHANGELOGに明確に記載されます。