公開日: 2020 年 5 月 4 日、最終更新日: 2024 年 10 月 31 日
ウェブサイトの長期的な成功を考えるうえで、ユーザー エクスペリエンスの質の最適化は不可欠な要素です。Web Vitals は、ビジネス オーナー、マーケティング担当者、デベロッパーの皆様が、サイトのエクスペリエンスを数値化し、改善の機会を特定するのに役立ちます。
概要
ウェブに関する指標は、ウェブで優れたユーザー エクスペリエンスを実現する際に重要となる品質シグナルについて、統一的な目安を提供するための Google の取り組みです。
Google は長年にわたり、パフォーマンスの測定とレポート作成のためのさまざまなツールを提供してきました。これらのツールを使いこなしているデベロッパーもいますが、ツールと指標が多すぎて対応しきれないと感じているデベロッパーもいます。
サイト所有者は、ユーザーに提供しているエクスペリエンスの質を把握するために、パフォーマンスの専門家である必要はありません。Web Vitals イニシアチブは、状況を簡素化し、サイトが最も重要な指標であるウェブに関する主な指標 に集中できるようにすることを目的としています。
Core Web Vitals
Core Web Vitals は、すべてのウェブページに適用されるウェブに関する指標のサブセットです。すべてのサイト所有者が測定する必要があり、すべての Google ツールに表示されます。各ウェブに関する主な指標は、ユーザー エクスペリエンスの明確な側面を表します。現場で測定可能で、重要なユーザー中心の結果に関する実際のウェブサイト エクスペリエンスを反映します。
Core Web Vitals を構成する指標は、時間の経過とともに変化します。現在のセットは、ユーザー エクスペリエンスの 3 つの側面（読み込み、インタラクティビティ、視覚的な安定性）に焦点を当てており、次の指標（およびそれぞれのしきい値）が含まれています。
- 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 パーセンタイルの推奨目標値を満たしている場合、ページは合格と見なされます。
ライフサイクル
Core Web Vitals の指標は、試験運用版、保留中、安定版の 3 つのフェーズで構成されるライフサイクルを経ます。
各フェーズは、デベロッパーが各指標についてどのように考えるべきかを示すように設計されています。
- 試験運用版の指標 は、テストとコミュニティからのフィードバックに応じて大幅な変更が加えられる可能性がある、将来の Core Web Vitals です。
- 保留中の指標 は、テストとフィードバックの段階を通過し、安定版になるまでの明確なタイムラインが設定されている、将来の Core Web Vitals です。
- 安定版の指標 は、Chrome が優れたユーザー エクスペリエンスに不可欠と考える、現在のウェブに関する主な指標のセットです。
ウェブに関する主な指標は、次のライフサイクル段階にあります。
試験運用版
指標が最初に開発され、エコシステムに導入されると、試験運用版の指標 と見なされます。
試験運用版フェーズの目的は、まず解決すべき問題を調査し、以前の指標で対応できなかった可能性のある点を改善することで、指標の適合性を評価することです。たとえば、Interaction to Next Paint（INP）は、First Input Delay（FID）よりも包括的にウェブ上のランタイム パフォーマンスの問題に対処するために、試験運用版の指標として最初に開発されました。
Core Web Vitals のライフサイクルの試験運用版フェーズは、バグを特定し、初期定義の変更を検討することで、指標の開発に柔軟性を持たせることも目的としています。また、このフェーズではコミュニティからのフィードバックが最も重要になります。
保留中
Chrome チームが、試験運用版の指標に十分なフィードバックが寄せられ、その有効性が証明されたと判断すると、保留中の指標 になります。たとえば、INP は 2023 年に試験運用版から保留中のステータスに昇格し、最終的に FID を廃止する予定です。
保留中の指標は、エコシステムが適応する時間を確保するために、このフェーズで最低 6 か月間保持されます。より多くのデベロッパーが指標を使用し始めるため、コミュニティからのフィードバックはこのフェーズでも重要な要素となります。
安定版
ウェブに関する主な指標の候補となる指標が確定すると、安定版の指標 になります。この時点で、指標はウェブに関する主な指標になる可能性があります。
安定版の指標は積極的にサポートされており、バグの修正や定義の変更が行われる可能性があります。安定版の Core Web Vitals の指標は、1 年に 1 回以上変更されることはありません。ウェブに関する主な指標に変更があった場合は、指標の公式ドキュメントと指標の変更履歴で明確にお知らせします。Core Web Vitals は、すべての評価に含まれます。
Core Web Vitals を測定してレポートするツール
Google は、Core Web Vitals がすべてのウェブ エクスペリエンスにとって重要であると考えています。そのため、これらの指標を人気のツールすべてに表示することに取り組んでいます。次のセクションでは、Core Web Vitals をサポートしているツールについて詳しく説明します。
Core Web Vitals を測定するフィールド ツール
Chrome ユーザー エクスペリエンス レポートは、各ウェブに関する主な指標について、匿名化された実際のユーザーの測定データを収集します。このデータを使用すると、サイト所有者はページでアナリティクスを手動で計測しなくても、パフォーマンスをすばやく評価できます。また、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);
一部のアナリティクス プロバイダは 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 は、優れたユーザー エクスペリエンスを理解して提供するための重要な指標ですが、他にもサポート指標があります。
これらの他の指標は、3 つのウェブに関する主な指標のプロキシまたは補足指標として機能し、エクスペリエンスの大部分を把握したり、特定の問題を診断したりするのに役立ちます。
たとえば、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 よりも試験運用版である可能性があります。そのため、定義としきい値が頻繁に変更される可能性があります。
すべてのウェブに関する指標について、変更はこの公開CHANGELOGに明確に記載されます。