HARファイルを使用してウェブページの問題を分析する方法

概要

ウェブページのレンダリングの問題は、ユーザーのデバイスでウェブページが正しく表示されたり機能しない場合に発生します。この問題は、不完全または歪んだ画像、レイアウトの崩れ、読み込み時間の遅延、または反応しない機能など、さまざまな形で現れることがあります。これらの問題の原因は、さまざまな要因から生じる可能性があります。

HTTPアーカイブ（HAR）は、ウェブページのレンダリングの問題を診断および解決するためのツールです。 HARは、ネットワーク管理者がネットワークトラフィックデータをキャプチャして分析することを可能にし、要求、応答、およびユーザーがウェブページにアクセスしたときに生成されるタイミングを含みます。このデータは、ウェブページの読み込みやパフォーマンスについての洞察を提供し、ボトルネックやエラーを特定し、レンダリングの問題の根本原因を特定するのに役立ちます。

この記事では、HARデータを使用してウェブページのレンダリングの問題をトラブルシューティングする方法について説明します。

環境

HARデータが必要です。

手順

問題を再現しながらHARデータを収集します。 HARデータの収集方法については、こちらの記事を参照してください。収集したHARデータを活用して、HTTPステータスコードやHTTPリクエストの応答時間を確認することで、問題を明らかにします。

HTTPステータスコード

HTTPステータスコードは、クライアントのサーバーへのリクエストのステータスについての情報を提供し、コミュニケーションプロセス中に発生する問題の診断やトラブルシューティングに役立ちます。以下は一般的なHTTPステータスコードとその意味です。参照: HTTP/1.1ステータスコードの定義のページで詳細をご確認ください。

200 - 成功
404 - ページが見つかりません / リクエストが不正です
401 - 認証されていません
403 - 禁止されています
304 - 変更なし（コンテンツがキャッシュされています）
500 - 内部サーバーエラー

手順

集めたHARデータをGoogle HARアナライザーに読み込みます
HTTPステータスコードによってリクエストをフィルタリングします。
例
以下はGoogle HARアナライザーに読み込まれたHARファイルを示しています。この接続は、Facebookを閲覧しようとしたもので、コンテンツが正しく読み込まれませんでした。成功（2xx以外）のHTTPステータスコードでフィルタリングすると、x.x.fbcdn.netというドメイン名で多くの403（禁止）の応答があることがわかります（黄色でマーク）。次のステップは、なぜこれらのリクエストが禁止されているのかをさらに調査することです。
Googleへのアクセスが制限されている国（例えば中国）では、Google HARアナライザーへのアクセスは不可能です。この場合、データが収集されたのと同じ開発者ツールでHARデータを読み込み、その後HTTPステータスコードの降順で並べ替えることができます。

長いウェブページの読み込み時間

ウェブアプリケーションで最も頻繁に見られる問題の一つは、ウェブページの読み込みが遅いこと、または全く読み込まれないことです。収集したHARデータを利用して、各リクエストの詳細を確認し、読み込みに大幅な遅延が発生しているものを特定します。一部のリクエストが読み込み状態にとどまり、アプリケーション全体が遅くなることがあります。 HARデータを分析することで、これらの問題のあるリクエストを特定し、それに対処するための適切な措置を講じることができます。

手順

収集したHARデータをGoogle HARアナライザーに読み込みます
遅延応答のリクエスト（通常、合計時間で最長のバー）をクリックします
遅延の主な原因をチェックします（ブロッキング、待機、または受信）
重要なタイミングフィールド
ブロック済み時間 - ブラウザが送信するまでにリクエストが待機していた時間です。
待機時間 - サーバーが応答するまでの待機時間。この値が高い場合、サーバーが混雑しているか、パフォーマンスの問題を抱えている可能性があります。下記では、サーバーからの待機時間が約5秒であることがわかります:
受信時間 - この値は、サーバーがクライアントに必要な情報を転送するのに要した時間です。通常、これがネットワーク上の問題が検出される場所です。
注: タイミングフィールドは、Chromeの開発者ツールを使用する際にも利用可能で、類似したタイミングフェーズの詳細が表示されます。タイミングブレークダウンフェーズの詳細な説明については、タイミングプレビューをご覧ください。
Googleへのアクセスが制限されている国（例えば中国）では、Google HARアナライザーへのアクセスは不可能です。この場合、データが収集されたのと同じ開発者ツールでHARデータを読み込むことができます。
分析は手順2と似ており、最も長い応答時間の接続の特定に焦点を当てます。例として、以下の概要セクションのスクリーンショットでは、読み込みの遅延が著しい複数の接続が確認できます。これらの接続を概要セクションでハイライトすることにより、30秒以上かかるリクエストが見つかります。これらの接続の一つを選択すると、app.launchdarkly.comへのリクエストであることが判明します。
長い読み込み時間がかかるリクエストを特定したら、遅延の根本原因を突き止めるためのさらなる調査を行うことができます。調査の一環として、これらのリクエストをブロックするオンプレミスのファイアウォールが存在するかを確認することが考えられます。
特定の地域、例えば中国では、アプリケーション内の長期間保留中のリクエストが埋め込みトラッカーに起因する既知の問題であるとされています。詳細については、中国 | ウェブページがレンダリングの問題を抱えているを参照してください。