公開日: 2020 年 5 月 4 日
ウェブサイトの長期的な成功を考えるうえで、ユーザー エクスペリエンスの質の最適化は不可欠な要素です。Web Vitals は、ビジネス オーナー、マーケティング担当者、デベロッパーの皆様が、サイトのエクスペリエンスを数値化し、改善の機会を特定するのに役立ちます。
概要
Web Vitals は、ウェブで優れたユーザー エクスペリエンスを実現するために重要と考えられる品質シグナルについて、統一的な目安を提供する Google による取り組みです。
Google は長年にわたり、パフォーマンスを測定してレポートするためのさまざまなツールを提供してきました。これらのツールの使用に精通しているデベロッパーもいれば、ツールと指標の両方の多さに追いつくのが難しいと感じているデベロッパーもいます。
サイト所有者は、ユーザーに提供しているエクスペリエンスの質を把握するために、パフォーマンスの専門家である必要はありません。ウェブバイタル イニシアチブは、状況を簡素化し、サイトが最も重要な指標である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 は、ウェブに関する主な指標がすべてのウェブ エクスペリエンスにとって重要であると考えています。そのため、Google はこれらの指標をGoogle の一般的なツールすべてに表示することに取り組んでいます。以降のセクションでは、Core Web Vitals をサポートするツールについて詳しく説明します。
Core Web Vitals を測定するフィールドツール
Chrome ユーザー エクスペリエンス レポートでは、各 Core Web Vital について、匿名化された実際のユーザー測定データが収集されます。このデータにより、サイト所有者はページのアナリティクスを手動で計測しなくても、パフォーマンスを迅速に評価できます。また、Chrome DevTools、PageSpeed Insights、Search Console の Core Web Vitals レポートなどのツールにも使用されます。
Chrome ユーザー エクスペリエンス レポートから提供されるデータは、サイトのパフォーマンスをすばやく評価するのに役立ちますが、ページビューごとの詳細なテレメトリーは提供されません。このテレメトリーは、リグレッションを正確に診断、モニタリングし、迅速に対応するために必要となることがよくあります。そのため、サイト独自のリアルユーザー モニタリングを設定することを強くおすすめします。
JavaScript で 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 を測定するには、次のツールを使用できます。
LCP | INP | CLS | |
---|---|---|---|
Chrome DevTools | |||
Lighthouse | TBT を使用) | (代わりに
ラボでの測定は優れたエクスペリエンスを実現するうえで不可欠ですが、フィールドでの測定の代替にはなりません。
サイトのパフォーマンスは、ユーザーのデバイスの機能、ネットワークの状態、デバイスで実行されている他のプロセス、ユーザーがページを操作する方法によって大きく異なる場合があります。実際、Core Web Vitals の各指標のスコアは、ユーザー操作の影響を受ける可能性があります。現場での測定のみが、全体像を正確に把握できます。
スコアを改善するための推奨事項
次のガイドでは、Core Web Vitals ごとにページを最適化する方法について具体的な推奨事項を説明しています。
ウェブに関する主な指標を改善する方法は多数あり、それぞれのアプローチには、状況に応じて影響、関連性、使いやすさのレベルが異なります。Chrome チームが推奨する主な改善方法については、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 は、ウェブ全体のエクスペリエンスの質を測定するためにデベロッパーが現在利用できる最良のシグナルですが、これらのシグナルは完璧なものではなく、今後の改善や追加が期待されます。
ウェブに関する主な指標はすべてのウェブページに関連し、関連する Google ツールに表示されます。これらの指標の変更は広範な影響を与えるため、デベロッパーは Core Web Vitals の定義と基準が安定していること、更新が事前に通知され、予測可能な年間の頻度で行われることを想定する必要があります。
他のウェブ バイタルは、コンテキストやツールに固有のものであり、Core Web Vitals よりも試験運用段階のものである可能性があります。そのため、定義と基準は頻繁に変更される可能性があります。
すべてのウェブバイタルの変更は、こちらの公開されているCHANGELOG に明記されます。