LEDネタ、いつ書くんだろう。。。（汗）
ただいま仕事そっちのけでサーバーいじってます（汗）
だって試用期限が決まってるし、サーバー費用は生活にも支障をきたしますから（曝）
ちなみに当サイトは、ちょうど2年前から専用サーバーで運用しています。ひぃぃぃ。
で、契約当初は一番安いプランでしたが、その後すぐにアップアップで2番目のプランへ移行（笑）、そして今回ついに最上位プランの扉を叩きました。開けたくないけど（汗）
さて、今回はサーバーの負荷やトラフィック軽減のため、以下の3項目について徹底的に対策をおこないました。
- プレーンなテキストファイルを gzip 圧縮でレスポンス
- ファイルへ有効期限を付加し、キャッシュを促す
- ETag ヘッダを削除して、サーバー負荷を減らす
僕自体、サーバー関係は超ビギナーなので、今回はこれらを判りやすく .htaccess への記述で実現する方法を、備忘録的に紹介しておきます。トラフィックにお悩みのウェブマスターにもお役に立てれば幸いです。
もちろん、慣れた方なら直接 httpd.conf へ記述した方が良いでしょうね。
ちなみに僕は昨日、下手にいじってたら httpd.conf 吹っ飛びました・・・（涙目）
慣れないことはするもんじゃないねぇ。。。
1. プレーンなテキストファイルを gzip 圧縮してレスポンスさせる
これは昨年11月からも一部適用していましたが、今回画像以外の全てのファイルを対象に gzip 圧縮レスポンスを適用することにしました。
お使いのサーバーの Apache のバージョンが 2.x 系 ならmod_deflate モジュールにより以下のように .htaccess に書くことができます。
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|zip)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary
gzip 未対応の古いブラウザ等の除外判定が入ってるため、なんかややこしい構文です。詳しくは apache のサイトを参照のこと。
これで、ブラウザには以下のようなヘッダが返されます。
Content-Encoding: gzip
実際の圧縮例としては、例えば当サイトのトップページの index.css は27.6KB→4.6KB になり、またトップページ全体（CSS、JS、画像すべて含め）では、488.4KB→311.3KB と言う感じになりました。ブロードバンド時代とは言え、まだまだ重いなぁ。。。
2. ファイルへ有効期限を付加し、キャッシュを促す
これは、レスポンスヘッダに Expires （有効期限）を付加することによって、ブラウザのキャッシュを促そうと言うものです。
上の gzip と同様、.htaccess へ以下のように記述します。
ExpiresActive On ExpiresByType text/css "access plus 3 days" ExpiresByType text/javascript "access plus 3 days" ExpiresByType application/x-javascript "access plus 3 days" ExpiresByType image/gif "access plus 30 days" ExpiresByType image/jpeg "access plus 30 days" ExpiresByType image/png "access plus 30 days" ExpiresByType image/vnd.microsoft.icon "access plus 30 days" ExpiresByType image/x-icon "access plus 30 days" ExpiresByType application/x-shockwave-flash "access plus 30 days" ExpiresByType video/x-flv "access plus 30 days" ExpiresByType video/mp4 "access plus 30 days"
これによりヘッダには、例えば以下のように返されます。
Expires: Thu, 01 May 2010 00:00:00 GMT
各ファイルと有効期限はお好みでどうぞ。
うちの場合は、テキストファイルは更新頻度が高いので短めに、画像関係は更新することはほとんど無いので30日にしてみました。
また、ブラウザをリロードすれば強制的にキャッシュが更新されるようなので、特に不便はなさそうかな？
3. ETag ヘッダを削除して、サーバー負荷を減らす
ETag ってなんだ？
あまり意識したことの無いヘッダです。。。
調べてみたら、どうもこれもブラウザのキャッシュに関係しているらしい。
通常、キャッシュはURLで管理されますが、それだと同一URLでPCと携帯のソースを分岐している場合（うちとか）は、それらの区別ができませんよね？ そこで、更にそれらへ固有のIDを関連付けることで、それらの識別を可能にしているようです。それがこの ETag だとか（合ってるかな？）
しかし、サーバーの設定によっては画像でもなんでもかんでも ETag を付加しちゃう場合があって、その度にサーバーはブラウザのリクエストを検証しなきゃならなくて、必然的に仕事が増えて大忙しに。。。自業自得じゃん（苦笑）
なので、ETag の必要のないファイルには ETag を付けさせないように設定しましょ、と言うことらしいです。
で、記述はこんな感じ。
上が設定対象、下が除外対象です。
ファイルの選定はサイトの状況に合わせてご検討ください。
<Files ~ "\.(css|js|html|xml)$"> FileETag MTime Size </Files> <Files ~ "\.(gif|jpe?g|png|flv|mp4)$"> FileETag None </Files>
以上で一通りの設定が完了です。
さあ、これでどのくらいサックサクになったのか？
いざチェックです。
計測には、Google の Page Speed と、Yahoo! の YSlow を使いました。
どちらも事前に Firefox の Firebug と言うアドオンが必要です。
結果は・・・
| サクサク度チェック | 施工前 | 施工後 | 備考 |
|---|---|---|---|
| Google Page Speed | 78/100 | 85/100 | 100点満点での評価 |
| Yahoo! YSlow | Grade (E) | Grade (C) | A～Fの6段階評価 （Aが優秀） |
うーん。。。思ったほど改善してないような。。。
これ以上、どないせぇと？
もう少し研究が必要みたい。。。
