Amazon Web Services ブログ

リアルユーザーモニタリングを使用した Amazon CloudFront のパフォーマンステストの準備と実行

このブログ記事は、AWS エンタープライズサポート担当テクニカルアカウントマネージャーの Tanya Pahuja と Sumit Bhardwaj 、および AWS シニアソリューションアーキテクトの Karan Desai によって書かれました。

消費者向けのウェブサイトやモバイルアプリでは、ユーザーの画面にコンテンツが読み込まれるスピードが、ユーザーのブラウジング体験やビジネスの成功に直接影響します。コンテンツの読み込みに時間がかかると、ユーザーはトランザクションを完了する前にページを放棄する可能性があり、収益に影響します。Amazon CloudFront のようなコンテンツ配信ネットワーク（CDN）を利用すれば、データ、動画、アプリケーション、API を低遅延かつ高速で世界中のユーザーに安全に配信し、ウェブサイトのパフォーマンスを向上させることができます。HTML 、画像、スタイルシート、JavaScript ファイルなどのウェブサイトの静的コンテンツは、CloudFront のエッジロケーションやリージョン別エッジキャッシュにキャッシュされたコピーから提供できます。新しく更新されたコンテンツや API コールなど、キャッシュできない動的コンテンツは、CloudFront によってオリジンサーバーからフェッチされ、AWS グローバルネットワークを使用して高速かつ最適化された経路で配信されます。

パフォーマンスを向上させるには、CloudFront ディストリビューションを設定することで、ウェブサイトのトラフィックが CloudFront のグローバルに分散されたエッジネットワーク経由で配信されるように設定するだけです。CloudFront を使用してコンテンツを配信するように設定したら、ウェブサイトのパフォーマンスを監視して、得られるメリットを理解し、パフォーマンスをさらに最適化するために設定を変更する必要があるかどうかを確認する必要があります。この投稿では、Amazon CloudWatch Real User Monitoring (RUM) を使用してウェブサイトのパフォーマンスを監視し、CloudFront を使用してコンテンツを配信した場合と使用しない場合のユーザーエクスペリエンスの違いに関する洞察を得る方法を紹介します。

CloudFront に対する模擬モニタリングとリアルユーザーモニタリング（RUM）

通常、ウェブサイトのパフォーマンスを測定するために、2 つの異なるタイプのモニタリングを使用することができます。

模擬モニタリング： ユーザーのウェブサイトへのジャーニーとインタラクションのシミュレーションを使用して、ウェブサイトのパフォーマンスを監視する方法です。これは、地域、ネットワーク、デバイス、およびブラウザなどの変数が事前に決定され、変更されない制御された環境で行われます。外部変数を制御することは、バックエンドのインフラおよびアプリケーション側にパフォーマンスのボトルネックが存在する場所を理解し、パフォーマンスの問題の原因を特定するのに役立ちます。しかし、これは必ずしもユーザーが実世界で経験することを表すものではありません。

リアルユーザーモニタリング： パッシブ・モニタリングの一種で、実際のユーザーとウェブサイトとのやり取りを分析するものです。通常、アプリケーション内にコードの一部を挿入することで、ユーザーのブラウジング体験に影響を与えることなく、クライアントやブラウザからのフィードバックを収集します。これにより、顧客がウェブサイトとどのようにやり取りしているか、また、特定のデバイス、ブラウザ、およびネットワーク上でのウェブサイトのパフォーマンスに関する顧客の経験について洞察することができます。

アーキテクチャー概要

まず、Application Load Balancer（ALB）の背後にある Amazon Elastic Compute Cloud（Amazon EC2）インスタンス上にウェブアプリケーションをデプロイすることから始めます。既存のウェブアプリケーションを使用するか、このチュートリアルに従ってサンプルの 3 層ウェブアプリケーションをデプロイすることができます。公開 ALB エンドポイント URL を使って、ブラウザからこのウェブサイトにアクセスします。これは CloudFront を実装する前のユーザーのベースライン体験を表しています。

十分なデータが得られたら、このディストリビューションの「オリジン」として先ほど使用したのと同じ ALB を指す CloudFront ディストリビューションを構成します。CloudFront は各ディストリビューションに一意のドメイン名を提供します。それでは、ブラウザからウェブサイトにアクセスしますが、今回は CloudFront の URL を使用します。これは CloudFront が実装された後のユーザーエクスペリエンスを表しています。2 つのテストから取得したデータを比較することで、コンテンツ配信のために CloudFront を使用することでユーザーが得られるパフォーマンスの向上を理解することができます。次の図はテストのアーキテクチャーを示しています。

図 1：ソリューションのアーキテクチャー図

CloudFront に対する CloudWatch モニタリング

RUM の利用に入る前に、CloudWatch と直接統合されている CloudFront の運用メトリクスを調べることができます。これらのメトリクスは CloudWatch コンソールで利用でき、追加コスト無しで利用できます。以下のスクリーンショットにあるように、CloudFront ディストリビューションによって提供された HTTP リクエストの数、ユーザーによってダウンロードおよびアップロードされたバイト数、4XX および 5XX エラーの数を監視することができます。また、CloudFront ディストリビューションのキャッシュヒット率や、キャッシュされていないコンテンツを提供する際のオリジンレイテンシなど、追加コストで追加のメトリクスをオンにすることもできます。

