YSlow対策でmod_deflateを利用してHTTPレスポンスをgzip圧縮  

もう、いろんなニュースサイトで言われていますが、Yahooからページパフォーマンス計測ツールの「YSlow for Firebug」がリリースされました。Firebugをインストールしている上で、YSlowをインストールすると、Webサイトの高速化を行うためのポイントと、現状についてのポイント表示を行ってくれます。

これ、実際に試してみるとよく分かるのですが、いかに工夫をしていないサイトは、改善の余地があり余っているか。。ほんと身を引き締められます。ちなみにYSlowでは次の項目をポイントに挙げています。

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags

YSlow User Guideより抜粋

これらの観点から、総合的なポイントを算出してくれます。最も良いのがAランクで、最も悪いのがFランク。自分のサイトはどうだろう？と、いうわけで直近で仕事で作っていたサイトを計測してみると「F」でした。。。orz ちなみにGoogle.comは「A」、Yahoo.comで「B」、Yahoo.co.jpで「C」でした。Yahooも国内外でランクが違うのはなかなか興味深いです。また、CSS＋JavaScriptガリガリのサイトの場合、結構工夫していないと、すぐにランクは落ちてしまうと思います。みなさんも自サイトは要チェック！

さて、仕事サイトが「F」だったのですが、「F」のままだとWeb屋としてちょっとシャクですし、手直ししてみたいと思います。自分の場合、各項目については、こんな結果でした。

1. B : Make Fewer HTTP Requests
2. F : Use a Content Delivery Network
3. F : Add an Expires Header
4. F : Gzip Components
5. A : Put CSS at the Top
6. C : Move Scripts to the Bottom
7. A : Avoid CSS Expressions
8. n/A : Make JavaScript and CSS External
9. A : Reduce DNS Lookups
10. C : Minify JavaScript
11. A : Avoid Redirects
12. A : Remove Duplicate Scripts
13. F : Configure ETags

これで総合で「F」です。。。うーん、悔しい！まずは各項目の中から、「F」である項目から対処していきたいと思います。（数が多すぎて）どれから手をつけてもいいのですが、今回は「Gzip Components」について、対応してみたいと思います。

これは要するにHTTPのレスポンスを圧縮することで、レスポンスを速くしよう！という狙いです。Apache2.0, 2.2系統ならmod_deflateを利用することでレスポンスの圧縮が可能です。ちなみにApache2.2系からはmod_filterがどうも推奨されているようなのですが、まとまった情報が少なかったので、今回はmod_deflateを利用してみることにします。

対応方法は非常に簡単。httpd.confについて次の項目を追記します。

LoadModule deflate_module modules/mod_deflate.so

<Location />
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>

Locationのところは各環境に合わせてください。ある階層のみに対応させる場合はDirectoryとかでもいいと思います。上記の前半は、圧縮についての全般的なルールです。圧縮を可能に、gzip圧縮を扱うことができない古いブラウザからのリクエストについては、圧縮したレスポンスを返さない、画像ファイルについては圧縮しても無意味（すでに圧縮されているデータ）なので圧縮しない、などの設定になります。

後半は、圧縮対象のファイルをMIMEタイプによって指定しています。上記では全部バラして書きましたが、少し冗長なのでこんな書き方でもOKです。

AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml application/x-javascript...

さて、これでhttpdを再起動させて、実際に圧縮できているかどうか確認します。確認はYSlowのFirebug上の「YSlow」タブの「Performance」で、「Gzip components」の箇所を確認するのもいいですし、もっと細かな圧縮量が知りたい場合は、このサイトから確認することも可能です。調べ方はとても簡単で、調査対象URLを入れて「go」を押すだけでOK。ちゃんとgzipされたレスポンスを返した場合は、「圧縮後/圧縮前」のそれぞれのサイズを算出してくれます。

では、さっき「F」だった、つまりレスポンス圧縮について何も対応していなかった僕のサイトを入れてみると、

・圧縮前：12754 bytes→
・圧縮後：3608 bytes

というわけで72.0%も圧縮されました！！（ちょっと予想以上の圧縮に笑ったw）また、YSlowの評価もgzipの項目が「F」から一気に「A」になりました。あわせて総合ランクも「F」から「D」に上がりました！

と、いうわけで、ほんの少し手を入れてあげるだけでグーンと効果があるので、mod_deflateをまだ試していないWeb屋さんは、ぜひ検討をば。もちろん圧縮についてはCPUを食うので、現状でWebサーバのCPUリソースを結構消費している場合は要検討ですよ。

また、あわせてチェックしておきたいこととして、mod_deflateは圧縮アルゴリズムに少しクセがあるようです。最初上記の設定ではHTMLファイルの圧縮についてはすんなりいったのですが、JavaScript、CSSファイルのレスポンスは全く圧縮されませんでした。（この場合、YSlowの評価は、「まだまだJS, CSSファイルが頑張れるはず！」と、いうわけでgzipの項目は「D」ランクでした。） ところが、特に設定を変えることなく何回かアクセスを行っていると、これらのファイルも圧縮されるようになりました。このあたりはCTOとも話していたのですが、どうもこんな仮説が浮かびました。

• 「どうも毎回確実に圧縮するのではないかも？」
• 「ファイルサイズによって圧縮効率がありそうか無さそうかを考えている？」
• 「リクエストが多い、一定以上のファイルが圧縮対象になる？？」

うーん、、まだまだ謎です。時間があったらmod_deflateのソースを呼んでみたいなぁ、、とも思っていますが、この辺りの項目については、今のところ未確認です。もしかしたら僕の設定ミスがあったのかもしれませんが、上記項目について、もしご存知の方がいらしたら、教えていただければと思います。

[ 追記 ] 2007/07/31 14:00
今回のエントリーに関してはこれらの記事を参考にさせていただきました。

• ファイルを圧縮するmod_deflateの効果
• Webサイトの高速化 ルール4　コンポーネントを圧縮しよう! (Yahoo! developer netoworkより翻訳)

参考にさせていただいたサイトの方々、どうもありがとうございました。

[ 追記 ] 2007/08/05 17:18
コメントでかつきちさんから、css/JavaScriptのgzipについて、

SetEnvIfNoCase Request_URI\.(?:gif|jpe?g|png)$ no-gzip dont-vary

ではなく、

SetEnvIfNoCase Request_URI "\.(?:gif|jpe?g|png)$" no-gzip dont-vary

だと、早く圧縮された、との報告もありました。この方法を試してみるのも手かもしれません。
（かつきちさん、ご報告ありがとうございました！）