Webページのコンテンツ圧縮（gzip圧縮）

クロス・マーケティンググループ エンジニアのYKです。

この記事は社内勉強会での発表内容に基づいています。

コンテンツ圧縮（gzip圧縮）の概要

サーバーレスポンスの際に、コンテンツを圧縮して配信すること。

gzip対応ブラウザ

すべてのブラウザが対応しています。

https://caniuse.com/?search=gzipにて調査しました。

gzipの設定方法（Nginx・Apache）

共通の注意点

• 圧縮済みのコンテンツ（画像 / 動画 / 音声 / PDF / 他）は圧縮の対象外にする。

  • ファイルサイズはほぼ変わらず（場合によってはサイズが大きくなることもある）、CPUリソースを消費
    • その結果、表示速度が落ちる。

• 圧縮にCPUリソースを使用するため、CPUリソースに余裕があるか要確認。

Nginxの場合

nginx.conf

http {
   gzip            on;
   gzip_types      text/css
                    application/javascript;
}

Apache ~2.1系の場合

.htaccess

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/javascript
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
Apaceh 2.2,2.3
.htaccess
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        FilterDeclare Compression CONTENT_SET
        FilterProvider Compression DEFLATE resp=Content-Type $text/html
        FilterProvider Compression DEFLATE resp=Content-Type $text/css
        FilterProvider Compression DEFLATE resp=Content-Type $application/javascript
        FilterChain Compression
    </IfModule>
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

※AddOutputFilterByTypeはApache 2.2系から非推奨となり、mod_filterを使用する方法が推奨。

Apache 2.4〜

.htaccess

<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        FilterDeclare COMPRESS
        FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} =~ m#^text\/html#"
        FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'text/css'"
        FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/javascript'"
        FilterChain COMPRESS
        FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
    </IfModule>
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

※2.4系から構文が変更されています。

実際に弊社のWebサービス2つでgzip圧縮あり・なしを比較してみました

サービスA 開発環境

1回の計測数字のため、読み込みスピードに関しては参考値としてご覧ください。

転送量が41.2%（10.6MB）も削減できています。

サービスB 開発環境

1回の計測数字のため、読み込みスピードに関しては参考値としてご覧ください。

転送量が81.4%（4.8MB）も削減できています。

どちらのサービスも、minifyなどで圧縮を行っていないので、minifyなどでの圧縮を行うと更に転送量が削減できるかと思われます。

実際に弊社のWebサービス2つでgzip圧縮をしたら、インフラコストがどれだけ下がるかを計算してみる

サービスA 開発環境

上で紹介したサービスAです。

ある月で1.7TBの転送量、$241.37かかっているのが、41.2%転送量が下がるので、$141.92となります。

円安の影響で現在レートだと135円/$1なので、32,584円が19,159円まで減る事になります。

サービスB 開発環境

上で紹介したサービスBです。

ある月で12.14GBの転送量、$1.70かかっているのが、41.2%転送量が下がるので、$0.31となります。

円安の影響で現在レートだと135円/$1なので、229円が41円まで減る事になります。

実は弊社で、昨年末にSEO対策の一環でgzip圧縮を行ったサービスがあるので、その実績値を公開

圧縮前は、945.06GBで、$110.14です。

これが圧縮後になると、653.35GBで$77.76となっています。

約30％の費用削減となりました。このサービスは画像が非常に多いという特性があったため、あまり圧縮率が高くない傾向となりました。

画像の圧縮に関しては、すべてのブラウザが対応しているわけではありませんが、メジャーどころは対応している、WebPを使用するという選択肢があるかと思います。

比較対象の画像フォーマットによりますが、25~34%ほどの圧縮率があるそうです。

弊社では採用例がありませんが、今後採用した際には、またブログにて記事にしようと思っています。