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