1.023world - ヤドカリパークとマリンアクアリウム -

海洋の仕組みと細菌・微生物から学ぶマリンアクアリウムサイト

1.023world Facebook

結果 Oh! Life (旧ブログ)

懲りずに書いてみたりする結果オーライな日記

サーバー負荷・トラフィックをとことん軽減する

LEDネタ、いつ書くんだろう。。。(汗)

ただいま仕事そっちのけでサーバーいじってます(汗)
だって試用期限が決まってるし、サーバー費用は生活にも支障をきたしますから(曝)

ちなみに当サイトは、ちょうど2年前から専用サーバーで運用しています。ひぃぃぃ。
で、契約当初は一番安いプランでしたが、その後すぐにアップアップで2番目のプランへ移行(笑)、そして今回ついに最上位プランの扉を叩きました。開けたくないけど(汗)

さて、今回はサーバーの負荷やトラフィック軽減のため、以下の3項目について徹底的に対策をおこないました。

  1. プレーンなテキストファイルを gzip 圧縮でレスポンス
  2. ファイルへ有効期限を付加し、キャッシュを促す
  3. 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.6KB4.6KB になり、またトップページ全体(CSS、JS、画像すべて含め)では、488.4KB311.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が優秀)

うーん。。。思ったほど改善してないような。。。
これ以上、どないせぇと?
もう少し研究が必要みたい。。。

こちらのエントリーもどうぞ♪