gzip圧縮でWebコンテンツを高速化
Category
Server
コンテンツの表示スピードを早くするには、「ファイルを最適化して容量を軽くする」「キャッシュを使う」「非同期通信を行う」等、方法はいろいろとあります。
HTML・CSS・JavaScript等のファイルを圧縮して、データの転送量を減らすことでコンテンツの表示スピードを早くするのもその方法の一つです。
今回は、Apacheのモジュールである"mod_deflate"と"mod_filter"を使ってファイルを圧縮し、転送量を減らすことでWebコンテンツを高速化する方法について書こうと思います。
Keyword:gzip圧縮,高速化,転送量削減
Apacheのモジュールmod_deflateとmod_filter
Apacheのモジュールである”mod_deflate”と”mod_filter”について少し説明します。
mod_deflateモジュール
簡単に説明すると、サーバからの出力をネットワーク介してクライアントに送る前に圧縮することを可能にするモジュールです。
今回、Webコンテンツをgzip圧縮するのにこのモジュールを使用します。
[参考リンク]
Apacheモジュールmod_deflate
mod_filterモジュール
mod_deflateモジュールを使用してファイルを圧縮する場合、”AddOutputFilterByTypeディレクティブ”でMIMEタイプに応じて出力フィルタを割り当てます。
例えば、以下のようにすると…
AddOutputFilterByType DEFLATE text/html text/css
HTMLとCSSをMIMEタイプに指定し、圧縮することになります。
ですが、この”AddOutputFilterByTypeディレクティブ”は、Apache2.1以降では非推奨となっています。その理由は、AddOutputFilterByTypeディレクティブにより有効にしたフィルタは、場合により部分的もしくは完全に適用されないことがあるため、同等の機能を利用できるmod_filterモジュールを使用することが推奨されているためです。
[参考リンク]
AddOutputFilterByTypeディレクティブ
mod_deflateとmod_filterでWebコンテンツをgzip圧縮して転送する
mod_filterモジュールを使用しますので、Apache2.1移行を前提に説明していきます。
まず、Apacheの設定でmod_deflate・mod_filterモジュールをロードします。
両方とも、Apache2.1移行ではデフォルトで使用可能なはずですので、httpd.confでモジュールをロード(有効)にします。
httpd.conf
# httpd.confを編集 vi /etc/httpd/conf/httpd.conf # mod_deflateモジュールをロード LoadModule deflate_module modules/mod_deflate.so # mod_filterモジュールをロード LoadModule filter_module modules/mod_filter.so # httpd.confを保存後、Apacheを再起動 /etc/rc.d/init.d/httpd restart
補足
●httpd.confを編集
viコマンドでhttpd.confを編集します。
●mod_deflateモジュールをロード
mod_deflateモジュールをロードします。
コメントアウトされている場合は、#(シャープ)を外してください。
●mod_filterモジュールをロード
mod_filterモジュールをロードします。
私の環境では、モジュールは初めからインストールされていましたが、httpd.confに記述がありませんでしたので、追記しました。
※Apache2.1移行でしたら入っているはずです。
●httpd.confを保存後、Apacheを再起動
設定を反映させるためにApacheを再起動します。
.htaccessもしくはhttpd.confに以下を追記します。
.htaccess or httpd.conf
# GZIP転送フィルタ設定 FilterDeclare Compression CONTENT_SET FilterProvider Compression DEFLATE resp=Content-Type $text/html FilterProvider Compression DEFLATE resp=Content-Type $text/xml FilterProvider Compression DEFLATE resp=Content-Type $text/css FilterProvider Compression DEFLATE resp=Content-Type $text/plain FilterProvider Compression DEFLATE resp=Content-Type $image/svg+xml FilterProvider Compression DEFLATE resp=Content-Type $application/xhtml+xml FilterProvider Compression DEFLATE resp=Content-Type $application/xml FilterProvider Compression DEFLATE resp=Content-Type $application/rdf+xml FilterProvider Compression DEFLATE resp=Content-Type $application/rss+xml FilterProvider Compression DEFLATE resp=Content-Type $application/atom+xml FilterProvider Compression DEFLATE resp=Content-Type $text/javascript FilterProvider Compression DEFLATE resp=Content-Type $application/javascript FilterProvider Compression DEFLATE resp=Content-Type $application/x-javascript FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-ttf FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-otf FilterProvider Compression DEFLATE resp=Content-Type $font/truetype FilterProvider Compression DEFLATE resp=Content-Type $font/opentype FilterChain Compression
補足
2行目の”FilterDeclareディレクティブ”でフィルタを宣言します。
“Compression”がフィルタ名となります。
3行目~19行目の”FilterProviderディレクティブ”でフィルタ(Compression)にプロバイダ(DEFLATE)を登録し、フィルタの条件(resp=Content-Type $text/html等)を指定します。
20行目の”FilterChainディレクティブ”でフィルタ(Compression)を実行します。
指定したフィルタ条件(ファイルのMIMEタイプ)でgzip圧縮のみを行いたい場合、上記の.htaccessをサーバーの指定ディレクトリ(gzip圧縮を行いたいディレクトリ)にアップロードするか、httpd.confに追記すればよいのですが(※httpd.confに追記した場合、設定を反映させるためApacheを再起動)、もっと細かく設定を行いたい場合、mod_deflateの設定ファイル(deflate.conf等)を作成して、/etc/httpd/conf.dディレクトリ内にでも置いてみてください。
※以下で説明します。
gzip圧縮を行う場合、対応していないブラウザへの設定やproxyサーバー経由のアクセスによるキャッシュの問題があげられます。
個人的には、対応していないブラウザに関しては、”NetScape4.xとNetScape4.06-4.08のバグ対策”があげられますが、現状で「まだ使ってる人っている?」と思いますし、proxyサーバー経由のアクセスによるキャッシュの問題に関しても、Varyヘッダに”Accept-Encoding”を付加することで、gzip対応クライアントと非対応クライアントで使用するキャッシュを分けることができますが、Apache2以降のmod_deflateでは、デフォルトでVaryヘッダに”Accept-Encoding”を付加しますので、フィルター条件の追加だけでもよいと思うのですが、以下も参考にしてみてください。
deflate.conf
<IfModule deflate_module> <Location /> # NetScape4.x BrowserMatch ^Mozilla/4 gzip-only-text/html # NetScape4.06-4.08 BrowserMatch ^Mozilla/4\.0[678] no-gzip # Internet Explorer BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html # フィルタ設定 FilterDeclare Compression CONTENT_SET FilterProvider Compression DEFLATE resp=Content-Type $text/html FilterProvider Compression DEFLATE resp=Content-Type $text/xml FilterProvider Compression DEFLATE resp=Content-Type $text/css FilterProvider Compression DEFLATE resp=Content-Type $text/plain FilterProvider Compression DEFLATE resp=Content-Type $image/svg+xml FilterProvider Compression DEFLATE resp=Content-Type $application/xhtml+xml FilterProvider Compression DEFLATE resp=Content-Type $application/xml FilterProvider Compression DEFLATE resp=Content-Type $application/rdf+xml FilterProvider Compression DEFLATE resp=Content-Type $application/rss+xml FilterProvider Compression DEFLATE resp=Content-Type $application/atom+xml FilterProvider Compression DEFLATE resp=Content-Type $text/javascript FilterProvider Compression DEFLATE resp=Content-Type $application/javascript FilterProvider Compression DEFLATE resp=Content-Type $application/x-javascript FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-ttf FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-otf FilterProvider Compression DEFLATE resp=Content-Type $font/truetype FilterProvider Compression DEFLATE resp=Content-Type $font/opentype FilterChain Compression # proxyサーバー経由のアクセス対応 Header append Vary Accept-Encoding env=!dont-vary </Location> </IfModule>
補足
●NetScape4.x
NetScape4.xのバグ対策(htmlのみ圧縮する)。
●NetScape4.06-4.08
NetScape4.06-4.08のバグ対策(圧縮を無効にする)。
●Internet Explorer
Internet Explorerはgzip圧縮に対応していますが、User-Agentが上記と同じMozilla/4ですので、このままでは無効化されてしまいます。そのため、上記で定義した環境変数を取り消し、gzip圧縮できるようにします。
10行目の”(7|8)”は、バージョン7・8を意味します。
バージョン6は、バグがあるため含めていません。
バージョン9は、User-AgentがMozilla/5ですので、書く必要はありません。
●proxyサーバー経由のアクセス対応
“Header append Vary User-Agent env=!dont-vary”といったようにVaryヘッダにUser-Agentの項目を追加する方法もありますが、ユーザーエージェントごとにキャッシュ保持することになるため、キャッシュの効率が落ちてしまいますので、Varyヘッダには、Accept-Encodingを指定しています。
Webコンテンツがgzip圧縮されているか確認する
設定の反映状況、どれくらいWebコンテンツの容量が圧縮されているかを確認します。
以下ツールを使えば、簡単にgzip圧縮されたコンテンツを確認できます。
⇒ GIDNetwork -GIDZipTest-
▼表示イメージ
上記では、画像の圧縮は行われません。
Photoshop等で加工した画像は、既にPNGやJPEG等で圧縮されていますし、gzip圧縮の必要はないと思います。「でも、画像の容量を削減して、さらにコンテンツを軽量化したい…」という方には、Yahoo!のSmush.itなんかがお勧めです。Smush.itは、画像そのものを圧縮するわけではなく、画像に付加されている情報を取り除き再保存しますので、画像の質(綺麗さ)はそのままサイズダウンすることができます。アクセスが集中している時はつながりにくい時もよくありますが、便利なツールの一つです。
⇒ Yahoo! Smush.it
gzip圧縮を実装する際の注意点とおすすめの使い方
gzip圧縮を実装する際の注意点
コンテンツ自体は圧縮されてデータの転送量は軽くなっていますので、ページを表示する際のスピードは速くなります。ですが、リクエストがある度に圧縮を行いますので、サーバーの負荷にはつながります(CPUの使用率やメモリの消費等)。ある程度スペックに余裕があるサーバーを使用したり、サーバーに負荷がかかるようなサービスを行っていないような状況で使用することをおすすめします。
おすすめの使い方
EC2等AWS(Amazon Web Services)のような従量制料金サービスでの利用がおすすめです。AWS(Amazon Web Services)の場合、インスタンスの稼働時間に対して課金されるため、CPUの負荷が大きくてもコストは変わらないですし、データの転送量に対しても課金されるため、データをgzip圧縮した分トラフィックも減りコストが抑えられます。
関連記事(※当記事と関連性が高いと思われる記事)
Web制作で活用したいツール
2012/09/30Webサーバーに公開鍵認証を導入する
2011/12/30Webデザインの効率化を図る
2011/12/23APCでPHPの処理を高速化
2012/06/12サーバーの設定変更
2012/02/17おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)