ユーザー エクスペリエンスの質の最適化は、ウェブ上のあらゆるサイトが長期的に成功を収めるうえで重要です。ビジネス オーナー、マーケティング担当者、デベロッパーのいずれの方でも、Web Vitals は、サイトのエクスペリエンスを定量化し、改善の機会を特定するのに役立ちます。
概要
ウェブに関する指標とは、ウェブ上で優れたユーザー エクスペリエンスを提供するために不可欠な品質シグナルに関する統合ガイダンスの提供を目的とした Google の取り組みです。
Google は、長年にわたり、パフォーマンスを測定して報告するためのツールを数多く提供しています。これらのツールを使いこなすエキスパートもいれば、ツールと指標が豊富にあるなかで対応が難しい開発者もいます。
サイト所有者が、ユーザーに提供しているエクスペリエンスの品質を理解するために、パフォーマンスのエキスパートでなくてもかまいません。ウェブに関する指標のイニシアチブは、環境を簡素化し、サイトが最も重要な指標であるウェブに関する主な指標に集中できるようにすることを目的としています。
Core Web Vitals
Core 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 トラックの指標は、試験運用版、保留中、安定版という 3 つのフェーズで構成されるライフサイクルを経ます。
以下の表は、ウェブに関する主な指標の現在ライフサイクル全体をまとめたものです。
各フェーズは、各指標についての考え方をデベロッパーに伝えるためのものです。
- 試験運用版指標は、ウェブに関する主な指標の見込みであり、テストやコミュニティからのフィードバックによっては、まだ大幅な変更が行われている可能性があります。
- 保留中の指標は、テストとフィードバックの段階に合格し、安定するまでの明確なタイムラインが設定された今後の Core Web Vitals です。
- Stable 指標は、Chrome で優れたユーザー エクスペリエンスに不可欠なウェブに関する主な指標の現在のセットです。
試験運用版
最初に開発された指標がエコシステムに加わるときは、試験運用版指標と見なされます。
テストフェーズの目的は、まず解決すべき問題を調査し、可能であれば以前の指標で対処できなかった問題に対して反復処理を行うことで指標の適合性を評価することです。たとえば、Interaction to Next Paint(INP)は当初、First Input Delay(FID)よりも包括的にウェブに存在するランタイム パフォーマンスの問題に対応するための試験運用版の指標として開発されました。
ウェブに関する主な指標のライフサイクルの試験運用フェーズでは、指標の開発に柔軟性を持たせることも目的とし、バグを特定し、初期定義の変更を調査します。この段階では、コミュニティからのフィードバックが最も重要になります。
保留
試験運用版の指標について十分なフィードバックがあり、その有効性が証明されたと Chrome チームによって判断されると、その指標は保留中の指標になります。保留中の指標は、エコシステムが適応する時間を確保するために、このフェーズで最低 6 か月間保持されます。保留中のフェーズから指標を改善するための残りのハードルは、移行期間を待つことです。この指標を使用するデベロッパーが増えているため、コミュニティからのフィードバックもこのフェーズの重要な要素です。
安定的
Core Web Vitals の候補の指標が確定すると、その指標は安定した指標になります。Core Web Vitals のトラックに含まれる指標の場合、その指標はウェブに関する主な指標の 1 つになります。
安定した指標は積極的にサポートされており、バグの修正や定義の変更が行われる可能性があります。Stable Core Web Vitals の指標が 1 年に 1 回以上変わることはありません。ウェブに関する主な指標に変更があった場合は、指標の公式ドキュメントと指標の CHANGELOG にその旨が明記されます。すべての評価に Core Web Vitals が含まれます。
Core Web Vitals を測定して報告するためのツール
Google は、Core Web Vitals はすべてのウェブ エクスペリエンスに不可欠であると考えています。そのため、Google は一般的なツールすべてでこれらの指標を表示する取り組みを行っています。以下のセクションでは、ウェブに関する主な指標をサポートするツールについて詳しく説明します。
ウェブに関する主な指標を測定するためのフィールド ツール
Chrome ユーザー エクスペリエンス レポートでは、ウェブに関する主な指標ごとに、匿名化された実際のユーザー測定データが収集されます。このデータにより、サイト所有者はページの分析を手動で計測することなく、パフォーマンスを迅速に評価できます。また、PageSpeed Insights や Search Console のウェブに関する主な指標レポートなどのツールが強化されます。
LCP | FID | CLS | |
Chrome ユーザー エクスペリエンス レポート | ✔ | ✔ | ✔ |
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, onFID, 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);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
web-vitals ライブラリを使用して Core Web Vitals のデータを測定し、分析エンドポイントに送信するようにサイトを設定したら、次のステップではそのデータの集計とレポートを行い、ページがページアクセスの 75% 以上で推奨しきい値を満たしているかどうかを確認します。
一部の分析プロバイダには Core Web Vitals の指標のサポートが組み込まれていますが、そうでないプロバイダでも、自社のツールでウェブに関する主な指標を測定できる基本的なカスタム指標機能を組み込む必要があります。
その一例として、ウェブに関する指標レポートがあります。サイト所有者は、このレポートで Google アナリティクスを使用して、ウェブに関する主な指標を測定できます。他の分析ツールを使用してウェブに関する主な指標を測定する方法については、現場でのウェブに関する指標の測定に関するベスト プラクティスをご覧ください。
また、Web Vitals の Chrome 拡張機能を使用して、コードを記述せずに各ウェブに関する主な指標を報告することもできます。この拡張機能は、web-vitals ライブラリを使用してこれらの各指標を測定し、ウェブをブラウジングするユーザーに表示します。
自社サイト、競合他社のサイト、ウェブ全体のパフォーマンスを把握するのに役立ちます。
LCP | FID | CLS | |
---|---|---|---|
web-vitals | ✔ | ✔ | ✔ |
Web Vitals 拡張機能 | ✔ | ✔ | ✔ |
また、基盤となるウェブ 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 は、優れたユーザー エクスペリエンスを理解し実現するための重要な指標ですが、他にも重要な指標があります。
こうした他のウェブに関する指標は多くの場合、ウェブに関する主な指標の代用または補足的な指標として機能し、エクスペリエンスの大部分を捕捉したり、特定の問題の診断に役立てたりします。
たとえば、Time to First Byte(TTFB)と First Contentful Paint(FCP)の指標はどちらも読み込みエクスペリエンスに不可欠な要素であり、どちらも LCP(遅いサーバー応答時間やレンダリング ブロック リソース)の問題の診断に役立ちます。
同様に、Total Blocking Time(TBT)やTime to Interactive(TTI)などの指標は、FID に影響する潜在的なインタラクティビティの問題を検出して診断するうえで不可欠なラボの指標です。ただし、これらはフィールド測定が不可能であり、ユーザー中心の成果を反映していないため、Core Web Vitals セットに含まれていません。
進化するウェブに関する指標
ウェブに関する主な指標と Core Web Vitals は、ウェブのエクスペリエンスの質を測定するために現在利用可能な最適なシグナルを表しますが、これらのシグナルは完全ではなく、将来的な改善や追加が想定されています。
ウェブに関する主な指標はすべてのウェブページに関連しており、関連する Google ツール全体で注目されています。これらの指標の変更は広範囲に影響を及ぼします。そのためデベロッパーは、ウェブに関する主な指標の定義としきい値が安定し、更新が事前に通知され、予測可能な年単位の頻度で行われることを期待する必要があります。
その他のウェブに関する指標はコンテキストやツールに固有であることが多く、Core Web Vitals よりも試験運用版になることがあります。そのため、その定義としきい値は、より高い頻度で変化する可能性があります。
すべてのウェブに関する指標については、こちらの一般公開の CHANGELOG に変更内容が明記されます。