ウェイブSREの白戸です！
今回は、AWS re:Invent 2021（11月29日）にて発表された Amazon CloudWatch RUM を Coolmic に導入、及び Grafana での監視を行いましたので、ご紹介いたします！
↓ Amazon CloudWatch RUM の存在を知った時の白戸。
はじめに
本記事では、CloudWatch RUM の導入前に知りたかった情報を主に記載しております。
▫ CloudWatch RUM の料金は、10万イベントごとに1USDだが、1度のサイトアクセスで何イベント発行される？
▫ CloudWatch Logs に収集されるデータサイズは何GBになる？
▫ etc
また、『ウェイブSREが普段どんな実務をしているのか？』を読者の方に少しでもお伝えできればと思います😚
目標
以下の２つが目標ですが、まずは①を達成するべく、RUM を導入しました。
①フロントエンドパフォーマンス悪化自動検知
②フロントエンドパフォーマンスが売上へ与える影響の可視化
アーキテクチャ
CloudWatch RUM 用のスクリプトはGTMから配信しました。
CloudWatch RUM 設定
コスト削減のため、以下の設定を行いました。
▫ 測定対象を、Performance telemetry のみ有効
▫ 測定対象ページを、主要ページのみ有効
▫ 集計サンプル数を、1 / 100 にして間引き対応
上記すべて、CloudWatch RUM で設定できます。
ただ、/titles/[:id] みたいな Path を正規表現で設定する方法がわからなかったので、GTMで対応しました。
CloudWatch RUM イベント数
Google Chrome の DevTools で確認可能でした。
（以下、1回のアクセスで11イベント発行された例）
実際に発行されるイベント数は、導入してみないとわからないので、集計サンプル数を間引きして初期導入することをオススメします。
CloudWatch Log データサイズ
あくまで目安ですが、50万イベントで、60MBくらいでした。
サイズが小さかったので、長期保存もできそうです🙌
CloudWatch Log データ構造
event_type ごとに関連情報が含まれております。
例えば、LCPの場合、event_type が com.amazon.rum.largest_contentful_paint_event となっており、event_details.value に実際の数値(ms)が含まれていました。
以下、ログの詳細です（一部省略）
{
"event_type": "com.amazon.rum.largest_contentful_paint_event",
"metadata": {
"browserName": "Chrome",
"browserVersion": "96.0.4664.92",
"osName": "Android",
"osVersion": "11",
"deviceType": "mobile",
"domain": "coolmic.me",
"pageId": "/episodes/1111",
},
"event_details": {
"version": "1.0.0",
"value": 1010.299
}
}
Grafana ダッシュボード
主要ページごとにWeb Vitals（LCP, FID, CLS）を可視化しました。
かなり改善し甲斐のある数値でした😇
Grafana アラート
LCPのアラートを例にすると、『LCPの75パーセンタイルが、5秒以上を5分間継続した場合、アラート発行』にしました。
現状のパフォーマンスが良いとは言い切れない事実を受け入れつつ、悪化を防ぐための設定です。
最終的には、『LCPの75パーセンタイルが、2.5秒以上を5分間継続した場合、アラート発行』にできれば理想です💪
75パーセンタイルにした理由としては、Googleの指標と合わせました。
Googleが閾値を75パーセンタイルにした背景などは、公式記事をご参照下さい。
まとめ
今回の対応によりフロントエンドのパフォーマンス悪化を防ぐことはできそうです。
展望として、フロントエンドパフォーマンスが売上へ与える影響の可視化も行うことで、パフォーマンスに対する意識をチーム全体で底上げできればと思います！
