Nginx で 静的コンテンツの gzip圧縮 に対応する

Webサイトの表示が遅いと、それだけページの離脱率が上昇してしまいます。
そのため、SEOの観点からもWebサイトの読み込み速度は重要です。

今回は、Nginxの設定で静的コンテンツのgzip圧縮に対応して、
Webサイトの表示速度を向上させる方法を紹介します。

目次

あなたのサイトが遅い原因

Webサイトの読み込みが遅い原因の一つとして、いくつか挙げられますが、
Webサイトのパフォーマンスを計測できるツール「Google Search Console」を利用すると、Webサイトの読み込みが遅い原因を確認することができます。

改善できる項目として"テキスト圧縮の有効化"が表示され、数秒のサイトの読み込み時間短縮が期待できる。
Google Search Console

「改善できる項目」の中に「テキスト圧縮の有効化」が表示されている場合は、
gzip圧縮を行い、HTMLやCSS、JavaScriptといったテキスト形式の静的コンテンツの容量を削減することで、サイトの読み込みを高速化することができます。

「次世代フォーマットでの画像の配信」への対応については、別な記事で紹介します。

gzip圧縮とは

gzipとは圧縮データのフォーマットのことを指します。zipとかtarとかの仲間です。

Webの世界では、Webブラウザからのテキスト形式の静的コンテンツ要求に対して、
Webサーバーがgzip圧縮をしてファイルの容量を削減したものを返却し、Webブラウザでファイルを展開(解凍)して読み取ることで、通信容量を節約することができます。

gzip圧縮されたファイルをブラウザで展開(解凍)するので、ブラウザ側も対応していないといけないのですが、
最近のほとんどのブラウザで、gzip圧縮に対応しています。(IE6はgzip圧縮に非対応)

Nginxでgzip圧縮対応

設定例

(省略)

http {
  include /etc/nginx/mime.types;
  default_type  application/octet-stream;

  gzip                          on;
  gzip_disable                  "msie6";
  gzip_vary                     on;
  gzip_proxied                  any;
  gzip_min_length               1024;
  gzip_comp_level               6;
  gzip_types                    text/plain
                                text/xml
                                text/css
                                text/javascript
                                image/svg+xml
                                application/javascript
                                application/x-javascript
                                application/json
                                application/xml
                                application/xml+rss
                                application/font-tff
                                application/octet-stream;

  include /etc/nginx/conf.d/*.conf;
}
gzip

“on”でgzip圧縮を有効にする。

gzip_disable

gzip圧縮を無効化したいブラウザを指定する。
IE6では対応していないので、”msie6″と書いておく。(IE6使っている人見たことないし、もはやおまじない)

gzip_vary

レスポンスヘッダーに「Vary: Accept-Encoding」を追加する。
NginxよりフロントでCDNやリバースプロキシがある場合は、”on”に設定しておく。

gzip_proxied

gzip_vary on;の設定にしている場合は、こちらも設定する。

gzip_min_length

gzip圧縮する最小のファイルサイズを指定する。
あんまり小さいファイルをgzip圧縮しても通信容量を抑えられない。

gzip_comp_level

圧縮レベルを設定する。 0は非圧縮。

gzip_types

ここが重要な設定。圧縮するコンテンツタイプ(Content-Type)を指定します。
JPEGやMP4等は既に圧縮されているので、gzip圧縮してもあまり効果がない。むしろ圧縮/解凍によってパフォーマンスの低下も招く可能性があるので書かない。
また、text/htmlはデフォルトでgzip圧縮されるので、書かない。

設定を適用する

nginx -tで設定に誤りが無いことを確認する。

$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

設定ファイルを読み込み直す。

CentOS 7 や Amazon Linux 2 での例:

$ sudo systemctl reload nginx

CentOS 6 や Amazon Linux での例)

$ sudo service nginx reload

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
目次
閉じる