/ブラウザのウォーターフォール図でサイトのパフォーマンスを知る2016.07.29ブラウザのウォーターフォール図でサイトのパフォーマンスを知るTweetPocketこんにちは。2年目のサーバサイドのエンジニアで、サイトのパフォーマンスチューニングをやっています。本日はWebページのパフォーマンスを知る一つの手段である、ページの表示完了までのウォーターフォール図についてその見方を紹介したいと思います。画像など)をリクエストし、場合によっては更にリクエストを送りレスポンスを待ち、それが完了して初めてページの読み込みが完了します。ToolのNetworkパネルが挙げられますね。これらは、ページにて行われたリクエストとそのレスポンスを表すエントリのリストで構成されてます。Panelを例に紹介したいと思います。NetPanelを使って対象となるページをモニタすると、下図のようなウォータフォール図が表示されるかと思います。ウォータフォールの見方ここで画面の内容について簡単に説明していきます。左から順に、URLリクエストしたURLステータスリクエストの結果(ステータスコード)ドメインリクエスト先のドメインサイズリクエストした結果に対するサイズIPアドレス接続先のIPタイムラインリクエストがどの順序、タイミングで行われ、プロセスにどれくらいかかったかがわかります。赤い線・・・loadイベントの発火時間を示しています。下部に表示されているのは、このページが読み込まれ完了するまでに全体結果になります。4.26s)全てのリクエストが完了するまでにかかった時間が4.26秒loadイベントがまでの時間が5.99秒となります。※DOMContentLoadedイベントは、初期のHTMLドキュメントの読み込みと解析が完了したタイミングで発火します。Stylesheetや画像などの読み込みは除きます。※同期して取得するjavascriptはDOM解析を待たせることになります。loadイベントは、リクエストしたページのリソースとそれに属したリソースの取得が終了したタイミングで発火します。ユーザがページをリクエストDOM解析を可能な限り速くするためには、出来る場合、非同期でJavascriptを取得するようにし、スタイルシートの読み込みを最適にするのが基本ですね。下図に示すように各リクエストエントリーのタイムラインにカーソルを合わせるとどのタイミングでどれくらい時間がかかって行われたかがわかります。例だと接続に時間がかかっていますね。Blocking(ブロッキング)リクエストが、ブラウザのネットワーク接続を待つ、キュー(待ち行列)にあった時間(SSL接続の場合、ハンドシェイクやバリデーションもここに含まれます。Lookup(DNSルックアップ)DNS解決に要した時間Connecting(接続)TCP接続を作るのにかかった経過時間Sending(送信)リクエストヘッダーを送っていますWaiting(待機)サーバからのレスポンスを待っているReceiving(受信)サーバからのレスポンスを受け取っているより詳細な情報さらに詳細を知りたい場合、各エントリーをクリックすればレスポンスヘッダやリクエストヘッダ、渡されたパラメータやレスポンス、Cookie情報などが確認できます。ここで、セキュアかどうかを確認もできますし、パフォーマンス向上のために出来ることがされているかどうかも確認できます。HTTPヘッダにAccept-Encoding:gzipをつけてリクエストを投げることで、リクエストが圧縮された状態で送られ、クライアント側で展開するのでリクエストサイズが小さくなるため、通信にかかるコストが小さくなり、パフォーマンスが向上することがあります。最後にいかがだったでしょうか。最近のブラウザですと、Firebug以外でも開発者用ツールがあるものがほとんどで、Firebug同様な機能をもっています。サイトパフォーマンスはユーザがより快適にサイトを利用するために重要です。何より手軽なため、まずはここから始めていきましょう!TweetPocketフロントエンドパフォーマンスSNSでもご購読できます。*メールアドレス(公開はされません。コメントデータの処理方法の詳細はこちらをご覧ください。