「ハイパフォーマンスWebサイト」を読んでみた
http://labs.cybozu.co.jp/blog/akky/archives/2008/04/book-review-high-performance-website.html:秋元@サイボウズラボ・プログラマー・ブログ
にて「ハイパフォーマンスWebサイト-高速サイトを実現する14のルール」が紹介されていたので、Amazonで注文しようと思ったら、新品がない！？
マーケットプレイスでもいいけど、なんか出品者評価とかめんどくさいので本屋にて購入。
本屋で探し当てたときは、オライリー本としてはなんて薄いんだと思ったけど、
内容は濃かった。
例として米国トップ１０サイトを比較しているところが具体的でよい。
著者はYahooでフロントエンドのパフォーマンス改善専門として働いていた人。
ルール1：HTTPリクエストを減らす
1.2CSSスプライト
画像を結合することでHTTPリクエストを減らす。
画像の結合により、画像と画像との間に余白が入るため、個々の画像の和よりもサイズが大きくなると思うかもしれないが、実際には画像のオーバーヘッド（カラーテーブルや形式に関する情報など）が削減されるため、小さくなることが多い。
サンプル
http://stevesouders.com/hpws/sprites.php
1.3インライン画像
URLスキームとしてdata:を使用すれば、HTTPリクエストを増やさずに複数の画像を含めることができる。
IEは非対応。
data:[
サンプル
http://stevesouders.com/hpws/inline-images.php
http://stevesouders.com/hpws/inline-css-images.php
1.4スクリプトおよびスタイルシートの結合
javascript,cssファイルをインライン化する（HTMLに埋め込む）か、それとも外部からインクルードするのか？一般的には外部からインクルードした方が、より高いパフォーマンスが得られる。
複数のファイルを一つのファイルに結合することにより、HTTPリクエストの数が減る。
※javascriptとcssファイルを結合することではない。
サンプル
http://stevesouders.com/hpws/combo-none.php
http://stevesouders.com/hpws/combo.php
まとめ、HTTPリクエストを減らす。
ルール５：スタイルシートは先頭に置く
5.1プログレッシブ・レンダリング
ブラウザはできるだけ早く、ロードし終わったコンテンツから逐次的に表示してほしい。
ネット接続速度が遅い場合、ユーザーに視覚的なフィードバックを返すことは重要。
・ユーザーにシステムがクラッシュしたのではなく、一生懸命課題に向かっているのだと伝えて安心させる。
・待ち時間の目安を示して待っている間に他のことをする余裕を与える。
・ユーザーに見える物を与えて退屈を紛らわせる。
5.3.1 CSSがページの最後にある場合
サンプル
http://stevesouders.com/hpws/css-bottom.php
※IE以外では起こらないので解明が困難。
ページは最初全くの空っぽの状態で、その後突然すべてのコンテンツがいっぺんに現れる。
自分のリクエストがきちんと処理されているのか視覚的なフィードバックがないので、ユーザーにとって不快な状況。
5.3.2 CSSがページの最初にある場合
スタイルシートはHEAD内に置く。
LINKタグの例
@importの例
STYLEブロックには複数の@importを記述できるが、@import規則は他の全ての規則の前にないといけない。
スタイルシートが最後にダウンロードされるので、@importをHEAD内で記述しないでHEADにLINKタグを使用して入れる。
まとめ、スタイルシートはLINKタグを使用してドキュメントのHEADに置く
ルール６：スクリプトは最後に置く
6.1 スクリプトに関する問題
サンプル
ページの中央にスクリプトがある場合
http://stevesouders.com/hpws/js-middle.php
6.3 スクリプトによってダウンロードが中断される場合
１．ホスト１からの画像×１
２．ホスト２からの画像×１
３．ホスト１からのスクリプト（読込時間10秒）
４．ホスト１からの画像×１
５．ホスト２からの画像×１
6.4 最悪のケース：スクリプトが一番上で読み込まれる場合
・スクリプトより下のコンテンツは、レンダリングが中断される
・スクリプトより下のコンポーネントは、ダウンロードが中断される
6.5 最善のケース：スクリプトが一番下でしてされている場合
スムーズにレンダリングされ、画像も速やかに表示されます。
処理時間の長いスクリプトも、一番下に設定すれば、表示への影響も最小限に抑えられる。
まとめ、スクリプトはページの最後に移動する
ルール８：JavaScriptとCSSは外部ファイル化する
8.1.1 単純な比較ではインラインの方が速い
実際は外部ファイルを使う方が一般に高速なページを作成できる。
外部ファイルには,javascriptやCSSがブラウザにキャッシュされる可能性がある。
