$yuzu->log();

技術ネタなど。

gzip圧縮を使ってWEBサイトを高速化しよう

WEBサイトの高速化にはいろんな手法があります。
今回はその中でApacheやNginxなどWEBサーバの機能、gzip圧縮を使って、コンテンツを圧縮、高速化を実現する方法をお送りします。

gzip圧縮とは?

gzip圧縮によるWEBサイト高速化のイメージは下記になります。

f:id:yuzurus:20150207010811p:plain

  1. クライアントから、index.htmlのリクエストを投げた時に、"Accept-Encoding: gzip" でブラウザーgzipをサポートしていることを通知。
  2. もしサーバがgzip対応していた場合コンテンツをgzip圧縮し、レスポンスヘッダに"Content-Encoding: gzip" を添えて返却。
  3. クライアントがレスポンスを受信したら"Content-Encoding: gzip"にもとづいて、ページを解凍。

圧縮によってデータの転送量を減らすことができるので、WEBサイトの高速化につながります。 主要のモダンブラウザはgzipに対応しています。

Apacheでのgzip圧縮設定方法

/etc/httpd/conf.d/gzip.confというファイルを新規に作成し、下記をコピペしてください。

<IfModule deflate_module>
        DeflateFilterNote Input instream
        DeflateFilterNote Output outstream
        DeflateFilterNote Ratio ratio
        LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
        CustomLog logs/deflate.log deflate

        DeflateCompressionLevel 1

        <Location />
                AddOutputFilterByType DEFLATE  \
                    text/plain \
                    text/html \
                    text/xml \
                    text/css \
                    application/xml \
                    application/xhtml+xml \
                    application/rss+xml \
                    application/atom_xml \
                    application/javascript \
                    application/x-javascript \
                    application/x-httpd-php

                # Netscape 4.x has some problems...
                BrowserMatch ^Mozilla/4 gzip-only-text/html

                # Netscape 4.06-4.08 have some more problems
                BrowserMatch ^Mozilla/4\.0[678] no-gzip

                # MSIE masquerades as Netscape, but it is fine
                BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

                BrowserMatch "\bMSIE [1-6]\." no-gzip

                # Don't compress images
                SetEnvIfNoCase Request_URI \
                \.(?:gif|jpe?g|png)$ no-gzip dont-vary

                <IfModule headers_module>
                        # Make sure proxies don't deliver the wrong content
                        Header append Vary User-Agent env=!dont-vary
                </IfModule>
        </Location>
</IfModule>

DeflateCompressionLevel ディレクティブは圧縮の程度を設定します。大きな値では、より圧縮が行なわれますが、 CPU 資源を消費します。 値は1(低圧縮) から2(高圧縮) です。 とりあえず1で良いと思います。 設定したら再起動すれば反映されます。

chromeのdev toolで確認するとちゃんと反映されてますね。

f:id:yuzurus:20150207013334p:plain

まとめ

もちろん圧縮することによってCPUは通常より消費しますが、ネットワーク帯域に比べれば気にすることはないでしょう。 各々で色々テストして最適な値を見つけてください。

サーバ構築の実際がわかる Apache[実践]運用/管理 (Software Design plus)

サーバ構築の実際がわかる Apache[実践]運用/管理 (Software Design plus)

広告を非表示にする