Webエンジニアの茄子です。
本シリーズでは、当社でパフォーマンス計測に使用しているSpeedCurveを取り上げます。
SpeedCurve はウェブサイトのパフォーマンスモニタリングサービスです。設定された間隔でウェブサイトの速度・リソースサイズなどを計測し、データを収集・可視化してくれます。PageSpeedInsightsと同じ、Lighthouseによる計測に基づいています。
サービスの概要
計測
・Synthetics
固定のサーバーからの定点観測です。PSIに近いです。
公開されているサイトは計測対象にできるので、自分達のサイト以外も計測できます。
当社ではRUMは利用していませんので、次回以降紹介するデータはすべてSyntheticsのものになります。
・RUM (Real User Monitoring)
ユーザーからのレポートを収集したデータです。実際のデバイスによる差やその偏り、通信環境等の影響も含んだデータが得られます。
サイト上で追加のJavascriptを読み込ませる必要があります。
価格
公式ページ： https://www.speedcurve.com/pricing/
（金額は執筆時点のドル円レートで計算しています）
ベースとなる価格の単位はこちら
Synthetics ： $15 (¥2,016) / 1000 checks / 月
RUM : $135 (¥18,151) / 月100万ページビュー / 月
これらをサイトの必要量に合わせて組み合わせる形です。年払いで20%オフになります。公式ページに Starter / Small / Medium / Large という既成プランがありますが、内容チェック数は Build your own で組み合わせた場合を年払いにしたものと同じです。
Synthetics は、一回の計測ごとにばらつきを抑えるために最低３回試行されます。その中央値の回が採用され、デバイス・時刻・国・ページ数の組み合わせ分の回数が必要になります。（当社ではばらつきをより抑えるため試行を5回に設定しています）
例えば、mobile/desktop × 日本のみ × 2ページ × 一日8回 (３時間ごと) の場合では、一日96回＝月2880回分必要になるので、月3000回 $45 (¥6,050)、年払いなら$432 (¥58,063) のプランが必要になります。
RUMはサンプルレート( 0~100% )を設定できるので、サイトのアクセス数分まるごとにする必要はありません。超えた場合にその分課金されることはありませんが、アクセスのスパイクが見込まれる場合は多少余裕を持った設定にすることをおすすめします。
各タブの解説
ログインした後の左にあるメニューの各タブを簡単に解説していきます。
Home
直近の結果からWeb VitalsやLighthouseによる改善点の指摘、いくつかの指標の一週間の推移がピックアップされて表示されます。
Changes
設定したパフォーマンスのアラートや、後に解説するDeployment（リリース時のメモ＋計測）が表示されます。
（この画像ではアラートに関しては特に出ていない状態です。）
Status
設定したパフォーマンスバジェットそれぞれに関して現在満たせているかが一覧できます。
Vitals
Web Vitalsの各値を確認できます。それぞれ、基準の値のバーと、詳細が付いています。
Improve
Lighthouseのスコアと、分析結果による改善点がリストアップされます。
Bookmarks
実行結果の詳細ページや後に紹介するグラフ上から、それぞれの計測回をブックマークすることができるので、その一覧が表示されます。
Favorites
Synthetics, RUMで取れたデータを自由に組み合わせて、独自のダッシュボードの作成・閲覧ができます。
RUM
RUMによるデータを閲覧できます。リアルタイムなデータも確認できます。こちらは公式サイトの紹介記事をご覧ください。 https://www.speedcurve.com/blog/new-rum-live-and-page-views-dashboards/
Synthetics
Syntheticsによる計測データを閲覧できます。視点ごとにまとめられたサブページが用意されています。
設定
計測のための基本的な設定を紹介します。
計測するURLを指定する際にまず条件が必要なので、候補となるデバイス、地域、時刻を登録します。その後、ADD SITE を押します。
ADD SITEを押すとこのような画面が出ます。
計測の条件を選び、計測を行うURL（複数可）を登録します。
注意点など
・CHECKS (各回の試行回数：最低３回) はサイトや地域など条件ごとに変えることはできません。
・EMULATEDと書いてあるように、モバイルデバイスは実機ではありません。
・あるサイトへの実行を停止したい場合、実行時間を全てオフにするとPAUSEDとなります。設定を削除する必要はありません。
終わりに
次回は、Syntheticsタブについて詳しく紹介します。