ウェブページを高速化するために
ウェブページの表示速度チューニングのための技術メモです。
ウェブページの表示速度は、サーバサイドにおけるページ生成というバックエンドの処理と、ブラウザで実際にページを表示するフロントエンドの処理との、二つの表示速度を足した速度となっています。その比率は、アメリカのトップ10サイトで調査したところ2:8となっているそうです(Yahoo!の技術者向け情報ページによると)。おそらく大体のサイトでこの事情は変わらないでしょう。
ウェブページを高速に表示しようとした場合、バックエンド処理を高速化しても全体の 20% の部分での高速化でしかなく、たとえば2倍の速度で表示できるようになったとしてもその効果はそれほど大きくありません。ページ全体の表示に1秒かかるとするとバックエンドの処理は0.2秒、これが半分になったとしても0.1秒の短縮でしかないことになります。しかもバックエンドの処理はたいてい複雑かつ物理的環境への依存度が高く、この部分の最適化は自ずとコストが高くつくことになります。
ところがフロントエンド側での処理が2倍の速度になったとすると、0.8秒の半分の0.4秒の短縮となります。同一のコストでこの効果を得られたとすると単純に費用対効果は4倍。ところがフロントエンドの最適化は実証済みで簡単である(ファイルサイズの減量とか)ことから、実際に必要な対策コストはおそらくバックエンド最適化より小さくてすむと思われます。
結論としてウェブページ表示速度を高速化するためのチューニングはフロントエンド側でまず行うべし、となります。
フロントエンドのパフォーマンスチューニング関連情報
- Yahoo! の開発者向け情報ページ(英語)
http://developer.yahoo.com/performance/ - Yahoo!情報を日本語に翻訳しているサイト
http://www.inter-office.co.jp/contents/177 - チューニングに使える Firefox のアドオン(Yahoo! 提供)
どこをチューニングすると表示速度の向上が可能かを指摘してくれるすばらしいツール。
YSlow - オライリーから出版されているサイトパフォーマンスのチューニングに関する書籍(英語)。これははやく翻訳出してほしいです。
High Performance Web Sites: Essential Knowledge for Front-End Engineers
- 作者: Steve Souders
- 出版社/メーカー: O'Reilly Media
- 発売日: 2007/09/21
- メディア: ペーパーバック
- 購入: 1人 クリック: 11回
- この商品を含むブログ (9件) を見る