Web Vitals

Apr 30, 2020 — 更新済み Jul 21, 2020

Available in: English, Español, Português, Русский, 中文, and 한국어

Appears in: 読み込み時間の高速化 | Core Web Vitals

ユーザーエクスペリエンス品質の最適化は、Web 上に存在するあらゆるサイトに適用可能な、長期的な成功を目指す上での秘訣であると言えます。Web Vitals は、ビジネスオーナー、マーケティング担当者、開発者などによる自身が運営するサイトのユーザー体験の数値化や、改善可能なポイントの特定をサポートします。

概要 #

Web Vitals は、Web 上での優れたユーザーエクスペリエンスの提供に欠かすことのできない品質シグナルに関する統一的なガイダンスの提供を目的とした、Google によるイニシアチブです。

Google ではパフォーマンスの測定およびレポートに関し、長年にわたり数多くのツールを提供してきました。一部の開発者たちはすでにこれらのツールの使用に精通しているものの、その他のユーザーにとっては、こういった豊富に存在するツールや指標に関する学習を進めていくことは難しく感じられてしまうようです。

ユーザーに提供されているエクスペリエンス品質を理解するために、サイトの所有者がサイトパフォーマンスの達人となる必要はありません。Web Vitals イニシアチブは必要な観点をシンプルに整理し、最も重要な指標である Core Web Vitals へと注力できるようにすることを目標としています。

Core Web Vitals #

Core Web Vitals とは、すべての Web ページに適用可能な Web Vitals のサブセットのことを指します。すべてのサイト所有者にとって測定する価値のあるもので、Google が提供するあらゆるツールで採用されています。Core Web Vitals に含まれている各指標は、ユーザーエクスペリエンスに関する特徴的な観点を提供し、フィールドデータの測定が可能であり、ユーザーを中心とした重要な結果に基づく実際のユーザー体験を反映します。

Core Web Vitals を構成する指標は、時間の経過とともに進化しています。2020 年現在のセットでは、ユーザーエクスペリエンスが持つ 3 つの観点 (読み込み時間、インタラクティブ性、視覚的な安定性) に焦点が当てられており、以下の指標 (および各指標のしきい値) が含まれています。

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 パーセンタイルという推奨目標値を達成している場合に、そのページを合格として判定するように設定されています。

Core Web Vitals の測定およびレポートを実施するためのツール #

Google では、Core Web Vitals をあらゆる Web エクスペリエンスにおける重要な指標として捉えています。その結果として、人気のあるすべての Google 製ツールでのこれらの指標の採用に取り組んでいます。このセクションでは、Core Web Vitals をサポートするツールについて詳しく説明していきます。

Core Web Vitals のフィールド測定を実施するためのツール #

Chrome User Experience Report は、非特定化された実際のユーザーによる測定データを Core Web Vitals の各指標ごとに収集するツールです。このデータを活用すれば、サイト所有者はページに手動でアナリティクスツールを設置しなくてもパフォーマンスをすばやく評価できるようになり、PageSpeed Insights や Search Console の Core Web Vitals Reportなどのツールを強化することもできるようになります。

	LCP	FID	CLS
Chrome User Experience Report	✔	✔	✔
PageSpeed Insights	✔	✔	✔
Search Console (Core Web Vitals Report)	✔	✔	✔

Chrome User Experience Report が提供するデータの活用によってサイトのパフォーマンスをすばやく評価できるようにはなりますが、正確な診断、監視、パフォーマンスの低下に対する迅速な対応などを実施するために必要となる可能性がある詳細なページビュー単位のテレメトリは提供されません。そのため、サイトには実際にユーザーを監視する仕組みを独自に設定しておくことを強くお勧めします。

JavaScript で Core Web Vitals を測定する #

Core Web Vitals の各指標は、標準の Web API を使用して JavaScript で測定することができます。

Core Web Vitals の各指標をすべて測定するためには、web-vitals JavaScript ライブラリを使用するのが最も簡単です。このライブラリは、前述したすべての Google 製ツールでレポートされている方法に完全に一致する方法で各指標を測定することができる、基本的な Web API を集めた小さなラッパーです。

Web-vitals ライブラリを使用することにより、各指標の測定は単一の関数の呼び出しと同じくらい簡単になります (詳細な使用方法および API に関する詳細については、ドキュメントを参照してください)。

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 利用が可能な場合には `navigator.sendBeacon()` を使用し、`fetch()` にフォールバックします。
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

Web-Vitals ライブラリを使用して Core Web Vitals データを測定し、アナリティクスエンドポイントへと送信するようサイトを構成したら、次のステップはそのデータの集計およびレポートを実施し、推奨しきい値 (ページ別訪問数の少なくとも 75%) を満たしているかどうかを確認することです。

