概要

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

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

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

環境

HARデータが必要です。

指示

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

HTTPプロトコルステータスコード

HTTPプロトコルステータスコードは、クライアントのサーバーへのリクエストの状態に関する情報を提供し、通信プロセス中に発生する可能性のある問題の診断およびトラブルシューティングを支援します。 以下に一般的なHTTPプロトコルステータスコードとその意味を示します。 詳細についてはHTTPプロトコル/1.1ステータスコード定義ページをご参照ください。

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

ステップ

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

長いWebページ読み込み時間

Webアプリケーションで遭遇する最も一般的な問題の1つは、Webページの読み込みが遅いこと、または場合によってはページ全体を読み込めないことです。 収集されたHARデータを利用すると、各リクエストの詳細を調査し、読み込みに大幅な遅延を引き起こしているものを特定できます。 特定のリクエストが永続的な読み込み状態に陥り、アプリケーション全体の速度を遅くしている可能性があります。 HARデータを分析することで、これらの問題のあるリクエストを特定し、それらに対処するための適切な措置を講じることができます。

手順

1. 収集したHARデータをGoogle HARアナライザーにロードします

2. 応答が遅いリクエスト（通常、総時間で最も長いバー）をクリックします

3. 遅延の主な原因が何であるかを確認します（ブロック、待機、受信）
   重要な時間項目
   ブロックされた時間 - ブラウザがリクエストを送信するまでにかかった待機時間。
   待機時間 - サーバーの応答を待つ時間。 この値が高い場合、サーバーが忙しいか、パフォーマンスの問題がある可能性があります。 以下に、サーバーから約5秒の待機時間があることがわかります：
   受信時間  - サーバーがクライアントに必要な情報を転送するのに使用される時間です。 通常、ここでネットワークの問題を検出します。 
   
   注意: 時間フィールドは、Chromeのデベロッパーツールを使用する際にも利用可能で、類似の時間段階の内訳を提供します。 時間の内訳段階の詳細な説明については、timing-previewを参照してください。
   

4. Googleへのアクセスが制限されている国（例：中国）では、Google HAR分析ツールにアクセスすることはできません。 この場合、データを収集したのと同じ開発者ツールでHARデータをロードできます。
5. 分析は、2番目のステップで最も長い対応時間を持つ接続の特定に焦点を当てることと類似しています。 例として、以下に提供されているスクリーンショットの概要セクションでは、読み込みに重要な遅延が発生している複数の接続が観察できます。 これらの接続を概要セクションで強調表示することによって、一部のリクエストが読み込みに30秒以上かかることを確認できます。 これらの接続のいずれかを選択すると、それがapp.launchdarkly.comへのリクエストであることがわかります。
   
6. 長時間の読み込みが発生しているリクエストが特定されたら、遅延の根本原因を見つけるためにさらなる調査が行われる可能性があります。 探るべき可能性のある要因の1つとして、これらのリクエストをブロックしている可能性のあるオンプラミスファイアウォールの存在があります。
7. 中国などの地域では、アプリケーション内の一部の長期間保留中のリクエストが埋め込みトラッカーに起因することが既知の問題となっています。 詳細については、中国 | レンダリング問題があるウェブページを参照してください。