Server

gzip圧縮でWebコンテンツを高速化

Category

Server

コンテンツの表示スピードを早くするには、「ファイルを最適化して容量を軽くする」「キャッシュを使う」「非同期通信を行う」等、方法はいろいろとあります。
HTML・CSS・JavaScript等のファイルを圧縮して、データの転送量を減らすことでコンテンツの表示スピードを早くするのもその方法の一つです。
今回は、Apacheのモジュールである"mod_deflate"と"mod_filter"を使ってファイルを圧縮し、転送量を減らすことでWebコンテンツを高速化する方法について書こうと思います。

Keyword:gzip圧縮,高速化,転送量削減

gzip圧縮でWebコンテンツを高速化

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-

▼表示イメージ

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圧縮した分トラフィックも減りコストが抑えられます。

List

関連記事(※当記事と関連性が高いと思われる記事)

Web制作で活用したいツール

2012/09/30
Web制作で活用したいツール
スコア:22 ※スコアの数値が大きいほど、関連性の高い記事です。 パフォーマンス測定 GTmetrix オンラインツール サイトの表示速度を計測 パフォーマンスの改善点を調査 ブラウザとサーバー間のやり取りを調査※時間・データサイズ・... 続きを読む...

Webサーバーに公開鍵認証を導入する

2011/12/30
公開鍵認証
スコア:20 ※スコアの数値が大きいほど、関連性の高い記事です。 公開鍵認証を導入することで、Webサーバーには公開鍵(authorized_keys)、SSH接続時にローカル環境上に秘密鍵(id_rsa)がないとアクセスできなくなり... 続きを読む...

Webデザインの効率化を図る

2011/12/23
Illustrator & Photoshop
スコア:19 ※スコアの数値が大きいほど、関連性の高い記事です。 Photoshopとの連携にIllustratorを使うのには、3つの理由があります。 イラストデータの活用 パスデータの活用 段組設定を活用し作業の効率化を図る の3... 続きを読む...

APCでPHPの処理を高速化

2012/06/12
APCでPHPの処理を高速化
スコア:5 ※スコアの数値が大きいほど、関連性の高い記事です。 PHPアクセレーターAPCとは? PHPアクセレーターとは、PHPのスクリプトを最適化してコンパイルされた状態でデータをキャッシュし、以後同じデータにアクセスがあった際... 続きを読む...

サーバーの設定変更

2012/02/17
サーバーの設定変更
スコア:3 ※スコアの数値が大きいほど、関連性の高い記事です。 php.iniの設定変更 viコマンドでphp.iniを編集 vi /etc/php.ini・・・viでphp.iniを開く ;メモリの上限を変更 memory_lim... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