サイト高速化の手法について

自分じゃCSSスプライトくらいしか実践してない。書籍のほうもせっかく貸してもらってるんだし（積ん読に仲間入りさせて年を越してしまった）オライリーのものにしてはかなり薄手なんだから、これを機会にさっさと読んでしまおう。

ヤフーの画像はなぜyimg.jpドメインなのか？ サイト高速化の手法とヤフーの失敗例

ヤフーでは、ページはyahoo.comやyahoo.co.jpのドメイン名に置いてありますが、画像ファイルはyimg.comやyimg.jpのドメイン名に置いてあります。これはなぜでしょうか？

それは、複数のドメイン名を使ったほうが、ブラウザが平行してデータをダウンロードできるからというのが1つの理由です。Webサーバーとブラウザの間の通信のルールで、1つのドメイン名に対する持続的な接続は同時に2つまでにすることが望ましいとされているのです。

もう1つの理由は不必要なクッキーによる通信量の増加を避けるためです。

訪問者の状態をユーザーのブラウザに保存しておくクッキーは重要な技術ですが、ブラウザはサーバーとやりとりをするたびに手元に保存してあるクッキーのデータをWebサーバーに送ります。送られたクッキーの情報をサーバー側で利用しない場合は、クッキーのやりとりをしないほうがパフォーマンスは良くなります。

そこで、そもそもクッキーを必要としない画像を担当するサーバーはドメイン名を別にすることでクッキーのやりとりをなくしているのです。クッキーはフォルダ名でも対象を指定できますが、多くの場合はサイト全体で利用するためにドメイン名全体に対してクッキーを指定しています。ですから、ブラウザがクッキーを送らなくするには、ドメイン名を分けるのが最善なのです。実際に、米Yahoo!が画像用に利用しているyimg.comではクッキーを利用していないません。

Yahoo!パフォーマンスチーム、最新高速化ルール20を発表

新しい20のルールはサーバ、コンテンツ、クッキー、JavaScript、CSS、画像、モバイルの7つに分類されている。新しく紹介されたルールは次のとおり。

1. バッファは早期にフラッシュする (サーバ)
2. AJAXリクエストにGETを使う (サーバ)
3. コンポーネントのポストロード (コンテンツ)
4. コンテンツのプレロード (コンテンツ)
5. DOM要素数の削減 (コンテンツ)
6. ドメインをまたがってコンテンツを分離 (コンテンツ)
7. iframeの数を最小化 (コンテンツ)
8. 404を作ってしまわない (コンテンツ)
9. クッキーサイズを最小化 (クッキー)
10. コンポーネントに対してクッキーフリードメインを使う (クッキー)
11. DOMアクセスを最小化 (JavaScript)
12. かしこいイベントハンドラを用意 (JavaScript)
13. @importよりもlinkを使う (CSS)
14. フィルタの使用は避ける (CSS)
15. 画像を最適化 (画像)
16. CSS分割を最適化 (画像)
17. HTMLにおいて画像をスケールさせない (画像)
18. favicon.icoを小さく作成しさらにキャッシュを有効にする (画像)
19. 25KB以下にコンポーネントをキープする(モバイル)
20. コンポーネントを複数のドキュメントへパックする(モバイル)

ブラウザでチェックできるadd-on(Firefox)まで出ているとは知らなかった。これも後で試してみよう。
パフォーマンスチェックツール「YSlow」＊要Firebug

Windows版のSafariにある「開発」メニューもなかなかよさそうだけど。（ネットワークタイムラインの表示とか）