Best Practices for Speeding Up Your Web Siteの続き

仕事

昨日の続き
Yahoo!開発者によるBest Practices for Speeding Up Your Web Siteを要約してみる。

      • -
  • cookieのサイズを小さくしろ。

cookieの情報は、HTTP Headerの中に記述されて、ブラウザとWebサーバの間でやり取りされている。ユーザへのレスポンス時間を最小限にするためには、cookieのサイズを最小限にすることが大切である。
ここにさらなる詳細がのっている。
http://yuiblog.com/blog/2007/03/01/performance-research-part-3/

静的画像の取得のために、cookieを一緒に送信しても何のメリットも無い。サブドメインを割り当てたサーバを用意し、全ての静的コンポーネントはそこに集めるべし。
また、cookieと一緒にリクエストして取得したコンポーネントはproxyがキャッシュの作成を拒否することもあるので、その点でもcookie-freeなドメインを使用することには利点がある。

  • DOMアクセスは最小化しろ。

javascriptでDOMにアクセスすると動作が遅くなる。より反応のいいページを作成するには、
1.DOM要素の参照をキャッシュする。(=変数に持つってことか？)
2.(Document Treeの)"外"で組み立ててから、Treeに組み込む。
3.javascriptでレイアウトをいじらない。

たくさんのイベントハンドラを作りすぎて、ページの反応が悪くなることがある。代表イベント(=event delegation)を使うことが大切である。例えば、１つのDivの中に１０個のボタンがあるときは、それぞれのボタンにイベントを設定せずに、Divに１つのイベントハンドラを作成してラップするほうがよい。
また、DOM操作をする処理の開始するのにonloadイベントを待つ必要はない。DOMContentLoadedを使えば、全ての画像がダウンロードされてくる前に、DOMにアクセスすることができる。

  • @のインポートではなく、によるインポートを行え。
  • フィルターは避けろ。

半透明の画像を使用すると、IE 7以前ではAlphaImageLoaderフィルターを使われてしまうので避けるべし。

  • 画像サイズを最適化しろ。

gifはImageMagickでチェックする。
サイズの節約になるなら、GIFはPNGに変換する。
全てのpngファイルにpngcrushを行う
全てのjpgファイルにjpegtranを実行する。

  • CSSスプライトを最適化しろ。

(よく分からないので省略。)

  • HTMLで使われる画像を大きくするな。

HTML内でwidthとheightが指定できるからといって、必要となるサイズよりも大きなサイズの画像を使ってはいけない。(レンダリングが遅くなる。)

  • favicon.icoは小さいサイズで、キャッシュ可能なものにせよ。

それ以上のサイズだと、i-phoneでキャッシュされない。

最後のほうは段々いい加減になってます。。