データ通信量を減らすためにApacheでmod_expiresとmod_deflateを設定

このごろ自分のブログを整備し始めてるんだけど、なんか遅えなー。サーバースペックは十分なはずなのになんでこんなにページスピード遅いんだろう。。

というのが気になったのでGoogle Pagespeed insightを使って調べてみた。まず PageSpeed Insights に飛んで、自分のブログのURLを入力。今回は画像多めに使ってる 古宇利島の記事 をテストしてみました。

んー点数低い…。100点満点でモバイル21 / パソコン26…。なんでこんなに低いんだろうと思ったら、ちゃんと 改善手段を提示してくれる Googleさま！

さすがです！ここに書いてある「 ブラウザのキャッシュを活用 」をやるために先人の知恵を拝借します。mod_expiresとmod_deflateを.htaccessに設定 僕が使ってるサーバーは自分で組んだUbuntu Serverを使っているので、基本的にサポートはなにもなくて、サーバーの設定からバックアップまで全部自分でやってます。

専用サーバーを丸々一台持ってる感じ。チューニング・カスタマイズはあまりやってませんでした。なのでとりあえず「ブラウザのキャッシュを活用」するために、以下の記事を参考にサーバー側でその設定を。

WordPressサイト用の.htaccess例 | dogmap.jp .htaccessでwordpressの圧縮、キャッシュ設定をやってみた！| STYLE-EASY mod_expires はjpg png gif css javascriptなどのブラウザキャッシュの有効期限を決める設定です。ブラウザキャッシュが設定されてない場合、ページへアクセスするたびにサーバーへリクエストが発生するからファイルを取り出す必要があるんだけど、データ通信量を節約するためにmod_expiresを設定します。

mod_expiresはapacheのモジュールの一つで、.htaccessに記述します。.htaccessは、それを設定したディレクトリ以下に設定が適用されるため、ルートディレクトリ（今回は/var/www/）に配置。

ExpiresActive On

ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType application/x-shockwave-flash "access plus 216000 seconds" via : WordPressサイト用の.htaccess例 | dogmap.jp もう一つ.htaccessに mod_deflate の設定を記述します。

mod_deflate は、サーバー側でデータを圧縮する設定（gzip圧縮）で、データ通信量を削減させることができます。最近のモバイル回線が速くなってきたとはいえ、LTE回線で100Mbpsとはいえ、まだまだ3Gで繋がるときもあるし、iPhoneやAndroidでスマホサイトを見るときは軽ければ軽いほどいいと思うので、コンテンツを圧縮させることにしました。ただ、mod_deflateを使うデメリットとして、圧縮する度にCPU負荷が上がっちゃうようです。

アクセスリクエストが発生する度にCPUが頑張ってデータを圧縮するので負荷が上がるそうですが、今使ってるサーバーのCPUはCore i3でCPU使用率にそこそこ余裕あるので、CPU負荷は気にせずに以下を設定。

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|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _.utxt$ no-gzip

#DeflateCompressionLevel 4

AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml 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 font/opentype AddOutputFilterByType DEFLATE image/svg+xml dogmap.jpさんを参考に。

Webフォントも使いたくなっちゃったのでフォントのttf、otfも圧縮の対象にしてます。ちなみに、圧縮したデータはmod_expiresのキャッシュ対象にはならないようです。まだ未確認ですが。

とりあえずこの設定を済ませたのでもう一度 PageSpeed Insights でリベンジ！！mod_deflateとmod_expires の設定を済ませた後の点数がこちら。

けっこう上がった！点数アップ…！.htaccessの設定は効果ありますね。

これくらい伸びるならまぁとりあえずはオッケーでしょうー。

ほんとサーバー周りは奥が深いなぁ。

Apache htaccess Ubuntu サーバー ブログ

Images