gzip圧縮でCSSやJSなどの転送量を減らす方法

「gzip」とは、ファイルを「圧縮」する方法の1つです。圧縮というのは、独自のデータ形式でファイルサイズを一時的に小さくすること。つまり、ウェブページのサーバーとユーザーのパソコン間で通信しているデータサイズを少なくするのが、今回設定する「gzip圧縮」の効果なんです。サイズが小さくなることで、ページの表示がより高速になることはもちろん、転送量が減るので利用しているサーバによっては、料金の節約にも繋がります。

mod_deflateで一括設定する

「mod_deflate」というモジュールを利用して、サーバーからブラウザに転送するデータを圧縮する方法です。.htaccessを編集します。レンタルサーバーを利用している場合は、このモジュールが使用可能かを、確認しておきましょう。

この方法のメリットは、CSSやJavascriptなど、あらゆるファイルを細かい設定なしに自動で圧縮してくれること、要は「これだけ設定しておけば後は勝手にやってくれる」というお手軽さです。対してデメリットは、ブラウザがアクセスする度に、圧縮処理をするため、サーバーのCPU負荷が上がってしまうことです。

.htaccessの記述

.htaccessに下記のコードを追加して下さい。1行目のSetOutputFilter DEFLATEで全てのファイルを有効にし、5行目で画像(.gif、.jpg、.png、.ico)を除外するよう設定しています。2〜4行目は古いブラウザへの対応で、Apache公式サイトのガイド通りとなっています。

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
Header append Vary User-Agent env=!dont-vary