公開日: 2020 年 5 月 4 日
ウェブサイトの長期的な成功を考えるうえで、ユーザー エクスペリエンスの質の最適化は不可欠な要素です。ビジネス オーナー、マーケティング担当者、デベロッパーの皆様は、Web Vitals を利用することで、サイトのエクスペリエンスを定量化し、改善の余地を特定できます。
概要
Web Vitals は、ウェブで優れたユーザー エクスペリエンスを実現するために重要と考えられる品質シグナルについて、統一的な目安を提供する Google による取り組みです。
Google は長年にわたり、パフォーマンスを測定してレポートするためのツールを数多く提供しています。これらのツールの使用に精通しているデベロッパーもいれば、ツールと指標の両方の多さに追いつくのが難しいと感じているデベロッパーもいます。
サイト所有者は、ユーザーに提供しているエクスペリエンスの質を把握するために、パフォーマンスの専門家である必要はありません。Web Vitals イニシアチブは、状況を簡素化し、サイトが最も重要な指標である Core Web Vitals に注力できるようにすることを目的としています。
Core Web Vitals
ウェブに関する主な指標は、すべてのウェブページに適用される Web Vitals のサブセットであり、すべてのサイト所有者が測定する必要があります。また、すべての Google ツールに表示されます。ウェブに関する主な指標には、ユーザー エクスペリエンスのさまざまな側面を表す指標が含まれます。これらの指標は現場で測定可能で、重要なユーザー中心の結果の実際のエクスペリエンスを反映しています。
ウェブに関する主な指標を構成する指標は、今後進化していく予定です。現在のセットでは、ユーザー エクスペリエンスの 3 つの側面（読み込み、インタラクティビティ、視覚的安定性）に焦点を当てており、次の指標（およびそれぞれのしきい値）が含まれています。
- Largest Contentful Paint（LCP）: 読み込みパフォーマンスを測定します。優れたユーザー エクスペリエンスを提供するには、ページの読み込み開始から 2.5 秒以内に LCP を実現する必要があります。
- Interaction to Next Paint（INP）: インタラクティビティを測定します。優れたユーザー エクスペリエンスを提供するには、ページの INP を 200 ミリ秒未満にする必要があります。
- Cumulative Layout Shift（CLS）: 視覚的安定性を測定します。優れたユーザー エクスペリエンスを提供するには、ページの CLS を 0.1 以下にする必要があります。
ほとんどのユーザーがこれらの指標の推奨目標を達成できるようにするには、モバイル デバイスとデスクトップ デバイスに分割したページ読み込みの75 パーセンタイルを測定するのが適切なしきい値です。
ウェブに関する主な指標の準拠性を評価するツールでは、ウェブに関する主な指標の 3 つすべてについて、75 パーセンタイルで推奨される目標を満たしているページを合格と見なす必要があります。
Lifecycle
Core Web Vitals トラックの指標は、試験運用版、保留中、安定版の 3 つのフェーズで構成されるライフサイクルを経ます。
各フェーズは、各指標についてデベロッパーがどのように考えるべきかを示すように設計されています。
- 試験運用版の指標は Core Web Vitals の候補であり、テストやコミュニティからのフィードバックによっては大幅な変更が加えられる場合があります。
- 保留中の指標は、テストとフィードバック ステージを通過し、安定版になるまでのタイムラインが明確に定義されている、今後の Core Web Vitals です。
- 安定した指標とは、Chrome が優れたユーザー エクスペリエンスを実現するうえで不可欠と見なしている Core Web Vitals の現在のセットです。
ウェブに関する主な指標は、次のライフサイクル ステージにあります。
試験運用版
指標が最初に開発されてエコシステムに投入された時点では、試験運用版指標とみなされます。
試験運用フェーズの目的は、指標の適合性を評価することです。まず、解決すべき問題を探り、以前の指標で対処できなかった問題を反復処理します。たとえば、Interaction to Next Paint（INP）は当初、ウェブに存在するランタイム パフォーマンスの問題に First Input Delay（FID）よりも包括的に対処するための試験運用版の指標として開発されました。
Core Web Vitals ライフサイクルの実験段階は、バグを特定したり、初期定義の変更を検討したりすることで、指標の開発に柔軟性を持たせることも目的としています。また、コミュニティからのフィードバックが最も重要となる段階でもあります。
保留
試験運用版の指標について十分なフィードバックが得られ、有効性が実証されたと Chrome チームが判断すると、その指標は保留中の指標になります。たとえば、FID を最終的に廃止する目的で、INP は 2023 年に試験運用版から保留ステータスに昇格しました。
保留中の指標は、エコシステムが適応する時間を確保するために、このフェーズで少なくとも 6 か月間保持されます。指標の使用を開始するデベロッパーが増えるにつれて、コミュニティからのフィードバックは引き続きこのフェーズの重要な要素となります。
Stable
Core Web Vitals の候補が確定すると、それが安定版の指標になります。これが Core Web Vitals の指標となる可能性がある時期です。
安定した指標は積極的にサポートされており、バグの修正や定義の変更が行われる可能性があります。安定した Core Web Vitals 指標は、1 年に 1 回しか変更されません。Core Web Vitals の変更については、指標の公式ドキュメントと指標の変更ログで明確に通知されます。ウェブに関する主な指標も評価に含まれます。
ウェブに関する主な指標を測定、報告するツール
Google は、ウェブに関する主な指標がすべてのウェブ エクスペリエンスにとって重要であると考えています。そのため、同社は一般的なすべてのツールでこれらの指標を表示することに尽力しています。以降のセクションでは、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 で測定できます。
ウェブに関する主な指標をすべて測定する最も簡単な方法は、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 を測定できる基本的なカスタム指標機能が含まれている必要があります。
基盤となるウェブ API を使用してこれらの指標を直接測定する場合は、代わりに以下の指標ガイドで実装の詳細を確認してください。
一般的な分析サービスや独自の社内分析ツールを使用してこれらの指標を測定する方法については、実際のユーザー環境でのウェブに関する指標の測定のベスト プラクティスをご覧ください。
Core Web Vitals を測定するラボツール
Core Web Vitals はすべてフィールド指標ですが、その多くはラボで測定することもできます。
ラボ測定は、ユーザーにリリースする前に、開発中の機能のパフォーマンスをテストする最善の方法です。また、パフォーマンスの低下を未然に防ぐ最善の方法でもあります。
ラボ環境では、次のツールを使用して Core Web Vitals を測定できます。
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | |||
| Lighthouse | （代わりに TBT を使用） |
ラボでの測定は優れたエクスペリエンスを実現するうえで不可欠ですが、フィールドでの測定の代替にはなりません。
サイトのパフォーマンスは、ユーザーのデバイスの機能、ネットワークの状態、デバイスで実行されている他のプロセス、ページの操作方法によって大きく異なる場合があります。実際、Core Web Vitals の各指標のスコアは、ユーザー操作の影響を受ける可能性があります。現場での測定のみが、全体像を正確に把握できます。
スコアを改善するための推奨事項
以下のガイドでは、Core Web Vitals ごとにページを最適化するための具体的な推奨事項を紹介しています。
ウェブに関する主な指標を改善する方法は多数あり、それぞれのアプローチには、状況に応じて影響、関連性、使いやすさのレベルが異なります。Chrome チームが推奨する主な改善策については、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 と Core Web Vitals は、ウェブ全体のエクスペリエンスの質を測定するためにデベロッパーが現在利用できる最良のシグナルですが、これらのシグナルは完璧なものではなく、今後の改善や追加が期待されます。
Core Web Vitals はすべてのウェブページに関連し、関連する Google ツール全体で表示されます。これらの指標の変更は広範な影響を与えるため、デベロッパーは Core Web Vitals の定義と基準が安定していること、更新が事前に通知され、予測可能な年間の頻度で行われることを想定する必要があります。
他のウェブ バイタルは、コンテキストやツールに固有のものであり、Core Web Vitals よりも試験運用段階のものである可能性があります。そのため、定義と基準は頻繁に変更される可能性があります。
すべてのウェブバイタルの変更は、こちらの公開されているCHANGELOG に明記されます。