Webサイトをスピードアップさせる13のルール

元ネタは、Yahoo! DEVELOPER NETWORKの記事です。

• Best Practices for Speeding Up Your Web Site - Yahoo Developer Network

全体的にWebアプリケーション自体ではなく、それ以外のレイヤでどうすればいいか？みたいな話になっています。
で、早速ざっくりと訳してまとめてみました。間違いがあれば指摘してください ;-)

1. HTTPリクエストの回数を減らす

レスポンス時間の80%はフロントエンドで費やされるので、画像やスタイルシート、javascript、Flashなど、ページに含まれる部品の数を減らす。以下、具体的な方法。

• クライアントサイドマップ：サイズも分割した場合と比べて変わらないし、HTTPリクエストを減らすことができる。ただし、座標定義が面倒
• CSS Sprites
  • cakephp.orgの左にある歯車みたいな画像もそうかな
• インラインイメージ：以下のように「data:」スキーマを使う

<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAA..." alt="hoge">

• ファイルを結合する：javascriptファイルなどを1つにする
  • 開発時は分割し、リリース時やに結合する方法もありかも知れませんね

2. 充分な帯域を持つネットワークを使う

まあ、使えるもんなら使ってますが。。。(^^;

3. Expiresヘッダを加える

ブラウザやProxyのキャッシュをうまく利用して、HTTPリクエストの回数を減らす。

• Expiresヘッダを追加する。
  • studyinghttp.net - このウェブサイトは販売用です！ - 解説 仕様書 利用 技術 である 手法 日本語訳 プログラミング リソースおよび情報
• mod_expiresを使うのも有効かも知れませんね
  • mod_expires - Apache HTTP Server
• PHPだとheader関数を使う事になります

<?php
header("Expires: “ . gmdate("D, d M Y H:i:s", time() + 3600) . " GMT");
header("Cache-Control: max-age=3600");

4. Gzip圧縮する

HTTPレスポンスサイズを圧縮する

• mod_gzipやmod_deflateを使う
  • mod_gzip download | SourceForge.net
  • mod_deflate - Apache HTTP Server
  • mod_deflateを以前試したことがありますが、結構有効と思います
• PHPだと、ob_gzhandlerも使えます

5. CSSをHTMLのTOPに持ってくる

CSSがHTMLの最後にあるとブラウザが再レンダリングする必要が出てくるので、結果的にパフォーマンスが悪いイメージをユーザーに与えてしまう。また、再レンダリングされなかったりすると、真っ白なページが出てしまうので、早めに読み込ませるようにする。

6. スクリプトの読み込みはHTMLの最後の方に記述する

大きいファイルのダウンロードを並列で行わせるため。ただし、容易ではない。

7. CSS中の「式」を避ける

CSS中の「式」が評価される回数を減らす

• 以下のようなもの

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

8. JavaScriptファイルとCSSファイルを外部ファイルにする

複数のHTMLで同じスクリプトやCSSを使っている（使い回している）のであれば、大きな利点になる

9. DNSルックアップの回数を減らす

ちょっと読み取れなかったんですが、HTML内に記述されるホスト名の数を減らすことで、クライアント側のDNSルックアップの回数を減らす、ということでしょうかね。

10. JavaScriptを小さくする

javascriptファイル自体をgzip圧縮してしまう

• jsファイルって、gzip圧縮してもOKなんだ - Do You PHP はてなでもやりました

11. リダイレクトを避ける

これは想像できますね :-)

12. 重複するスクリプトを削除する

これも想像できますね :-)

13. ETagの設定を行う

ETagはコンテンツのキャッシュ制御機構の1つ。HTTPレスポンスヘッダに含まれる。ここで、

• Apache：inode-size-timestamp
• IIS：Filetimestamp:ChangeNumber

からETagヘッダの値を作成するが、httpdが複数台存在する場合、ETagの値が異なるため、ステータス304を返さない場合がある。その場合、

FileETag none

を追加すると良い。

• @ITにも同様の記事があります。
  • ブラウザキャッシュでパフォーマンス向上―負荷分散装置の落とし穴に注意−：事例に学ぶWebシステム開発のワンポイント（12） - ＠IT

追記（2007/08/02 17:31）

この元ネタって、先ほど米Yahoo!が公開したYSlowの説明ページだったんですね。

• Yahoo Developer Network

もうちょっと探っていくと、id:i_ogiさんのエントリが。。。

• YSlow for Firebug - おぎろぐはてブロ

オリジナルは「13」ではなく「14」とのこと。そういうことかぁ。。。なるほど〜。今頃気づいたorz
折角なので、YSlow入れてhttp://www.doyouphp.jp/に対してやってみました。

「2.Use a CDN」はホントに使えるもんなら使ってますが。。。(^^;　「9. Reduce DNS lookup」は上で書いた通り、1つのページを表示するのにいくつlookupする必要があるか？ということのようです。まあ、外部のjavascriptとかいろいろ貼り付けてたりするので仕方ないですねぇ。。。
また、日本語訳については、

[2007.07.29 追記] パフォーマンスチューニングBlogさんで翻訳が開始されたようなので、YSlowの判定結果と翻訳を付き合わせれば日本語でも改善作業ができるようになるかも。

だそうです。