web.dev/measureとPageSpeed Insightsの違いとは何か？
/ 7 min read
Table of Contents
はじめに
web.devのこれ（web.dev/measureと呼ばれているらしい）とPageSpeed Insights（PSI）は何が違うの、というテーマです。どちらもLighthouseを使用してCore Web Vitalsを計測するためのツールという認識ですが果たして🤔
Core Web Vitalsを計測するツールのカテゴリ
予備知識として、Googleが提供するCore Web Vitalsを計測するツールには2つのカテゴリがあります。
- ラボデータを報告するツール
- 例. LighthouseやWebPageTestなど
- フィールドデータを報告するツール
- 例. CrUX
参考: https://web.dev/lab-and-field-data-differences/
ラボデータとは
- あらかじめ定義されたネットワークおよびデバイスの条件を持つ 制御された環境でウェブページを読み込む ことによって決定されます。これらの条件はラボ環境として知られており合成環境とも呼ばれることがあります。
- ラボデータを報告する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
参考: https://pagespeed.web.dev/
おわりに
web.dev/measureとPSIの違いは以下でした。
| ツール名 | 報告するデータの種類 | 対象の品質カテゴリ |
|---|---|---|
| web.dev/measure | ラボデータ | パフォーマンス、アクセシビリティ、SEOなど |
| PSI | ラボデータ+フィールドデータ | パフォーマンスのみ |
どちらもCore Web Vitalsを計測するツールというのは言葉足らずで、それに加えてウェブページの品質向上のための改善項目を提供してくれるツールでした。あと個人的にはラボデータとフィールドデータの使い分けを知れて良かったです。「このデータから得た課題を解決したらこういう属性のユーザーが良い影響を受ける」みたいなデータ基準の考え方が自分の中に芽生えました😺
余談
Core Web Vitalsの計測でラボデータとフィールドデータの間に差異が生じる一般的な理由については以下のページで語られています。
参考: https://web.dev/lab-and-field-data-differences/#why-lab-and-field-data-are-different