mod_deflateで圧縮転送！mod_expiresでキャッシュ活用！高速化でSEO効果あり！
2016/02/15
先月末に、さくらインターネットにサーバーを引っ越して以来、お試し期間中の転送量制限に悩まされていました。
これまで行った対策として、画像最適化と圧縮で画像のファイルサイズを抑えたり。
【WordPressプラグイン】画像の圧縮・最適化で転送量激減！SEO効果あり！【EWWW Image Optimizer】
そもそも画像をよそのサーバーに置いて配信させたりしました。
【WordPressプラグイン】無料CDNで転送量激減！高速化でSEO効果あり！【Jetpack Photon】
これによって、大幅に転送量を減らすことが出来て、もうエラーは出ないだろうと思っていたんです。
しかしですよ…。転送量を5GB以下にまで抑えても、503エラーはまだ結構な数が発生していたのです。
これまで対策を行う過程で、Googleの「PageSpeed Insights」の存在を知って、まだ対策できることがあることが分かっていました。
それが今回紹介する、「mod_deflate」で圧縮転送することと、「mod_expires」でキャッシュを活用させることです。
どちらもWebサーバーApacheの拡張モジュールで、レンタルサーバーが対応している必要があります。
さくらのレンタルサーバーはどちらも対応しているということなので、早速設定することにしました。
実際に設定する方法は「.htaccess」ファイルにちょっとコピペするだけなのでとても簡単です！
ローカル環境（XAMPP等）でテストする際には、「mod_deflate」と「mod_expires」を有効にする必要があるので、その方法も紹介します。
それではその設定方法や、有効になっているかの確認、実際の効果の程を順に紹介したいと思います。
スポンサーリンク
「mod_deflate」の設定
「.htaccess」ファイルに以下の内容を追記します。場所は好きな場所で構いませんが、何かの途中に突っ込むとかは駄目です…！先頭か末尾が無難です。
# gzipで圧縮して転送する <IfModule mod_deflate.c> # Mozilla4、IE7-8は正しく動作しないので制限をかける BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html # 画像等は再圧縮させない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary # プロキシサーバに圧縮済みのキャッシュを送信する対象を制限させる Header append Vary Accept-Encoding env=!dont-vary # 圧縮するコンテンツタイプを指定 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/js AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-woff AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/vnd.ms-fontobject </IfModule>
これだけでOKです！
詳しい説明はApacheのドキュメントに載ってますので、そちらを確認しましょう。
mod_deflate – Apache HTTP サーバ バージョン 2.2
ローカル環境で「mod_deflate」を有効にする
XAMPPの例ですが、Apacheの設定ファイルはデフォルトだと「C:\xampp\apache\conf\httpd.conf」にあります。
その中にある以下の2点「mod_deflate」「mod_filter」のモジュールを有効にします。
（先頭のコメント化している「#」を消して保存する）
#LoadModule deflate_module modules/mod_deflate.so #LoadModule filter_module modules/mod_filter.so
設定ファイル変更した後は、Apacheを再起動させないと反映されないので、再起動させてください。
参考：php – How to enable GZip compression in XAMPP server – Stack Overflow
「mod_deflate」が有効になっているか確認する
ブラウザの開発者向けツールを使います。Chromeの場合、「F12」とか「Ctrl＋Shift＋i」等で出てきます。
ネットワークタブで、圧縮を有効にしたタイプのコンテンツを選択して、ヘッダー（Response Headers）を確認します。
「Content-Encoding」が「gzip」になっていれば、「mod_deflate」有効になっていて、圧縮されて配信されています。有効にする前と比べてコンテンツサイズが減っているはずです。
「mod_expires」の設定
「.htaccess」ファイルに「mod_deflate」と同じように以下の内容を追記します。
# ブラウザにキャッシュさせる <IfModule mod_expires.c> ExpiresActive On # 基本的にはキャッシュさせない ExpiresDefault "access plus 1 second" # コンテンツタイプ毎に期間を指定 ExpiresByType text/css "access plus 1 year" ExpiresByType text/js "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType application/pdf "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType application/x-javascript "access plus 1 year" ExpiresByType application/x-shockwave-flash "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" </IfModule>
各項目の詳しい説明はApacheのドキュメントを確認しましょう。
mod_expires – Apache HTTP サーバ バージョン 2.2
適切なキャッシュ期間
自分のサイトの特性、どういう運用をしているのか、ユーザーに対する考え方などによるので一概にどれが正解とは言えません。
当サイト「はぴすぷ」の場合は更新頻度も高くなく、ほとんどが検索流入で、リピーターのアクセスは全体の2割程度です。
そんな頻繁に同一人物がアクセスするわけではないので、キャッシュ期間が1週間程度では恐らくほとんど効果はありません。1ヶ月でも効果は薄いと思っています。
そもそも、当サイトの静的コンテンツの運用は、画像の差し替えは別名に変更、jsやcssの更新はクエリに付けているバージョンを上げて即時反映させています。
なのでページを高速に表示させる、転送量を抑える意味では、キャッシュ期間はほぼ無期限に近い値にしてしまうのが良いはずです。とは言え、2度と来ることのないユーザーも大量にいるはずで、無駄に容量を消費させるのも考えものかなと、当サイトの場合は全て1年に設定しました。
1年はさすがにやり過ぎかな？と3ヶ月か半年あたりにするかも考えました。
他のサイトを参考にしてみようと調べてみると、おおよそ以下の様な感じだったので、長すぎるというわけでもなさそうです。
| 1week | |
| 2week | |
| mixi | 1year |
| Amazon | 20year |
| 楽天 | 1year |
| YouTube | 1week |
| ニコ動 | 1year |
| Photon | 2year |
※一部の画像ファイルを確認したもので、物によって違う設定になっているものも存在しました。
頻繁にアクセスするようなSNSサイトなどは比較的短めで、たまにしかアクセスしないような通販サイトは長めに設定する傾向があるような気がしますね。Amazonさんの20年はパネェっすｗ
ちなみに、今利用しているWordPressのCDNサービス「Photon」では、2年のキャッシュ期間が設定されていました。
ローカル環境で「mod_expires」を有効にする
これも「mod_deflate」と同じように、Apacheの設定ファイル（C:\xampp\apache\conf\httpd.conf）を変更します。
以下の行を探して有効にしましょう。
#LoadModule expires_module modules/mod_expires.so
設定ファイル変更した後は、Apacheを再起動させてください。
参考：mod expires – XAMPP how to load mod_expires – Stack Overflow
「mod_expires」が有効になっているか確認する
これも「mod_deflate」と同じように、ブラウザの開発者向けツールを使って確認します。
ネットワークタブで、圧縮を有効にしたタイプのコンテンツを選択して、ヘッダー（Response Headers）を確認します。
「Cache-Control」で「max-age=******」のように指定した秒数が設定されていれば、「mod_expires」有効になっていて、ブラウザにキャッシュされるようになっています。
「mod_deflate」と「mod_expires」の効果
実際に「mod_deflate」と「mod_expires」を導入することで、どれだけページの表示速度が上がって、転送量が下がるのかを見てみます。
PageSpeed Insightsの結果
ほぼ同じ時間に1回ずつ測定しました。
導入前
モバイル：52
パソコン：64
「mod_deflate」導入後
モバイル：55（+3）
パソコン：69（+5）
更に「mod_expires」も導入
モバイル：59（+4）（計+7）
パソコン：71（+2）（計+7）
Google先生からの評価が結構向上しました！いい感じです( ･`д･´)これでSEO的に有利になるはずです。
転送量の削減
今回の「mod_deflate」と「mod_expires」を導入したのは2/5の17時頃です。
導入後はPV数が導入前より増えていても、転送量は減っているので、かなりの効果が得られました。およそ2～3割の削減といった感じです。
終わりに
今回の対応でGoogle先生の評価が思ってたより上がって、更に転送量も抑えることが出来ました。
ただ、「mod_deflate」でgzip圧縮をする場合はCPUに負荷をかけて処理をするので、サーバーに負担がかかります。
圧縮によって転送量はもちろん下がってくれるのですが、サーバーの処理能力が低い場合は、応答速度がかなり遅くなくなる可能性もあります。
恐らく極端に安いレンタルサーバーでなければ、そこまで応答速度が遅くなるということも無いと思いますが、確認はしておきましょう。
たった数行の設定をコピペするだけで、お手軽に試すことは出来るので、是非効果の程を確認してみて下さい！
それでは。
