AJAXアプリケーションの負荷テスト
AJAXアプリケーションのユーザーシナリオスクリプトを作成し、負荷下でのユーザーの行動を調査し、問題を特定し、パフォーマンスを検証します。
コンテンツ概要
AJAX（Asynchronous JavaScript and XML）ウェブアプリケーションの負荷テストを経験された方は、多くの場合、これが非常に難しい開発および自動化の課題となることを知っています。この記事では、AJAXの開発技術の背景情報、AJAXの利点と欠点、そして推奨されるAJAXパフォーマンステスト手法を解説します。
数十年前、ウェブページやアプリケーションは退屈でしたが非常に軽量で、メンテナンスが容易で、今日のウェブアプリケーションフレームワークと比べてテストのしやすさは素晴らしいものでした。ユーザーはこれら初期のウェブアプリケーションと対話するよりも、白い画面を前にして待つ時間の方が長いことがよくありました。この限定された使いやすさのために、企業は新しいウェブベースのサービスにお金を使うことを避けていました。
2005年以降、AJAXと呼ばれる新しい技術により、開発者はユーザーがページの読み込みを待つ時間を最小限に抑えたモダンなウェブサイトを構築できるようになりました。AJAXは頭字語であり、単なる技術以上のものです。HTML、CSS、JavaScript、XMLHttpRequest、PHPのようなサーバーサイドスクリプト言語で構成されています。
インターネット初期には、コンテンツが豊富でインタラクティブなウェブページは不人気でした。なぜなら、ページ全体をリロードせずに更新する方法がなかったからです。新しい技術と手法が進化するにつれて、AJAXはこのギャップを埋め、非同期データロードの概念を導入しました。これにより、エンドユーザーはデータがバックグラウンドでロードされる間もページと対話できます。今日では、この概念は広く使われており、インタラクティブで動的なウェブアプリケーションの実装を可能にし、全体的なユーザーエクスペリエンスの向上に寄与しています。
典型的なAJAXリクエストは以下のプロセスで構成されます：
- ユーザーがウェブページまたはウェブアプリケーションをクリック。
- そのウェブページのハンドラーがXMLHttpRequestオブジェクトを作成。
- XMLHttpRequestオブジェクトがサーバーにドキュメントをリクエスト。
- サーバーは適切なデータを取得し返送。
- XMLHttpRequestがイベントを発火し、データ到着をウェブページまたはアプリケーションに通知。
- ハンドラーがデータを処理して表示。
2026年アップデート： AJAXスタイルの非同期動作は、特にAPIや動的フロントエンドフレームワークと共に、現代のウェブアプリケーションで依然として広く使われています。負荷テストでは、バックグラウンドリクエストとユーザーアクションの挙動を正確に捉えるために、実際のブラウザ操作をシミュレートすべきです。
AJAXアプリケーションに伴う課題とは？
動的なAJAXベースのウェブアプリケーションには、開発者コミュニティで既に広く知られているいくつかの共通の落とし穴があります。以下に、AJAXのより問題となる領域のいくつかを取り上げます。
まず、前述したように、AJAXの構成要素の一つにJavaScriptがあります。ブラウザでJavaScriptを無効にすると、アプリケーションやサイトは無用のものになります。数年前、セキュリティのために組織が従業員のブラウザをロックダウンし、JavaScriptを無効にすることは一般的でした。その時代は過ぎましたが、これらの変更が予期せぬ結果をもたらし得ることを念頭に置くことは依然重要です。
次に、動的にロードおよび表示されるデータはページの一部とは見なされません。特にSPA（シングルページアプリケーション）として作成されたページについてはなおさらです。検索エンジンがAJAXベースのページをインデックスした場合、SEOの観点から結果が満足のいくものとは限らず、多くのコンテンツがインデックスエンジンに見えないことがあります。
第三に、継続的な動的ページの更新は低注意力のユーザーを妨害する可能性があります。ページ上に動的な要素が多く現れるほど、ユーザーが中断されて所定の時間内に作業を完了できない確率が高くなります。
最後に、コールバックベースのクライアント-サーバー通信のため、遅延はWebSocketなど他の技術と比較して数倍大きくなることがあります。ウェブクライアントはデータ更新をポーリングするため、自動テストにも課題となります。
AJAX負荷テスト：ユーザーシミュレーション技術
負荷テストのスペシャリストやパフォーマンスエンジニアは、テスト対象のアプリケーションに適し、かつ実施負担が過度にならないユーザーシミュレーション手法の選定に責任があります。誤ったシミュレーション手法を選ぶと、アプリケーションのパフォーマンスホットスポットを特定できない可能性が非常に高いです。
以下に2つのユーザーシミュレーション手法を解説します。
リクエストとレスポンスのプロトコルベースのシミュレーション
多くのオープンソーステストツールおよび商用負荷テストツールがこの方法をサポートしています。クライアント-サーバーのやり取りを記録し、テストツールが全リクエストとレスポンスをテストスクリプトにキャプチャします。セッションIDやテスト入力データのような動的データのパラメータ化後、スクリプトを用いてバックエンドシステムに必要な負荷をシミュレートできます。なお、クライアント側の処理や操作はプロトコルレベルのレスポンスタイム測定には含まれませんのでご注意ください。
実際のユーザー操作を模したフルブラウザーベースのシミュレーション
市場にあるより包括的な負荷テストソリューションの一部のみがフルブラウザーベースの負荷テストシミュレーションを提供・サポートしています。これはシステムリソースの要求が高く、信頼性のあるリプレイの実装がやや難しいためです。フルブラウザーベースのユーザーシミュレーションスクリプト作成はプロトコルベースの手法と似ていますが、今回はすべてのクライアント側操作が記録・保存されます。
テスターやエンジニアがウェブページやアプリケーションを操作する間、スクリプトレコーダーがブラウザ上のすべての操作をキャプチャします。テスト実行時はヘッドレスブラウザが記録された操作を実行し、実ユーザーのようにサーバーのコールバックに応答します。この種のユーザーシミュレーションは非常に正確で、リアルなフロントエンドパフォーマンス指標を提供します。
最初に述べたシミュレーション手法は静的なウェブアプリケーションに適しており、負荷注入機のシミュレーション負荷が低く、実装もしばしば容易です。後者の技術は正確なエンドツーエンドの応答時間を提供しますが、負荷テストサーバーへの負荷ははるかに高いです。では、AJAXベースのウェブアプリケーションやページの負荷テストに最適なユーザーシミュレーション手法はどのように選べばよいでしょうか？
AJAX負荷テストの実践
最良のAJAX負荷テスト手法は何でしょうか？またその選択をどう検証できるでしょうか？明らかに、どの手法が正確な結果をもたらすか確信が持てない場合は、小さな実験から始めることが賢明です。
このシナリオでは、ajaxsearchpro.comを使い、AJAXサンプルアプリケーションの2つの負荷テスト実装を紹介します。このデモアプリケーションは単純な検索エンジンです。例として、ユーザーが検索フィールドに検索語を入力し、一致するコンテンツが表示されます。エンターキーの押下や検索ボタンのクリック後に最終検索が実行され、対応する検索結果が画面に表示されます。以下はChromeブラウザのDevToolsでキャプチャしたウォーターフォールチャートです。「car」検索リクエストの応答時間は2.2秒でした。
我々はChromeブラウザの開発者ツールを使用して、このリクエストが検索操作時に実行されることを突き止めました：ajaxsearchpro.com/?s=car
プロトコルベースとブラウザベースの負荷テストスクリプトを作成、両方を実行し、その結果のパフォーマンス指標を比較しました。どちらのユーザーシミュレーションがAJAXベースのアプリケーションに最適だと思いますか？
プロトコルベースのAJAX負荷テストスクリプト
| スクリプト化されたステップ： | https://ajaxsearchpro.com/?s=car | 応答時間： | 594 ms |
| シミュレーション手法： | プロトコルレベル, Chrome | リクエスト数： | 1 |
ウォーターフォールチャート
ブラウザベースのAJAX負荷テストスクリプト
| スクリプト化されたステップ： | https://ajaxsearchpro.com/?s=car | 応答時間： | 2.18 秒 |
| シミュレーション手法： | プロトコルレベル, Chrome | リクエスト数： | 32 |
ウォーターフォールチャート
両シミュレーション手法の比較
非同期通信パターンのため、AJAXベースのアプリケーションはプロトコルレベルでの自動化ができません。リアルなブラウザベースのシミュレーションのみが正確な結果を提供し、バックエンドシステムに現実的な負荷を生成します。
例として、当社のajaxsearchpro.comデモアプリケーションを100同時ユーザー、1万検索／時で負荷テストするとします。プロトコルベースシミュレーションを使うと、10000 × 31 = 310,000のリクエストがミスされます。明らかに、これは全く不正確な負荷テスト結果になります。
LoadViewソリューションによるAJAX負荷テストへの対応方法
LoadViewは当社のクラウドベース負荷テストプラットフォームで、AJAX、Flash、Angular、Knockout、HTML5、jQueryなど最新のWeb 2.0アプリケーションのテストに対応しています。その使いやすさは抜群で、フルブラウザベースのシナリオを記録でき、Internet Explorer、Chrome、iPhone、Samsung、Blackberryなど40以上のモバイルやブラウザベースのデバイスをシミュレート可能です。
先述したように、多くの負荷テストソリューションはプロトコルベースのユーザーシミュレーション手法のみを提供し、それだけでは不十分です。プロトコルレベルでバックエンドに負荷をかけることはできますが、クライアント-サーバーリクエストの多くやクライアント側処理が除外されてしまいます。LoadViewプラットフォームは、正確なユーザーシミュレーションに必要なすべてを提供します。
LoadViewでAJAXベース負荷テストを実行する5つのステップ
1. AJAXアプリケーションの記録
EveryStep Web Recorderを使い、AJAXベースのアプリケーションを手動で操作できます。EveryStepはすべての操作を記録し、タイマーや検証ステップも追加可能です。アプリケーションをクリック操作で通過しスクリプトを作成できたら、単一ユーザーでの試運転または記録した操作をプラットフォームにアップロードし、負荷テストデバイスを作成できます。
2. キャリブレーション
負荷注入マシンの割り当てはしばしば推測になります。不健康な負荷生成マシンはテスト結果を歪めます。LoadViewはデバイス単一ユーザーテストを実行し、負荷注入マシンごとの最大ユーザー数を算出します。これにより、過負荷なマシンがアプリケーション応答時間に悪影響を与えることを防ぎます。
3. 実行プラン
ユーザー数は典型的なビジネス日に沿って変動します。このニーズに対応するため、実行プラン機能を用意しました。これにより現実的な負荷テストシナリオを柔軟にモデル化できます。
4. 仮想ユーザーの分布
LoadViewは世界中の多様な負荷注入マシンを選択可能にします。通常の顧客の所在地を代理するものを選択してください。
5. テストの実行と結果の確認
最後のステップでは負荷テストを開始できます。オンラインビューでAJAXアプリケーションの負荷下でのパフォーマンスをリアルタイムで監視可能です。テスト実行終了後、最重要なKPIを含む詳細レポートが届きます。
総合的に、LoadViewはテスト自動化の課題を簡素化し、複雑なビジネスアプリケーションで実際の運用シナリオをシミュレートするのに役立つ近代的な負荷テストプラットフォームの要件をすべて満たしています。LoadViewの詳細についてはLoadViewウェブサイトをご覧ください。より詳細な技術情報やビデオはナレッジベースでご覧いただけます。
ライブデモに興味がありますか？デモ予約をして当社のパフォーマンスエンジニアと一緒にLoadViewソリューションのスクリプト作成から設定、実行、テスト後分析までをご案内いたします。負荷テストの疑問点はすべて解消しましょう！
使用ツール
LoadView: Dotcom-Monitorのクラウドベース負荷テストプラットフォーム
EveryStep Web Recorder: ウェブベースのポイント＆クリックスクリプト作成ツール
Chrome Developer Tools: Chromeブラウザ組み込みの開発者ツール
Dotcom-Monitorプラットフォームと監視ソリューションの詳細はwww.dotcom-monitor.comをご覧ください