Best Practices for Speeding Up Your Web Site

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

「ハイパフォーマンスwebサイト」の元となったYahooの開発者ブログ
http://developer.yahoo.com/performance/rules.html
を見てみると、明らかに項目が増えていた。というか倍以上？
とりあえず、増えていた部分をメモ代わりに要約してみる。

• • • -
• バッファは早めにフラッシュさせろ。

phpのflush()メソッドを外部ファイルの参照が書かれている部分の後に挿入することで、HTMLのダウンロードと平行して、外部ファイルの取得処理が実行できる。

• Ajax通信にはGETを使え。

POSTを使うと、ブラウザはヘッダーを送って、データを送るという２段階の処理をすることになる。
GETで送信できる2KバイトまでのリクエストはGETで送信したほうがよい。

• コンポーネントは後からロード(Post-load)しろ。

始めのレンダリングが開始されるにはどの要素が必要かを検討し、Drag&Dropを制御するJavascriptやhiddenの要素といった、レンダリングに直接関係の無い要素は、後からロードされるようにする。
ただし、Javascriptがロードされる前に操作されても正常に動作することを確認しなければならない。
また、始めは画面に表示されない画像を後からロードするYUI Image Loaderのようなものもある。
http://developer.yahoo.com/yui/imageloader/

• コンポーネントは先にロード(Preload)しろ

後からロードしろというのと反対のことを言っているが、全く種類の違う方法である。遷移前の画面で次の画面で必要となりそうなJavascriptやCSS、画像をダウンロードさせ、キャッシュを作成してしまう。
1.無条件先ロード
とにかく次に必要と思われるファイルをロードする。(googleがやっている。)
2.条件付先ロード
ユーザがある行動をとった時点で、次に予測されるページに必要な要素をロードする。(Yahoo検索では入力ボックスに何かを入力すると、ファイルを取得するようになっている。)
3.将来の為のロード
デザイン変更の時などに、キャッシュが無いことによる画面の遅さを感じさせないように、旧デザイン上で新デザインに必要な要素を取得しておく。

• DOMの数を減らせ

JavascriptでのDOMへのアクセスにも影響するので、DOM要素の数は少なくすべき。
意味無くDIVを使ったりしていないか？？
FirebugのConsole上で、
document.getElementsByTagName('*').length;
を実行してみれば、簡単にDOMの要素数が分かる。

• コンポーネントはドメインをまたいで置いておけ

ドメインを分けることで、平行ダウンロードできるコンポーネントの数が増える。ただし、DNS参照の負荷を考えると、２〜４程度のドメインにしておくべき。

• iFrameの数は最小にしろ

• 404は無くせ

404のレスポンスは全くの無駄で、何の意味も無くユーザの体感速度を遅くする。
特にJavascriptの外部ファイル参照で404を出すと、後に続く平行ダウンロードの処理をブロックし、またブラウザは404のレスポンスをJavascriptとして扱おうとしてしまうので、最悪である。

• • • -

んー、長すぎる。続きはまた今度。
追加：
続き

１〜１４に関しては書籍の中で詳しく解説されていますし、ここで概要も知ることができます。
http://www.inter-office.co.jp/contents/177