📏
web.dev/measureとPageSpeed Insightsの違いとは何か？
はじめに
web.devのこれ（web.dev/measureと呼ばれているらしい）とPageSpeed Insights（PSI）は何が違うの、というテーマです。どちらもLighthouseを使用してCore Web Vitalsを測定するためのツールという認識ですが果たして🤔
Core Web Vitalsを測定するツールのカテゴリ
予備知識として、Googleが提供するCore Web Vitalsを測定するツールには2つのカテゴリがあります。
- ラボデータを報告するツール
- 例. LighthouseやWebPageTestなど
- フィールドデータを報告するツール
- 例. CrUX
ラボデータとは
- あらかじめ定義されたネットワークおよびデバイスの条件を持つ制御された環境でウェブページを読み込むことによって決定されます。これらの条件はラボ環境として知られており合成環境とも呼ばれることがあります。
- ラボデータを報告するChromeツールは一般にLighthouseを実行しています。
- ラボテストの目的はできる限り多くの要因を制御して実行ごとに（可能な限り）一貫性/再現性のある結果を得ることです。
フィールドデータとは
- あるページにアクセスしたすべてのユーザーを監視し、それらのユーザーの個々の体験について所定のパフォーマンス指標群を測定することによって決定されます。フィールドデータは実際のユーザーの訪問に基づいているため、ユーザーの実際のデバイス、ネットワーク条件、地理的な位置が反映されます。
- 一般にリアルユーザーモニタリング（RUM）データとも呼ばれます。
- フィールドデータを報告するChromeツールはChromeユーザーエクスペリエンスレポート（CrUX）からデータを取得します。
- CrUXレポートは28日間にわたる実際のChromeユーザーからのパフォーマンスメトリクスの分布を示します。
- フィールドデータについて理解すべき最も重要なことは、それは単なる1つの数値ではなく数値の分布であるということです。 サイトを訪れる人には読み込みが非常に速い人もいれば読み込みが非常に遅い人もいます。 フィールドデータはユーザーから収集したすべてのパフォーマンスデータの完全なセットです。
ラボとフィールドの使い分け
- あるページについてフィールドデータとラボデータの両方がある場合、取り組みの優先順位付けに使用すべきはフィールドデータです。フィールドデータは実際のユーザーが体験していることを表しているため、ユーザーが何に困っているのか、何を改善すべきなのかを理解する最も正確な方法です。
- フィールドデータでは実際のユーザー体験を把握することができますが、サイトを正常に読み込むことができたユーザーに対してのみ可能です。ラボデータは低速のネットワークや下位デバイスのユーザーからのアクセスを向上させる機会を特定するために役立つ場合があります。
- ラボデータとフィールドデータの両方が効果的なパフォーマンス測定の重要な要素です。どちらにも長所と限界があり、どちらか一方だけを使用している場合はユーザー体験を向上させる機会を逃している可能性があります。
web.dev/measureが報告するデータの種類
ではweb.dev/measureが報告するデータはラボ or フィールドのどちらでしょうか。
答えはラボデータでした。web.dev/measureのページ下部FAQのHow does web.dev/measure differ from PageSpeed Insights?というセクションで回答されていました。ちなみにPSIが報告するデータの種類はラボ+フィールドとのことです。
上記の回答のまとめです。
- web.dev/measureは ラボ環境でウェブページの全体的な品質を測定する。 パフォーマンス、アクセシビリティ、SEOなどLighthouseの複数の品質カテゴリに関するインサイトを提供する。
- PSIはパフォーマンスに焦点を当てラボ（Lighthouse）とフィールド（CrUX）の両方のデータを使用してパフォーマンスの概要を提供する。
- PSIはフィールドでオリジンレベルの洞察を提供する。web.dev/measureはラボで1つのURLを深く掘り下げることを目的とする。
- 「オリジンレベルの洞察」とは？と思って調べましたが明確な答えを見つけられませんでした。以下の記事で言及されているOrigin Summary（サイト全体の評価）のことかなーと予想しています。
それぞれのツールの測定結果
実際にweb.dev/measureとPSIの測定結果を見てみます。
web.dev/measure
以下の項目が計算されています。
- Performance
- Accessibility
- Best Practicies
- SEO
PSI
以下の項目が計算されています。
- Performance
おわりに
web.dev/measureとPSIの違いは以下でした。
| ツール名 | 報告するデータの種類 | 対象の品質カテゴリ |
|---|---|---|
| web.dev/measure | ラボデータ | パフォーマンス、アクセシビリティ、SEOなど |
| PSI | ラボデータ+フィールドデータ | パフォーマンスのみ |
どちらもCore Web Vitalsを計測するツールというのは言葉足らずで、それに加えてウェブページの品質向上のための改善項目を提供してくれるツールでした。あと個人的にはラボデータとフィールドデータの使い分けを知れて良かったです。「このデータから得た課題を解決したらこういう属性のユーザーが良い影響を受ける」みたいなデータ基準の考え方が自分の中に芽生えました😺
余談
Core Web Vitalsの測定でラボデータとフィールドデータの間に差異が生じる一般的な理由については以下のページで語られています。
Discussion