【AWS re:Invent 2024】セッションレポート:COP304 | Monitor end user experience with Amazon CloudWatch

記事タイトルとURLをコピーする

こんにちは。マネージドサービス部の谷内です。

本ブログでは、以下 Builders' Session についてまとめます。

  • COP304 | Monitor end user experience with Amazon CloudWatch
    • By extending application performance monitoring to end users as well as frontend experiences, AWS digital experience monitoring enhances customer experiences with an outside-in perspective of application performance across all user touchpoints. Such user experience data provides a complete picture and helps organizations turn frontend performance, user behavior, and APIs into actionable KPIs such as release velocity, adoption rate, and conversions. In this builders’ session, learn how applications behave by monitoring both real and synthetic user activity and behavior, using data from ISPs and AWS, and capturing insights from backend infrastructure and devices as well as digital user metrics. You must bring your laptop to participate.

Builders' Session の概要

概要

今日のデジタル環境において、Web アプリケーションの可用性・パフォーマンス・エンドユーザーエクスペリエンスの効率的な観測は、組織の成功にとって無くてはならないものです。

これらの観測のために、Amazon CloudWatch RUM・Amazon CloudWatch Synthetics 等が重要な役割を果たします。

本 Builders' Session では、上記 AWS モニタリングサービスについて以下7つのステップに沿ってハンズオン形式で体験できました。
 

  1. Amazon CloudWatch RUM を利用した JavaScript エラーの検出・特定
  2. Amazon CloudWatch Synthetics を利用した Web アプリケーションの監視方法
  3. Amazon CloudWatch RUM と Explore related 機能を利用した Web ページのパフォーマンス調査・分析
  4. Amazon CloudWatch RUM と Explore related 機能を利用したパフォーマンス問題の原因特定
  5. (オプション)Amazon CloudWatch Synthetics のリンク切れチェッカー機能
  6. (オプション)Amazon CloudWatch Synthetics のビジュアルモニタリング機能
  7. (オプション)Amazon CloudWatch Contributor Insights を利用したトラフィック調査

構成

尚、本 Builders' Session では、 One Observability Workshop にて提供される環境がベースとして利用されておりました。

利用したAWSサービス

  • Amazon CloudWatch
    • Amazon CloudWatch RUM
    • Amazon CloudWatch Synthetics
    • CloudWatch Logs Insights
    • Amazon CloudWatch Container Insights

ワークショップのポイント

Amazon CloudWatch RUM にて収集されるメトリクス

本セッションは、事前に用意されている CloudWatch Alarm(JavaScript エラーイベント発生に関するアラーム)の内容確認から始まりました。

このアラームで利用されているメトリクスは JsErrorCount でしたが、これは Amazon CloudWatch RUM にて収集されたものであり、他にも以下メトリクスを本セッションでは利用しました。*1

メトリクス 単位 説明
NavigationFrustratedTransaction カウント 閾値(800ms)よりも長い継続時間を持つナビゲーションイベントの数
PerformanceNavigationDuration ミリ秒 ナビゲーションイベントの継続時間
WebVitalsFirstInputDelay ミリ秒 FID(Webページ上での最初の操作からブラウザが応答するまでの時間)の値
応答性を測る指標
WebVitalsLargestContentfulPaint ミリ秒 LCP(Webページで最大の画像・動画等のコンテンツがブラウザ上に表示されるまでの時間)の値
表示速度を測る指標

Amazon CloudWatch RUM にて収集されるメトリクスは Web アプリケーションのモニタリングにとって重要ですが、 本セッションでも取り扱っている WebVitalsxxxx というメトリクスの理解には Web Vitals の知識が不可欠となります。

Web Vitals

Web Vitals とは Web上で優れたユーザーエクスペリエンスを実現するために Google が提唱した概念であり、ユーザーエクスペリエンスを向上させるために重要な指標として以下3つが Core Web Vitals として定められています。

  1. LCP(Largest Contentful Paint)
    • 表示速度を測る指標
    • 上表の WebVitalsLargestContentfulPaint が該当メトリクス
  2. CLS(Cumulative Layout Shift)
    • Webページを表示した際に生じるユーザーが予期しないレイアウトのズレの累積から算出
    • 視覚的な安定性を測る指標
    • Amazon CloudWatch RUM でもメトリクス WebVitalsCumulativeLayoutShift として収集
  3. INP(Interaction to Next Paint)
    • Webページでの操作に対して視覚的な反応が発生するまでにかかる時間
    • 応答性を測る指標
      • 2024年3月に Core Web Vitals の FID(First Input Delay)が INP に置き換わった
    • INP そのものに該当するAmazon CloudWatch RUM メトリクスは現状ない
    • FID とは異なり、入力遅延だけでなく処理遅延・表示遅延も評価対象に含む

Core Web Vitals が定められたことで、これまで曖昧だった「ユーザーの使いやすさ」について統一的な基準で考える(比較する)ことができるようになりました。

本セッションでは、「ユーザーからの検索ページの読み込みが遅い」という報告があった想定で、Web ページのパフォーマンスを調査する演習がありました。

Amazon CloudWatch RUM を利用すると、どのページの読み込みが遅いのか・どのステップに時間がかかっているのかが分かります。

※ここでは特定のプレフィックス「/bunny/」を持つページが遅いことが分かりました。

※ここでは、「コンテンツのダウンロード」に時間がかかっていることが分かりました。

調査結果から、「bunny」という用語を含む検索に対するバックエンドシステムの動作(ECS クラスターで実行)を調査する必要が出てきたため、 Amazon CloudWatch Container Insights による分析を実施しました。

ここで利用したのが、 Explore related 機能 となります。

これまでは関連のありそうな AWS リソースのメトリクスやログの確認を繰り返すということが必要でしたが、Explore related 機能 では様々な AWS リソースとサービス間の関係を視覚的にとらえるためのトポロジーマップ、関連付けられたメトリクスやログへの素早いアクセスが提供されます。

これにより、オブザーバビリティとトラブルシューティングの効率を飛躍的に向上させることが可能となります。

トポロジーマップと各種メトリクス

関連ログへのアクセス

感想

本 Builders' Session では AWS モニタリングサービスの実践的な経験を積むことができ、多くの学びを得ることができました。

私が所属する運用部門のメンバーにも是非体験してもらいたい内容でしたね。

本セッションの時間は1時間であり(Builders' Session は1時間枠が多い)、セッション内に全てを完了させることができず、セッション終了後も演習を継続して実施する必要がありました。(余談ですが、会場内で座ってPCを触れる場所を見つけるのは簡単ではないです。良さそうな場所は多くの人が利用しているため。)

Workshop にも言えることですが、ハンズオン形式のセッションで利用する演習環境はセッション終了後も2時間程度は利用できるので、セッション後に演習の続きや復習の時間を確保しておくことが重要だと思います。

来年 re:Invent に参加される方は、この辺りを意識してセッションを予約しておくと良いかもしれないですね。

*1:※Amazon CloudWatch RUM で収集可能なメトリクスの一覧は こちら