一部のアナリティクスプロバイダーには Core Web Vitals の各指標のサポートが最初から組み込まれていますが、そうではない場合であっても、Core Web Vitals を各ツール上で測定可能にするための基本的なカスタム指標機能が備わっているはずです。

その一例として、サイトの所有者が Google Analytics を使用して Core Web Vitals を測定することができる Web Vitals Report が挙げられます。その他のアナリティクスツールを使用して Core Web Vitals を測定する場合のガイダンスについては、「Web Vitals をフィールド測定するためのベストプラクティス」を参照してください。

また、Web Vitals Chrome 拡張機能を使用すれば、コードを記述しなくても Core Web Vitals の各指標をレポートすることができるようになります。この拡張機能は各指標の測定に web-vitals ライブラリを使用し、Web を閲覧する際にそれらをユーザーに表示します。

この拡張機能は、自身が運営するサイトや競合他社のサイト、そして Web 全体のパフォーマンスを把握する場合に役立ちます。

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

開発者の方でこれらの指標を基本的な Web API を使用して直接測定したいという場合には、以下のガイドから詳細な実装手順をご確認いただけます。

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

Core Web Vitals に関してはフィールドデータの測定が何よりも優先されますが、その多くはラボデータの場合でも測定が可能です。

ラボデータの測定は、まだユーザー対して公開されていない開発段階の機能のパフォーマンスをテストする場合に最適な方法です。また、パフォーマンスの低下を事前に察知したい場合にも最適です。

ラボ環境で Core Web Vitals を測定する場合には、以下のツールが使用可能です。

	LCP	FID	CLS
Chrome DevTools	✔	✘ (代わりに TBT を使用してください)	✔
Lighthouse	✔	✘ (代わりに TBT を使用してください)	✔

ラボ環境での測定は優れたユーザー体験を提供する上で不可欠な要素ではありますが、実際のユーザー環境での測定に取って代わるものではありません。

サイトのパフォーマンスは、ユーザーが使用するデバイスの性能やネットワークの状態、ユーザーのデバイス上での別プロセスの実行状況、そしてユーザーによるページの操作方法に応じて大きく変化します。実際に Core Web Vitals の各指標のスコアは、ユーザーの操作に影響を受けます。正確な全体像を把握することができるのは、実際のユーザー環境での測定のみです。

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

Core Web Vitals の測定によって改善点を見つけたら、次のステップは最適化です。以下のガイドでは、ページを最適化するために必要となる具体的な推奨事項を、Core Web Vitals の各指標ごとに紹介しています。

Other Web Vitals #

Core Web Vitals は優れたユーザーエクスペリエンスについての理解を深め、それらをユーザーに対して提供する際に重要な意味を持つ指標ですが、重要な指標はこれ以外にも存在します。

そういった Web Vitals のその他の指標は、多くの場合 Core Web Vitals の代替指標または補足指標として機能し、ユーザー体験をより大きな観点から把握したり、特定の問題を診断したりする場合に役立ちます。

たとえば Time to First Byte (サーバーの初期応答時間、TTFB) や First Contentful Paint (視覚コンテンツの初期表示時間、FCP) などの指標は、どちらも読み込み時のユーザー体験に関連する重要な観点であり、それぞれが LCP に関する問題 (サーバーの応答時間が長すぎる場合や、レンダリングを妨げるリソースに関連する問題など) の診断に役立ちます。

同様に、Total Blocking Time (合計ブロック時間、TBT) や Time to Interactive (操作可能になるまでの時間、TTI) などの指標は、FID に影響を及ぼす潜在的なインタラクティブ性に関する問題を察知して診断を実施するために不可欠な、ラボ環境での指標です。これらの指標は実際のユーザー環境では測定できず、またユーザーを中心とした結果も反映していないため、Core Web Vitals には含まれません。

Evolving Web Vitals #

Web Vitals および Core Web Vitals は、Web 上でのユーザーエクスペリエンス品質の測定に関して現在利用可能な最高品質のシグナルを開発者に提供していますが、これらのシグナルも完璧なものではなく、将来的な改善や機能追加が期待されています。

Core Web Vitals はあらゆる Web ページに関連し、関連する Google 製ツールにも広く採用されているため、これらの指標に対する変更の実施は広範囲に影響を及ぼします。そのため、開発者の方々は Core Web Vitals の定義およびしきい値が安定していること、そして更新に関する情報が事前に通知され、かつ更新が予測可能な 1 年周期で実施されることを期待しているものと思われます。

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

Web Vitals に含まれるすべての指標に対して実施された変更の内容については、公開されている CHANGELOG にて詳細にドキュメント化されます。

最終更新

Jul 21, 2020 — 記事を改善する

Return to all articles

共有する