終わりにWebエンジニアの茄子です。前回はSyntheticsタブの内容を紹介しました。https://techlab.q-co.jp/articles/92/今回はFavoritesタブを紹介します。当社で担当者が最もよく確認に使っている画面です。Favoritesタブの使い方Favoritesタブは各ユーザーが計測結果から任意の指標を組み合わせて作るグラフ(CHART)集のページです。ユーザーが作り込む部分であり、最初は何もありません。グラフ作成の仕方を紹介します。選ぶとポップアップが出るので、名前を付けます。他のオプションはそのままで問題ありません。ボタンがあるので押します。いうのは、パフォーマンスを予算制約として捉える考え方を実践するための設定で、グラフ内の指標を一つ対象に設定した閾値あるいは変動幅を超えた時アラートを出せる機能です。重要な指標には設定しておけば変動に気付けます。作成すると以下のように追加されていきます。右上のメニューから表示のオプションを設定できます。計測値)・トレンド(点線)を表示するかなどがあります。Syntheticsタブの問題点グラフを作るにあたって、前回の記事で紹介したSyntheticsタブの問題点を説明しておきます。Syntheticsタブは意味合いのみでまとまっていてスケールの大きく違うメトリクスが同じグラフに入れられていました。0.1~1秒くらいの変動幅の指標と5~10秒の変動幅の指標が同居しているなどです。これでは、小さい値は変化しても分かりづらいです。グラフの見出しをクリックして非表示に切り替えることで、指定の指標のみにすることはできますが、やはり一目でわかる方が望ましいです。当社の用途としては、より多くの指標に関して時系列の推移が見たいというのが主目的ですので、その目的に沿ったグラフ・ダッシュボードにする必要がありました。グラフ当社で作成したグラフを紹介します。当社のサイトのデータが見やすくなるように作成されたもので、サイトの種類や計測の目的によっては適していない可能性があります。VitalsFIDはRUMでないと取れないのでCLSとLCPのみです。重要ですので、変化があった際には詳しく調査が必要です。いう指標に置き換わる予定だそうです。)Initialアクセスの初期動作に関する指標をまとめたものです。それほど変化が多い部分ではないです。ことでサーバーの応答速度です。設定で独自の指標を追加しています。Loadedとほぼ一緒ですが)赤い線がパフォーマンスバジェットを設定した場合に表示される線です。Loadページのローディング後半の指標です。20sくらいの幅です。ここを一生懸命縮めようということはありませんが、広告タグなどの影響が判明して調査のきっかけになることがあります。LighthouseLighthouseスコアもSEO的に重要です。各回の詳細ログから実際のLighthouseの結果画面も確認可能です。Sizeここだけはスケール問題を解消できていないのですが、サイトの構成上やむを得ない部分も大きく、外部スクリプトなど必ずしも速度に直結していないことからこのようなまとめ方になっています。サイト・フレームワークの構成や、開発の段階によって重要度が大きく変化するところだと思います。Sizeは動き易いです。Requestsこちらもそれほど大きく気にするところではありませんが、なんらかの変化があった時に気付けることがあります。分作って、チームで定期的に確認しています。最初は少々骨が折れますが、次回解説するデプロイタグと合わせて、変更とその影響が追いやすくなっています。一目で見れることによって、並んだ別のグラフとの連動などもわかりやすく非常に役立っています。終わりに次回は、デプロイを記録した線を見られるようにする機能を紹介します。ExtensionカテゴリーHTMLJavascriptNode.jsNext.jsReactTypeScriptパフォーマンスShopifyNewRelicDockerCI/CDGitStrapiJestテストDatabaseAWSTechQLab(テックラボ)とは?株式会社キューのWeb技術者によるWeb技術・ノウハウを発信するブログです。