Chrome ブラウザの [ネットワーク] パネル http リクエスト時間の分析

Chrome ブラウザの開発者ツールのネットワーク ウィンドウで、各コンポーネントのダウンロードに必要な具体的な時間を確認できます

上記の表に基づく簡単な分析—

停滞

ブラウザには同じホスト ドメイン名に対する同時接続数に制限があるため、現在の接続数が上限を超えた場合、他のリクエストはブロックされ、さ​​らに新しい接続が利用可能になるのを待ちます。スクリプトは他のコンポーネントのダウンロードもブロックします

最適化対策:

1. 複数のホストにリソースを合理的に分散すると同時実行数を増やすことができますが、並列ダウンロードの数を増やすとオーバーヘッドも増加し、並列ダウンロードが多すぎるとパフォーマンスが低下します。

2. スクリプトをページの下部に配置します。

DNS ルックアップ (ドメイン名解決)

特定のドメイン名でリソースをリクエストするには、ブラウザはまずDNSリゾルバーを通じてドメイン名サーバーのIPアドレスを取得する必要があります。 DNS ルックアップが完了するまで、ブラウザはホスト名から何もダウンロードできません。

最適化対策:

1. DNS キャッシュを使用します (TTL 時間を設定します)。

2. Connection:keep-alive 機能を使用して、ドメイン名を解決せずに現在の接続で複数のリクエストを行うことができます。

初期接続

TCP接続確立のためのスリーウェイハンドシェイク時間

SSL (HTTPS接続に含まれます)

http は、コンテンツを平文で送信し、犯罪者がブラウザとサーバー間の通信メッセージを傍受した場合、その中の情報が取得されます。

https は、HTTP に SSL プロトコルを追加した Secure Sockets Layer Hypertext Transfer Protocol で、SSL は証明書に依存してサーバーの ID を確認し、ブラウザとサーバー間の通信を暗号化します。

つまり、HTTPS接続を確立する時間は、3ウェイハンドシェイク時間+SSL時間に相当します。

リクエストを送信しました

HTTPリクエストの送信時間（最初のビットから最後のビットまで）

最適化対策:

1. HTTP リクエストを減らすには、CSS スプライト、インライン画像、マージ スクリプト、スタイル シートなどを使用できます。

2. 頻繁に変更されないコンポーネントに長期の Expires ヘッダー (長い有効期限を設定するのと同じ) を追加し、その後のページ閲覧で不要な HTTP リクエストを回避できます。

待機中（応答待ち）

通常は一番時間がかかります。リクエストを送信してからレスポンスを受信するまでの時間は、回線やサーバーの距離などの要因に影響されます。

最適化対策:

1. CDN を使用して、適切に動作している最も近いキャッシュ サーバーにユーザー アクセスを誘導し、キャッシュ サーバーがユーザーのリクエストに直接応答して応答速度を向上させます。

コンテンツのダウンロード

HTTPレスポンス（ヘッダーとレスポンスボディを含む）をダウンロードする時間です

最適化対策:

1. 条件付き Get リクエストを通じて、If-Modified-Since と Last-Modified の時間を比較し、キャッシュ内のコンポーネントを使用するかどうかを決定します。サーバーは、サイズを削減するために「304 Not Modified」ステータス コードを返します。反応

2. 自動ビルドツール grunt や gulp などを使用して、重複したスクリプトを削除し、コードを合理化して圧縮します。

3. サーバー側で gzip 圧縮を有効にして、ダウンロード時間を短縮します。