Browserモニタリングの使用
この文書では、Browserモニタリングサービスを使用して、Webアプリケーションの問題点をすばやく特定して対応する方法に関するガイダンス文書です。 Browserモニタリングに関するガイダンス文書については、次の文書を参照してください。
ページロード分析
ウェブページのロード速度は、ユーザー体験に大きな影響を与えます。 ページのロードが遅い場合、ユーザーはページを離れて別のサイトに移動する可能性が高くなります。 これにより、ユーザーはページを表示する機会を逃し、サービスや製品を使用または、購入しなくなる可能性があります。
ページのロード速度を最適化し、ユーザー体験を向上させることは非常に重要です。 ページロード分析を使用すると、ページロードが遅くなる原因を特定し、問題点を改善して最適化されたユーザー体験を提供できます。 これらの取り組みは、ユーザーがサービスや製品をより多く利用し、より長い時間使用できるようにします。
ページロード分析は、すべてのウェブサイトとサービスを運用するために不可欠です。 ユーザー体験を向上させ、より良いビジネスパフォーマンスを達成します。
ブラウザアプリケーションのステータスを把握する
Browserモニタリングサービスのブラウザモニタリングダッシュボードメニューを使用して、ブラウザアプリケーションのページロード速度を確認する必要があります。
ブラウザモニタリングダッシュボードメニューの詳細については、次の文書を参照してください。
-
タイムラインウィジェットを確認
ページロードタイムラインウィジェットを使用して、全体ページロードパフォーマンスをモニタリングしてください。 リアルタイムでブラウザアプリケーションの全体的なパフォーマンスを把握できます。 ページロードが遅い区間を確認できます。
-
ページロード時間とロード数の確認
多くのユーザーがアクセスするページのロードに時間が掛かっている場合、それらのページのパフォーマンスを改善することに集中できます。 逆に、ローディング速度が遅いページのトラフィックが少ない場合は、他のページを改善するよりも、他のページにより多くの開発リソースを投資する方が効率的である可能性があります。
-
ページロードヒットマップを確認
ページロードイベントをヒットマップチャート形式で提供します。 リアルタイムで発生するページロードイベントを表示します。 ページのロードが遅いほど、チャートの上部に表示されます。
パフォーマンス低下の原因を特定および解決
ページロードが遅いページを確認した場合は、原因を見つけて解決する必要があります。 分析 > ページロードヒットマップメニューに移動してください。 ページロードヒットマップは、時間の経過に伴うページロードの応答時間を分布図チャートで表現します。 ヒットマップを確認して、個々のページロードイベントに関する詳細情報を取得できます。
ページロードヒットマップの確認
-
ページロードヒットマップでブラウザアプリケーションの状態を把握してください。
特定の時間に負荷がかかった現象や特定のページロードイベントが遅い現象を把握することができます。 チャートの上部に表示するイベントのロード時間が長くかかった場合、ブラウザアプリケーションの動作が遅いことを意味します。
-
ページロードが遅い領域をドラッグすると、ページ一覧で各ページロードイベントを確認してください。
ページ一覧は、基本的に経過時間、ページURL、リージョン情報、ブラウザ、デバイス情報などを確認できます。 特定の環境またはページで発生した問題を把握するために使用できます。
-
平均ページのロード時間が長いページをフィルタリングして見ることができます。
特定のページのページロードイベントを表示する場合は、ページグループ一覧でフィルタリングを適用して確認することができます。
ページロードの詳細を表示
ページ一覧で左端のを選択すると、ページロード詳細ウィンドウが表示されます。 ページロードとパフォーマンスを分析するためにさまざまな指標とパフォーマンスに影響を与える要因を特定できます。
ページロード中に区間別の所要時間をグラフチャートで提供します。 チャートは、ページのロード過程で遅い区間を特定し、最適化を行うのに役立ちます。
-
ページ情報:エンドユーザーの接続環境、接続ページ情報、ユーザーID、セッションID情報を提供します。 これらの情報は、特定の環境のみ発生する異常を特定するために使用できます。
-
ページロードタイミングの情報:ページロード時に区間別に所要時間を確認することができます。 各区間の詳細については、次の文書を参照してください。
-
リダイレクト:ブラウザがウェブページを読み込むとき、リダイレクトの過程で費やした平均時間です。
-
キャッシュ:ブラウザがウェブページを読み込み中にキャッシュされたリソースを取得するのに要した平均時間です。
-
DNS検索:ブラウザがウェブサイトを読み込み中にウェブサイトのドメインを検索するのに要した平均時間です。
-
TCP接続:ブラウザがウェブページを読み込んだときにTCPハンドシェイクの過程で要した平均時間です。
-
応答待ち:ブラウザ がウェブページを読み込み、ネットワークリクエストを送信した後、サーバーから最初のバイトを受信するまで要した平均時間です。
-
ダウンロード:ブラウザがウェブページを読み込み、サーバーからリソースをダウンロードするのに要した平均時間です。
-
レンダリング:サーバーからダウンロードしたリソースを画面にレンダリングし、ページロードイベントを完了するのに要した平均時間です。
-
Load Time:ブラウザがウェブページを完全に読み込むのにかかった平均時間です。
-
Front-End:ウェブページの初期レンダリングに要した平均時間です。
-
Back-End:ページロードリクエストからリソースをダウンロードするのに要した平均時間です。
-
バックエンド最適化
-
キャッシュ設定の最適化:ウェブページのキャッシュ設定が最適化されていない場合、キャッシュの有効期限が短すぎると、キャッシング速度が遅くなる可能性があります。 コンテンツの種類ごとに適切なキャッシュの有効期限を設定することが重要です。
-
キャッシュミス:キャッシュに保存されていないコンテンツが多数ある場合、キャッシュが正し く機能しない可能性があります。
-
DNSサーバ性能の問題:使用中のDNS サーバーの性能が低下または、過負荷状態の場合、DNS参照時間が長くなる可能性があります。 これを解決するには、より高速で信頼性の高いDNSサーバーに変更するか、複数のDNSサーバーを使用して負荷を分散します。 または、使用するドメインをできるだけ少なくし、外部リソースを最小限に抑えて、DNS の検索時間を短縮することを検討してください。
-
リモートDNSサーバの位置:DNS サーバーがユーザーから離れすぎると、検索時間が長くなる可能性があります。 地理的に近いDNSサーバーを使用するか、グローバルキャッシュを提供するDNSサービスを使用することで、この問題を解決できます。
-
サーバー応答時間:サーバーの処理速度が遅い場合やサーバーが過負荷状態の場合、応答時間が遅くなる可能性があります。 サーバーのパフォーマンスを最適化したり、サーバーの容量を増加する対策が必要になる場合があります。
-
サーバー位置:サーバーとユーザー間の距離が遠い場合、待機時間が長くなる可能性があります。 これを解決するには、Content Delivery Network(CDN)などのサービスを使用して、ユーザーの近くで配信できるようにします。
-
ネットワーク遅延:インターネット接続が遅い、または不安定な場合、バックエンド区間のローディング速度に影響を及ぼす可能性があります。 この問題は、ユーザーのネットワーク状況によって異なる可能性があります。
-
ファイルサイズ:大きなファイルをダウンロードするときに速度が遅くなる可能性があります。 イメージ、スクリプト、スタイルシートなどのリソースを最適化および圧縮してファイルサイズを小さくします。
-
同時ダウンロード制限:ブラウザは、同時にダウンロードできるリソースの数を制限します。 同時にダウンロードされるリソースの数を減らすには、複数のリソースを1つにマージするか、非同期ロード機能を使用します。
フロントエンド区間で最適化
-
複雑なDOM構造:ウェブページのDocument Object Model(DOM) 構造が複雑な場合、ブラウザがページをレンダリングするのに時間が長く要する可能性があります。 DOM構造を簡素化し、不要なネスト要素を削除してレンダリング速度を改善してください。
-
重いCSS:多数のCSSルールと複雑なセレクターを使用する場合、ブラウザがスタイル計算に多くの時間を費やす可能性があります。 CSS を最適化し、ルールを簡素化し、不要なスタイルを削除することで、レンダリング速度を向上させます。
-
JavaScript実行遅延:ウェブページに使用されたJavaScriptコードが大量に使用されている場合や実行時間が長くかかる場合はレンダリング速度に影響を与える可能性があります。 JavaScriptコードを最適化し、実行時間を短縮し、必要に応じて非同期読み込み方式を使用してレンダリング速度を改善してください。
-
画像の最適化:重い画像ファイルはレンダリング速度を遅くする可能性があります。 画像を圧縮し、適切なサイズとフォーマットで最適化してください。 必要に応じて、遅延ロード機能を使用してレンダリング速度を改善してください。
-
Webフォント使用:Webフォントは、ユーザーに様々なフォントスタイルを提供することができますが、ローディング時間に影響を与える可能性があります。 Webフォントを最適化し、必要な要素のみ使用してください。 フォントのロード前にテキストを表示することで、レンダリング速度を改善することができます。
リソース一覧の確認
ブラウザがサーバーからダウンロードするリソースは、ページロードのパフォーマンスに大きな影響を与える可能性があります。 ページロード詳細ウィンドウのリソース一覧は、ローディング速度が遅いか、ファイルサイズが大きいリソースをすばやく特定することができます。
各リソースの開始時間に基づいてタイムラインチャートを提供し、ロード 速度が遅いリソースを特定できます。 各リソースのファイルサイズを参照し、パフォーマンスに影響を与える部分を改善してください。 各リソースを選択すると表示されるリソース詳細ウィンドウで詳細な時間情報を確認できます。
AJAXモニタリングと分析
Asynchronous JavaScript and XML(AJAX)は、非同期でデータを交換し、ウェブページをアップデートする機能です。 AJAX の利点には、ユーザー エクスペリエンスの向上とサーバーへの要求の削減が含まれます。 ただし、AJAXはブラウザで実行されるJavaScriptコードとして実装されるため、モニタリングする必要があります。 AJAXモニタリングが必要な理由は次のとおりです。
-
AJAXリクエストが正常に処理されることを確認するには
-
AJAXリクエストによって引き起こされるパフォーマンスの低下を理解するには
-
AJAXリクエストがセキュリティ上の問題を引き起こす可能性があるかどうかを判断する
-
AJAXリクエストがネットワーク帯域幅を無駄にしていることを確認するため
ブラウザアプリケーションのAJAXリクエストのステータスを把握
ブラウザモニタリングダッシュボードメニューのAJAX関連ウィジェットでブラウザアプリケーションのAJAXリクエスト状態を簡単に確認することができます。
-
AJAX応答時間の確認
ブラウザアプリケーションで発生するAJAXの平均ロード時間を確認できます。 ロードが長くかかるホストまたはpathを特定するのに役立ちます。
-
AJAXエラー件数の確認
ブラウザアプリケーションでAJAXリクエストが正常に行われない数です。 ブラウザアプリケーション全体で発生しているAJAXエラー件数をリアルタイムで確認できます。
-
AJAXヒットマップの確認
AJAXリクエストをヒットマップチャート形式で提供します。 リアルタイムで発生するAJAXリクエストを表示します。 AJAXが遅いほどチャート上部に表示され、問題のあるAJAXは黄色で表示されます。