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