目次
Webエンジニアの茄子です。
前回はSpeedCurveの概要を紹介しました。( https://techlab.q-co.jp/articles/91/ )
今回はSyntheticsタブに用意されている、各視点ごとに集計されたページについてより詳しく紹介します。
Synthetics 計測について
Syntheticsによる計測について軽くおさらいします。
SyntheticsはSpeedCurveのサーバーからの定点観測的な計測方法で、設定された時刻ごとに、地域・デバイス（＋ブラウザ）の組み合わせごとに計測対象のサイトにアクセスして計測を行います。
条件が毎回揃っていてデバイスやトラフィックの影響を受けづらいので、RUM（実際のユーザーデータ）よりも細かい変更の影響を追うのに適しています。
また、公開されているサイトであれば計測できるので、競合サイトや目標・目安としているサイトを追うことにも利用できます。
各ページ紹介
Site
前回のHomeタブなどでは１ページずつでしたが、ここでは登録されている各ページを並べて出してくれます。画面遷移図の下に、Lighthouse Score、Content Size (読み込みリソースサイズ)、Improvementsと続きます。
Web Vitalsの比較が主な用途です。目安となる数値で色分けされているので、概観の把握や目標設定といった目的が主になります。
Page
Siteと似たような内容でこちらは１ページずつですが、時間による推移のグラフが主体となっています。
デプロイの影響や、改善の結果確認など、基本的には時系列になっていた方が確認しやすいと思います。
Deploys
後に解説するAPIによって記録されたDeployment（リリース時に行う計測）を比較できます。特別な計測というわけではなく、時刻ごとに起こるものが追加で起こります。
前後の各スコアを横に並べてどれくらい上下したかを示してくれます。レンダリングの動画を並べて再生することも可能です。
計測頻度が元々ある程度多いと（数時間ごとなど）結果は元々とれているものと変わりませんが、比較的長期間をまたいで比較するとき等に便利です。
Responsive
モバイルとデスクトップを比較するグラフを見られます。任意の指標（SpeedIndex, Page Load 等々なんでも）に加えて、画像比較、リソースサイズの比較を出せます。
Assets
JS・CSS・画像・動画といったアセットのサイズの詳細ページです。
その中でも特に取得に時間がかかっているもの、サイズが大きいものが挙がってくる他、積み上げグラフが表示されます。意外と発見があるページです。読み込みブロッキングの原因になっているかどうかも確認できます。
First & Third Party
サードパーティーのスクリプトにかかる時間やサイズがまとまったページです。
設定画面から時系列で追うドメインをあらかじめ設定しておくと、そのサードパーティーに対しては時系列データを出すこともできます。
Javascript
Javascriptを抜き出したレンダリングのウォーターフォール図、実行にかかった時間をドメインごとにした表が出ます。
ウォーターフォール図では、ブロッキングの原因になっているリソースが強調して表示されます。
フレームワークの動作や動作が変わった時の確認になることもあります。
Benchmarks
設定画面から、競合相手として登録したサイトの計測結果を比較して表示できます。URLのLABELを合わせておく必要があります。
こちらでは設定したデータがありませんので、公式ドキュメントのサンプルをご覧ください。
また、SpeedCurveが選定したサイトを一覧にした Page Speed Benchmarks というページも公開されています。合わせて参考にしてください。
Tests
実行された計測の各回が一覧できます。
各回を開くとこのようなテスト詳細に飛べます。この画面は、他のページのグラフにプロットされている点からも View Test というリンクで飛ぶことができます。
終わりに
今回はSyntheticsタブにデフォルトで用意されているグラフ・表ページを紹介しました。
次回は当社で使用しているFavoritesのグラフの内容を紹介します。