ブラウザのレンダリング高速化
表示時間の計測方法
- Google Chromeのデベロッパーツール(Network)
- 世界50カ国/そして主要4ブラウザからの表示速度の計測が可能
loads.in – test how fast a webpage loads in a real browser from over 50 locations worldwide
HTTPリクエスト数を少なくする
- アイコンや小さな画像ファイルはまとめてCSSスプライトで表示する
スクリプトやスタイルシートは外部ファイル化する
- クライアントでキャッシュが有効になる
スタイルシートはページのトップで読み込む
- HTMLファイルはページが読込まれてから、上から順番に解析されて、ブラウザ上にレンダリングされる
スクリプトはページの最後に読み込む
- ページの先頭部分にスクリプトが記述してあると、スクリプトの解析に処理時間がとられて、表示にかかる時間が遅れる
gzipコンポーネントを使う
- サーバサイドでファイルを圧縮して送信し、クライアント側で展開して解析する
- ブラウザに依存