前回はデプロイタグの付け方を紹介しました。( https://techlab.q-co.jp/articles/95/ )
前回までは用意されているグラフやグラフの作り方を紹介してきましたが、今回はより詳しく調べたい時にできることをいくつか紹介します。
注意点
初めに、今回の内容の使い所についてです。
SpeedCurveでは最低３回の試行回数が必要とされていることからもわかるように、同じ環境からの計測でもそこそこブレがあります。これは、見る指標にもよりますが３回やっていてもなお、１・２セットでは判断しかねる程度です。（そのため当社ではこれを５回に設定しています）
ですので、今回のような一歩踏み込んだ調査はある程度のサンプルサイズがある状態でグラフを見て、本当に変動があったのかを見極めてから行うことをおすすめします。
Compare Test
指定した二回の計測結果を並べて表示し、画面の差異や変化率を見ることができます。また、どちらかの回でしか取得されていないリソースも見れたりと、見やすくまとまっています。
まず、変化があった前後のどこかのテストの点（グラフの線上）をクリックします。こんかいはこの変化の前後を取り上げます。クリックしたら出てくるメニューからCompare Test を押します。
この時点では何も起こりません。
続けて、もう一点クリックします。
すると２つの結果が並べて表示されます。
ファーストビューとタイムラプス図が並べて表示されます。
指標ごとの比較と、それぞれ変化率も出ます。
Detailed Results
実行結果を表示する元になっている、詳細なログデータです。生データといってもいいかもしれません。
整形は一応されていますが、普通にログって感じのものなので見やすいものではありません。Compare Test では分からない特定のことを調べたい時に活用します。
計測点をクリックして出るメニューのView Test から単体のテストの結果ページに飛べます。そしてウォーターフォール図の下部に Detailed Results というリンクがあります。そこから各実行回の詳細ログにリンクされています。
計測結果ページ↓
Detailed Results から開く目的の詳細ログページ↓
ブラウザの開発タブで見れるデータです。試行された回数分あり、最初の小さなテーブルにある Run X のXが採用された実行回となっています。
Content Breakdownタブ
アセットの差分を出す
Detailsタブは下部にソート可能なリクエスト（リソース）のテーブルが付いています。見出し行をクリックするとソートできます。
一部抜粋して自分でスプレッドシートにまとめるなどすることで、特定のドメインからのリソースや特定のスクリプトなどを追う時に役に立ちます。
Lighthouseの結果
Lighthouseの結果の詳細も同様に保存されていてアクセスできます。
先程と同様ウォーターフォール図の下部から飛べます。
結局この結果画面のウィンドウを２つ並べて眺めるということもよくあります。
まとめ
今回はダッシュボードより詳しい調査をする場合の方法を紹介しました。つまるところ「生データを見る」ということですので、調査内容の重要度を鑑みてご活用ください。
次回は独自の計測指標を追加する方法を紹介します。