画面の表示に時間がかかる場合の調査方法

Webサイトの表示に時間がかかる場合は幾つかの原因が考えられます。最も大きなところとしては

1. ネットワーク
2. HTMLレンダリング

でしょう。各ブラウザでは次のようにチェックします。

Google Chromeの場合

NetworkとTimelineタブを使ってチェックできます。各リソースごとにネットワークにかかった時間が確認できます。TimelineではJavaScriptの処理時間などが計測可能です。

Firefox Developer Editionの場合

ネットワークおよびパフォーマンスタブを使って測定できます。ネットワークタブではリソースごとの待ち時間、転送時間が分かります。

パフォーマンスタブではDOMイベント、CSSの計算、レンダリングなどを細かく計測できます。

Safariの場合

ネットワークタブとタイムラインタブを使ってチェックできます。JavaScriptの実行されている箇所や、レイアウト/レンダリングのタイミングを確認することでデバッグ可能です。

タイムラインはズームイン/アウトができます。

IEの場合

ネットワーク、UIの応答タブを使って確認できます。ネットワークタブではリソースごとの読み込み、実行時間が確認できます。URLごとに表示されるのでファイル名が長く、若干区別が難しいです。

UIの応答では読み込み時間、レンダリング、イメージのデコードなど細かく判別できます。CPU使用率が基準なので、重たいJavaScript処理の発見も可能でしょう。これだけ細かく測定できればどこに時間がかかっているのが一目で分かります。

各ブラウザとも高速なWebアプリケーション開発に必須の機能が揃っています。Firefox Developer EditionはFPSに重点が置かれていたり、IEはCPUなど各ブラウザの目的が異なるのが興味深いです。