Apacheサーバのgzip圧縮最適化: 1. 確認方法
はじめに
先日天気データマップのWebサイト再立ち上げ作業を行いました。従来はHerokuなどのクラウドサービスから公開していましたが、今回はApacheレンタルサーバを利用しました。
自分には昔懐かしいApacheサーバなのですぐ設定できるだろうとたかをくくっていたら、gzip圧縮の最適化で結構苦労しました。そこで自分への復習も兼ねて解説記事を書いてみようと思います。
HTTPプロトコルの圧縮エンコーディング
ブラウザからWebページへのアクセスにはHTTPプロトコルを用いますが、HTTPには圧縮エンコーディングを用いたアクセス最適化機能があります。ここでその基本メカニズムを確認しておきます。
(参考) HTTPの勉強用、とてもよい解説です。
とほほのWWW入門 - HTTP入門 http://www.tohoho-web.com/ex/http.htm
HTTPプロトコルではまずクライアント(ブラウザ)からサーバに文書やデータを要求するメッセージを送信し、サーバは要求メッセージを読み応答メッセージと要求された文書やデータを返します。
この際データをサーバ側で文書やデータをgzipなどで可逆圧縮処理して返す機能をサポートしています。特にHTMLなどのテキスト文書は1/4～1/5程度に圧縮でき、通信データを大幅に削減しアクセスを高速化できます。
HTTPプロトコルではこれを次のように処理します。まずブラウザは要求メッセージの先頭(リクエストヘッダ)部分に次のような一行を追加します。
Accept-Encoding: gzip, deflate
これは「このブラウザはgzipとdeflateの圧縮に対応しています」という意味で、現行ブラウザはほぼ全てこのようなヘッダ情報を付けてサーバにデータを要求しています。
これに対し、gzip圧縮に対応しているサーバは応答メッセージの先頭部(レスポンスヘッダ)に次の一行を加えます。
Content-Encoding: gzip
これはもちろん「応答はgzip圧縮して返します」という意味で、ヘッダの後にメッセージボディとしてgzip圧縮されたデータを返信します。これをブラウザが認識しボディをgzip展開して表示します。
圧縮エンコーディングを用いるかどうかはファイルタイプによって切り替えます。基本的に圧縮が効果的なタイプだけgzipを有効にし、すでに圧縮処理されているタイプは無駄な処理になるのを防止するため無効にします
- HTML, CSS, JavaScript, CSVなどのテキストファイルは圧縮を有効にする
- JPEGやMP3などすでに圧縮してあるファイルタイプでは無効にする
確認方法
ブラウザがアクセスしたファイルに対して圧縮エンコーディングが用いられているかどうかはブラウザを使って調べることができます。ここではgoogle chromeのデベロッパーツールを使う場合を説明します。
他のブラウザは省略しますが、今のブラウザには大体このような開発者用ツールがあります(FirefoxのFireBugなど)。
まず調べたいサイトにアクセスし、デベロッパーツールを起動します(右上メニューから「その他のツール - デベロッパーツール」またはCtrl+Shift+I)。表示されたら「Network」タブを選択します。
この状態で再読み込みボタンを押すとWebページでアクセスしている全ファイルの詳細情報を表示します。左端の列のファイルリストから調べたいファイルをクリックすると、そのファイルのHTTPアクセスに関する詳細情報を表示します。
「Headers」タブを選択すると送受信のヘッダ情報を表示します。
確認事項は次の3点です。
- ステータスコード
- 200 OK は正常に応答し、ボディ(データ)を返したことを表します。
- 再読み込みでは 304 Not Modified を返すことがあります。これは「前回アクセスしているのでその時のキャッシュを使ってね」という意味でボディは空です。この場合は再読み込みボタンを押し続け「ハード再読み込み」すれば200で応答します。
- リクエストヘッダに
Accept-Encodingがあり、gzipが含まれていること- HTMLでは必ず設定されますが、別のファイルタイプでは設定されない可能性もあります。
- レスポンスヘッダに
Content-Encoding: gzipがあるかどうか- これが存在していればgzip圧縮されています
curlを用いた確認方法
ブラウザではなくコマンドラインツールでも確認できます。wgetとcurl(cURL)の2つが有名ですが、開発時確認用にはcurlが適しています。
curlの-vオプションを使うと送受信時のリクエスト/レスポンスヘッダを確認できます。curlはボディをコンソール出力するため、必要に応じてリダイレクトを併用します。curlはデフォルトではAccept-Encodingを付けずにサーバにアクセスします。
$ curl -v http://example.com/index.html [> index.html]
-Hオプションを使えば必要なリクエストヘッダを追加できます。
$ curl -v -H "Accept-Encoding: gzip" http://example.com/index.html [> index.html]
