Webパフォーマンスの計測手法

# はじめに
パフォーマンスの計測手法にはいくつか種類があり、この記事では、その種別や関連用語について記述しています。
具体的な計測方法や、計測ツールの使い方には触れていませんので、ご了承ください。


# Synthetic monitoring と RUM
主な計測手法に、Synthetic monitoring（合成モニタリング）と RUM（リアルユーザーモニタリング）があります。この2つはよく対比されますが、特に優劣はなく、それぞれ異なるアプローチでパフォーマンスを監視するものです。

https://developer.mozilla.org/en-US/docs/Web/Performance/Rum-vs-Synthetic

https://developer.mozilla.org/ja/docs/Glossary/Synthetic_monitoring

## Synthetic monitoring とは
WebサイトやWebアプリケーションに対し、可能な限り一貫性のある環境（ラボ環境）で、エンドユーザー体験をシミュレートして測定する手法です。測定されるデータは、実際のユーザーを模倣した（合成的に生成された）データであり、実際のユーザーのものではありません。
代表的な Synthetic monitoring ツールとして  [WebPageTest](https://www.webpagetest.org/) や [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) があります。
環境変数（地理、ネットワーク、デバイス、ブラウザなど）を制御した測定により、パフォーマンス問題の原因特定に役立ちます。

## RUM とは
実際のユーザー体験のパフォーマンスを測定する手法です。
サードパーティのスクリプトが各ページにスクリプトを注入し、リクエストごとに測定する方法が一般的です。イメージ的には Google Analytics が近いと思います（Google Analytics ≠ RUM）。
ユーザーごとの環境変数がどのような影響を与えるか、アプリケーションがどのように使用されているか、ユーザーの傾向などを把握するのに役立ちます。


# ラボデータとフィールドデータ
Googleでは、Core Web Vitals やWebパフォーマンスを計測するためのツールをいくつか提供しており、それらのツールで取得できるデータを、「ラボデータ」と「フィールドデータ」に分類しています。

### ラボデータとは
「事前に定義されたデバイスとネットワーク設定により、制御された環境（ラボ環境・合成環境）で収集されたデータ」、つまり Synthetic monitoring のデータと同等です。
[WebPageTest](https://www.webpagetest.org/)、[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)、[PageSpeed Insights](https://pagespeed.web.dev/) を通じて確認できます。

### フィールドデータとは
「サイトを訪れる実際のユーザーから収集したデータ」、つまり RUM のデータと同等です。
[CrUX（Chrome User Experience Report）](https://developer.chrome.com/docs/crux/)、[Chrome DevTools の Performanceパネル](https://developer.chrome.com/blog/devtools-realtime-cwv/)、[PageSpeed Insights](https://pagespeed.web.dev/) を通じて確認できます。

## どちらを参考にすべきか
パフォーマンス改善の優先順位付けに使用すべきはフィールドデータです。
また、[SEOにおいても、フィールドデータが使用される](https://skillshare.biz/chrome-dev-summit-2020-field-data/)ことが語られているため、フィールドデータを参考にするほうが効果的です。
ただし、どちらにも長所と短所があり、片方しか使用していない場合、UX・パフォーマンス改善の機会損失につながる可能性があります。

https://web.dev/articles/lab-and-field-data-differences


# 外形監視という言葉
この記事では、MDN Web Docsに基づいて「Synthetic Monitoring = 合成モニタリング」としていますが、監視ツールを提供している [Splunk](https://www.splunk.com/ja_jp/products/synthetic-monitoring.html) や [New Relic](https://newrelic.com/jp/platform/synthetics) などのサービスでは、「外形監視」と訳しています（各サービスでは「外形監視」を以下のように定義しています）。
> 外形監視は、行動スクリプトを使ってWebサイトやアプリケーションでのエンドユーザー操作をシミュレートする、Webパフォーマンスの監視技法の1つです。

引用元：[外形監視とは？ | Splunk](https://www.splunk.com/ja_jp/data-insider/synthetic-monitoring.html)

> 外形監視とは、WebサイトやWebアプリケーションを、システムが稼働するネットワークの外側からアクセスし、ユーザー視点で利用可能な状態にあるかどうかを機械的に監視することです。

引用元：[外形監視とは？内部監視との違いや、安定運用のための方法を紹介 | New Relic](https://newrelic.com/jp/blog/best-practices/what-is-synthetics)

一方、この「外形監視」という日本語訳に否定的な意見もあるようで、Synthetic は直訳で「合成」であることや、Synthetic Data に由来する手法であることから、「外形監視」は正確ではないと指摘しています。

https://takehora.hatenadiary.jp/entry/2019/07/05/012036

### Synthetic Data とは
> Synthetic data are artificially generated data rather than produced by real-world events. (...) Data generated by a computer simulation can be seen as synthetic data.
>
> 現実世界の事象から生成されたデータではなく、人工的に生成されたデータのことである。（中略）コンピュータ・シミュレーションによって生成されたデータは、合成データと見なすことができる。

引用元：[Wikipedia](https://en.wikipedia.org/wiki/Synthetic_data)

## Synthetic Monitoring = 外形監視なのか

:::note info
以下、個人的な見解
:::

Synthetic Monitoring は外形監視ではありません。

前述した外形監視の特徴を挙げると
1. エンドユーザー操作をシミュレート
2. 外部ネットワークからのアクセス

前者は Synthetic Monitoring に当てはまりますが、後者は外見監視特有の要素です。

また、外形監視の定義にも曖昧な部分があります。
New Relic の外形監視にはRUMも含まれており、「Synthetic Monitoring = 外形監視」とするには違和感があります。
> New Relicの外形監視は、複数のグローバルな地域からユーザー体験そのままに自社のWebサイトをチェックできる、リアルユーザー監視です。

引用元：[外形監視とは？内部監視との違いや、安定運用のための方法を紹介 | New Relic](https://newrelic.com/jp/blog/best-practices/what-is-synthetics)

一般的には外部ネットワークから監視するケースが多いため、外形監視の方がイメージしやすいのかもしれません。もしかすると、ツールの進化によって言葉の境界が曖昧になったのかもしれません。
外形監視という言葉自体、再定義する必要があると感じます。