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

gzip圧縮とは？

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

f:id:yuzurus:20150207010811p:plain

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