表示速度確認ツール

FireBug

-基本のアドオン

YSlow

• Yahooのやつ
• FireBugと連携
• 評価の低い項目 (E,F)を優先して修正する
• 一定規模以上のサイトは「YSlow(V2)」、小規模サイトは「Small Site or Blog」などを選択
• 「Use a Content Delivery Network(CDN)」はアメリカ以外だとFになるので無視してよい

PageSpeed

• Googleのやつ

高速化の手段

HTTPリクエストを減らす

• CSSスプライト

外部CSSロードには@importを使わない

外部CSSファイルはlink要素のみで読み込む。

• IEはlink要素で読み込まれたCSSをダウンロード完了するまで、@importで指定したCSSファイルを読み込まない
• IEもFirefoxも、link要素で読み込まれるCSSファイルのダウンロードが完了してからでないと、次のCSSファイルを読み込まない

CSSやJavaScriptのロード順

• CSSはheadのlink要素で指定するとアクセス後の空白の時間（ホワイトページタイム）が減らせる
• -ブラウザはCSSを読み込むまでレンダリングを待つため。
• JavaScriptはbody要素内の最後で読み込むのがよい
  • 並列ダウンロードができず、応答の遅れによってそれ以降のコンテンツのダウンロードが停止されるので。

ファイルの圧縮

• CSSやJSは「YUI Compressor」などのツールで圧縮可能
• gzip圧縮転送を使うことでさらに圧縮できる
  • Apache2のmod_deflateモジュールを有効化することで使用可能

CSSや画像の最適化

• CSSスタイルの適用対象は子孫セレクタで記述するより、シンプルなIDやクラスセレクタの方が処理速度が速い（特にIE6で顕著）
• 画像は「Yahoo! Smush.it™」などのWebサービスでギリギリまで最適化できる
• PNGを最適化するなら「BlastPNG」あたり
• 画像サイズをHTMLで変更するとブラウザに負荷がかかり重くなるので、やらない方が良い
• CSSスプライトを利用する際のGIF画像は、縦方向ではなく横方向に画像を配置したほうが圧縮率が高い。8bit PNGでは縦横ともに圧縮方式が変わらないのでどっちでもいい。