図 2：CloudWatch 上の CloudFront モニタリングメトリクス

このデータは、ウェブサイトの健全性を判断したり、ウェブサイトへのユーザートラフィックの概要を把握したりするのに役立ちます。しかし、ウェブサイトのパフォーマンスに関するユーザー・エクスペリエンスについての洞察は得られません。そこで RUM を活用します。

RUM を使ってウェブサイトのパフォーマンスを検証する

次に、同じウェブアプリケーションの RUM を使って計測しましょう。このためには、まず CloudWatch RUM でアプリケーションモニターを作成し、それによって生成されたコードスニペットを、パフォーマンスをモニターしたいウェブサイトの HTML ページに挿入する必要があります。※CloudWatch RUM のアプリケーションモニターはドメイン毎に作成します。CloudFront 独自のドメインを使用して比較を行う場合は、CloudFront を使用する場合と使用しない場合でドメインが異なることがあります。その場合は検証を行う毎にコードスニペットをドメイン毎に入れ替えて検証してください。

1) CloudFront を使用しない場合の RUM
CloudWatch RUM ウェブクライアントを埋め込みスクリプトとしてインストールするには、RUM ウェブクライアント設定コードスニペットをアプリケーションの <head> 要素内、他の <script> タグの上に貼り付ける必要があることに注意してください。

図 3：HTML ページに挿入された CloudWatch RUM スクリプトの例

パフォーマンスタブには、ページのロード時間やユーザーが遭遇したエラーなど、ウェブページのバイタルサインが表示されます。バイタルサインは 3 つのレベル ([Positive] (良好)、[Tolerable] (許容範囲)、[Frustrating] (不良)) に分けられます。

図 4：ページのロード時間を示す CloudWatch Performance タブ

また、ユーザーのブラウザ上でウェブページを完全にロードするために必要な各ステップにかかる時間も確認できます。これには、初期接続の確立にかかる時間、SSL ハンドシェイク、コンテンツの最初のバイトをロードする時間、完全なロード時間などが含まれます。

図 5：ウェブページの読み込みにかかる各ステップの時間の内訳の例

この図の例では、この特定のユーザーがウェブページをロードするのにかかる平均時間は 764ms で、最初の接続に 278ms、最初のバイトに 280ms かかっていることがわかります。これをベースラインとして、CloudFront を使って同じウェブページを配信したときのパフォーマンスを比較することができます。

2) CloudFront を使用する場合の RUM

AWS コンソールで先ほど作成した CloudFront ディストリビューションにアクセスし、CloudFront ドメインの URL を取得することができます。そして、ブラウザでこの URL を使ってウェブサイトにアクセスすることができます。これで再びCloudWatch RUM に新しいデータポイントが送信され、CloudFront を使用してコンテンツが配信されたときのユーザーエクスペリエンスが表示されます。パフォーマンスメトリクスを再び見てみましょう。

図 6: CloudFront を使用した場合のページのロード時間を示す CloudWatch Performance タブ

図 7：CloudFrontを使用したウェブページのロードにかかる各ステップの時間の内訳

先の例では、同じユーザーがウェブページをロードするのにかかった時間の合計が 447ms になったことがわかります。最初の接続には 17.5ms しかかかっていません。ALB の前に CloudFront をデプロイすることで、ページのロード時間がほぼ 40% 短縮され、ユーザーエクスペリエンスが向上していることがわかります。

CloudWatch RUM は、CloudFront を使用して配信されるウェブサイトについて、いくつかの追加の洞察を提供します。以下のスクリーンショットに見られるように、異なる地域のユーザーに対するウェブサイトのパフォーマンスを確認し、どのユーザーが良いエクスペリエンスを得ているか、またはページのロード時間が長いためにフラストレーションのたまるエクスペリエンスを得ているかを比較することができます。

図 8：CloudWatch RUM が提供する、ユーザーの地理的位置によるページロードパフォーマンスの例

また、以下のスクリーンショットのように、異なるブラウザやデバイスタイプを使用してウェブサイトにアクセスしたユーザーの閲覧体験の詳細を取得することもできます。

図 9：CloudWatch RUMが提供する、ユーザーのブラウザ別のページロードパフォーマンスの例

さらに、以下のスクリーンショットに見られるように、RUM が監視しているすべてのイベントのオリジナルログエントリや、ウェブサイトをナビゲートするユーザージャーニーにアクセスすることができます。

図 10 : クラウドウォッチ RUM の raw イベントログの例

また、以下のスクリーンショットのように、ランディングページからウェブサイト、その後のインタラクションまでのユーザージャーニー全体を追跡することもできます。

図 11 : CloudWatch RUM を使用してトラッキングされたユーザージャーニーの例

まとめ

この投稿では、RUM を使用してエンドユーザーのウェブサイトのパフォーマンスに関する洞察を得る方法と、CloudFront を活用することで得られる改善を監視する方法について学びました。このデータが得られれば、アプリケーションのどの部分をさらに最適化すればユーザーエクスペリエンスが向上するかを特定でき、CloudFront が提供する様々な機能を設定することでウェブサイトのパフォーマンスをさらに向上させることができます。

本記事は、「Prepare and run performance tests for Amazon Cloudfront with Real User Monitoring」と題された記事の翻訳となります。

翻訳は Solutions Architect の長谷川 純也が担当しました。