web

あなたのウェブサイトを高速化する方法

パフォーマンス向上のための14のティップス

1. HTTPリクエストを減らす
2. コンテンツデリバリーネットワーク（CDN）を使う
3. Expiresヘッダを追加する
4. コンポーネントをgzip圧縮する
5. スタイルシートを先頭に配置する
6. スクリプトを末尾に配置する
7. CSS expressionの使用を避ける
8. JavaScriptとCSSを外部ファイルに記述する
9. DNSルックアップを減らす
10. JavaScriptのサイズを小さくする
11. リダイレクトを避ける
12. スクリプトの重複を排除する
13. ETagの設定を変更する
14. Ajaxをキャッシュ可能にする

検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化）

Google、Yahoo!、Microsoftの3社は2009年2月12日、共同で新しいタグ「 rel=”canonical”」のサポートを開始した。rel=”canonical”（属性）は、検索エンジンに正しいサイトのURLを認識(正規化、canonicalization）させるために使用される。

文書構造を表現するXHTMLタグの正しいマークアップ

文書構造を表現するXHTMLタグを大まかに分類し、分類したタグをXHTMLの“要素”として、1つずつ紹介していきます。

　これらの要素類はXHTMLの骨格（枠）となる部分を形成していくために使われる、XHTMLタグの記述（＝マークアップ）を行ううえで基礎となる要素類です。

DOMでの参照例も書いてくれてる。

自分じゃ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にある「開発」メニューもなかなかよさそうだけど。（ネットワークタイムラインの表示とか）