これで総合で「F」です。。。うーん、悔しい！まずは各項目の中から、「F」である項目から対処していきたいと思います。
CSS Sprites
http://developer.yahoo.com/performance/で紹介されてたCSS Spritesやってるところを、色々みてたらグーグルもそうだったんだね。遅すぎる発見かもしれないけど、感動した。
PEARのImage_TextやText＿HighlighterのメンテナでもあるStoyan Stefanov氏による新しいプロジェクトCSS Sprites Generatorが公開されています。
CSS Sprites Generatorはページの読み込みを高速化するためのWebベースのツールで、読み込みのパフォーマンスを向上させるために、画像読み込みのリクエスト数を減らすことができます
CSS Sprites Generator v.0.0.2-alfa
普通の帯域節約術としては、mod_deflateでdeflate圧縮するとか、CSSやJSファイルのHTTPレスポンスヘッダにLast- ModifiedやEtagを追加しておいて、ブラウザがHTTPリクエストヘッダにIf-Modified-SinceやIf-None-Matchを付加するようにし、コンテンツが変更されていなかったら304 Not Modifiedを返すという方法を取るかと思います
RFC2068の14.21節には、HTTP/1.1サーバーは有効期限として「無期限」を指定したい場合は、「ちょうど1年後をExipresに指定すべき」とあり、また「HTTP/1.1サーバーは有効期限として1年以上を返すべきでない」とされています。
Expiresヘッダーを使えば、それらのコンポーネントをキャッシュさせて、不必要なhttpリクエストを避けることができます。Expires ヘッダーはよく画像をキャッシュさせるために使用されますが、Javascript、スタイルシート、Flashといったすべてのコンポーネントでも使用すべきです。
ブラウザやプロキシサーバにキャッシュさせることで、httpリクエストの数もサイズも減らして、より高速にページをロードできるようになります。 Webサーバは、httpレスポンスのExpiresヘッダーによって、そのコンポーネントがいつまでキャッシュして良いか、クライアントに知らせることができます。
Apahce に mod_expiresを確認します。このために、Apache の設定ファイル httpd.conf を確認します。
LoadModule expires_module modules/mod_expires.so
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/htm "access plus 7 days"
ExpiresByType text/html "access plus 10 minutes"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
mod_expiresとmod_rewriteを使ってサイトの帯域節約と体感速度を向上させる方法
http://www.onflow.jp/blog/archives/2007/06/mod_expiresmod_rewrite.html
次は「Gzip Components」について、対応してみたいと思います。
gzip による圧縮はだいたい70%程度、レスポンスのサイズを減らします。今日のインターネットトラフィック上で使用されているブラウザの90%はgzipをサポートしています。
Apahceを使用しているのなら、gzipのモジュール設定はそのバージョンによります。1.3系ならmod_gzipを、2系ならmod_deflateを使用して下さい。
これは要するにHTTPのレスポンスを圧縮することで、レスポンスを速くしよう！という狙いです。Apache2.0, 2.2系統ならmod_deflateを利用することでレスポンスの圧縮が可能です。ちなみにApache2.2系からはmod_filterがどうも推奨されているようなのですが、まとまった情報が少なかったので、今回はmod_deflateを利用してみることにします。
対応方法は非常に簡単。httpd.confについて次の項目を追記します。
Apahce に Webminが導入されている場合には、仮想サーバのオプションのドキュメントのオプションにある、「ETagヘッダの生成元」の設定を最終更新日付などに設定し、再起動すれば設定が有効となります。
＠IT：mod_deflateによるコンテンツの圧縮転送（1/3）
LoadModule deflate_module modules/mod_deflate.so
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI\.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rdf+xml
Locationのところは各環境に合わせてください。ある階層のみに対応させる場合はDirectoryとかでもいいと思います。上記の前半は、圧縮についての全般的なルールです。圧縮を可能に、gzip圧縮を扱うことができない古いブラウザからのリクエストについては、圧縮したレスポンスを返さない、画像ファイルについては圧縮しても無意味（すでに圧縮されているデータ）なので圧縮しない、などの設定になります。
後半は、圧縮対象のファイルをMIMEタイプによって指定しています。上記では全部バラして書きましたが、少し冗長なのでこんな書き方でもOKです。
さて、これでhttpdを再起動させて、実際に圧縮できているかどうか確認します。確認はYSlowのFirebug上の「YSlow」タブの「Performance」で、「Gzip components」の箇所を確認するのもいいですし、もっと細かな圧縮量が知りたい場合は、このサイトから確認することも可能です。調べ方はとても簡単で、調査対象URLを入れて「go」を押すだけでOK。ちゃんとgzipされたレスポンスを返した場合は、「圧縮後/圧縮前」のそれぞれのサイズを算出してくれます。
http://www.port80software.com/
では、さっき「F」だった、つまりレスポンス圧縮について何も対応していなかった僕のサイトを入れてみると、
・圧縮前：12754 bytes→
・圧縮後：3608 bytes
というわけで72.0%も圧縮されました！！（ちょっと予想以上の圧縮に笑ったw）また、YSlowの評価もgzipの項目が「F」から一気に「A」になりました。あわせて総合ランクも「F」から「D」に上がりました！
と、いうわけで、ほんの少し手を入れてあげるだけでグーンと効果があるので、mod_deflateをまだ試していないWeb屋さんは、ぜひ検討をば。もちろん圧縮についてはCPUを食うので、現状でWebサーバのCPUリソースを結構消費している場合は要検討ですよ。
ファイルを圧縮するmod_deflateの効果
http://zapanet.info/blog/item/961
Webサイトの高速化 ルール4 コンポーネントを圧縮しよう!
http://www.inter-office.co.jp/contents/184
＠IT：mod_deflateによるコンテンツの圧縮転送（1/3）
