【設定方法あり】gzip圧縮でページの読み込みが速くなる仕組み

よこのじ（@yokonoji_work）です。

cssやjsファイルのデータサイズを小さくしてページの表示速度を向上させる方法にminify（ミニファイ）がありますが、gzip圧縮を利用すれば、よりデータサイズを小さくできてページ表示速度の向上に効果的です。今回はgzip圧縮の仕組みと設定方法をみていきます。

gzip圧縮とは？
gzipの仕組み
1. 圧縮の仕組み
2. データ転送の仕組み
gzipファイルを用意する方法
確認サイト

gzip圧縮とは？

gzip（ジージップ）は、圧縮データのフォーマットの１つです。html、css、jsファイルのようなテキストベースのファイルの圧縮に適しています。gzip圧縮するとファイルに.gzという拡張子が付きます。

Webページは、Webサーバーから送られたファイルをブラウザが受け取って表示させています。そのため、データサイズが大きく転送に時間がかかるファイルがあると、その分ページの表示も遅くなります。

そこで、転送データサイズを小さくするgzip圧縮を使用します。gzip圧縮したファイルは元のデータサイズの60～90%もデータを削減できます。これを利用すればデータ転送が速くなり、ページの表示速度が向上するというわけです。

gzipの仕組み

圧縮の仕組み

gzipは、繰り返し表れる文字列を代わりの文字列に置き換えることでデータサイズを縮小させています。どのようなことが行われているかのイメージとして、次の例をご覧ください（実際の圧縮操作とは異なります）。

元のデータ：hello world. hello world. hello world. hello world. hello world.
圧縮データ：hl wr. hl wr. hl wr. hl wr. hl wr.

この例は「hello world.」と繰り返されるデータを圧縮したものです。「hello world.」は繰り返し表れる文字列ですので、これを「hl wr.」と置き換えています。これにより文字数が64→34（47％削減）に縮小されて、データ転送が速くなります。圧縮データを受け取ったブラウザ側で解凍すれば、文字列は元に戻ります。

このようなことがgzip圧縮で行われています。

繰り返し表れる文字列はhtml、css、jsファイルの中には多くあります。例えば、タグ、クラス名、変数などです。よって、Webページを構成するファイルはgzip圧縮で大きくデータ削減できます。

ちなみに、画像や動画などは既に圧縮されたデータですので、gzip圧縮の対象から外すのが一般的です。

データ転送の仕組み

gzip圧縮されたファイルを扱うには、ブラウザがgzipに対応している必要があります。これは、ブラウザ側でgzip圧縮されたファイルを解凍する必要があるためです。しかし、特別古いバージョンのブラウザでなければ、すべてのブラウザが対応していますので、特に気にしなくても大丈夫です。

Can I use gzip ?

ブラウザがgzip圧縮されたファイルを受け取るためには、Webサーバーにgzip対応ブラウザであることを伝える必要があります。そして、Webサーバーはその情報を受けてgzip圧縮されたファイルをブラウザに転送します。

このとき、ブラウザはHTTPヘッダー情報の「Accept-Encoding: gzip」で、gzipに対応していることをWebサーバーに伝えています。その情報を受け取ったWebサーバーはgzip圧縮ファイルを転送したことを示す「Content-Encoding: gzip」を応答データとして返して、gzip圧縮ファイルを転送します。最後に、「Content-Encoding: gzip」を受け取ったブラウザはgzip圧縮ファイルを解凍してWebページを表示させます。

gzipファイルを用意する方法

gzip圧縮ファイルを用意する方法は大きく分けて2つあります。

ファイルを転送するたびにWebサーバーがgzip圧縮する【こちらをおすすめします】
あらかじめgzip圧縮ファイルを保存しておく

ファイルを転送するたびにWebサーバーがgzip圧縮する

これは、style.cssのような無圧縮のファイルをWebサーバーに置いておき、gzip圧縮ファイルのリクエストが来たらその時にWebサーバーがgzip圧縮して転送する方法です。Webサーバーが「mod_deflate」モジュールに対応していれば、サーバーの設定を行うだけで自動で圧縮をしてくれます。これらの主要なレンタルサーバーでは対応しています。

さくらインターネット
エックスサーバー
お名前.com
ロリポップ

設定を行うには「.htaccess」というWebサーバーの設定ファイルに設定コードを追記します。次のコードは、画像ファイル（gif、jpg、jpeg、png、ico）以外のすべてをgzip圧縮する設定となっています。.htaccessファイルへの記述はどこでも良いのですが、他の記述の途中に挿入しないために最後尾に追加するのが良いでしょう。.htaccessファイルはFTPソフトでWordPressが置かれているフォルダを確認すると見つかります。

<IfModule mod_deflate.c>
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
</IfModule>

ちなみに、私が利用しているさくらのレンタルサーバー（スタンダードプラン）では、初期状態でこのような記述がありました。gzip圧縮されているようです。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript
</IfModule>

Google Chromeの場合、F12でデベロッパーツールを開いて、Network -> CSSと進むとページ読み込み時のレスポンスを確認できます。ここでcontent-encodingをみるとgzipとなっていますので、gzip圧縮されたファイルを受け取っているのが分かります。

「ファイルを転送するたびにWebサーバーがgzip圧縮する」方法は設定が簡単で、あらかじめgzip圧縮ファイルを用意しておく手間もないというメリットがあります。その反面、圧縮のためにWebサーバーのCPUリソースを使用するためサーバー負荷が上がります。

gzip圧縮するとデータ転送時間は短くなりますが、圧縮と解凍のための時間がかかることには注意が必要です。これらの時間も考慮すると、gzip圧縮ファイルを利用するのはデータサイズが150～1000バイト以上の場合とするべきです。これより小さなデータサイズではデータ転送時間を縮小する効果が得られずに、圧縮と解凍の処理時間の分だけ処理が遅くなる可能性があるからです。まぁしかし、これほど小さなデータサイズのファイルを扱うことはほとんどないでしょうから、気にしなくて良いことかと思います。

あらかじめgzip圧縮ファイルを保存しておく

主要なレンタルサーバーにおいては「mod_deflate」に対応していないということはありませんが、圧縮のためにCPUリソースを使用される点については考える必要があります。多くのアクセスが集中した場合にサーバーの負荷が高くなり過ぎる懸念があるからです。

この影響を回避する方法として、Webサーバーで圧縮させずにあらかじめgzip圧縮ファイルを作って保存しておくという方法があります。これにはWebサーバーの「mod_rewrite」モジュールというURLの書き換えやリダイレクトを行うための処理を利用します。

通常のcss, jsファイルとgzip圧縮ファイルを用意しておき、ブラウザからの要求に応じて転送するファイルを選択するという方法です。そのため、gzip圧縮ファイルを自分で作ってアップロードする必要があります。gzip圧縮ファイルの作成を自動化する方法もあるようですが、知識を持った人が行うべき操作なので素人は手を出さないほうが良いでしょう。

そのため、「こういう方法もある」ということで関連記事のご紹介に留めておきます。

「gzip圧縮」でWebサイトを高速化しよう！【mod_rewrite編】

gzip 圧縮によるサイトパフォーマンスを向上させる方法

結論としては、「ファイルを転送するたびにWebサーバーがgzip圧縮する」方法をおすすめします。「あらかじめgzip圧縮ファイルを保存しておく」方法では、css, jsファイルを修正するたびにgzip圧縮ファイルを用意し直さないといけないため、うっかり忘れてしまうことも考えられますし、手間がかかる作業はやりたくないですよね。Webサーバーで圧縮するとCPUリソースが使われますが、個人ブログの利用においては影響ないと考えます。