Webサイトの表示が遅いと、それだけページの離脱率が上昇してしまいます。
そのため、SEOの観点からもWebサイトの読み込み速度は重要です。
あなたのサイトが遅い原因
Webサイトの読み込みが遅い原因の一つとして、いくつか挙げられますが、
Webサイトのパフォーマンスを計測できるツール「Google Search Console」を利用すると、Webサイトの読み込みが遅い原因を確認することができます。
「改善できる項目」の中に「テキスト圧縮の有効化」が表示されている場合は、
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 nginxCentOS 6 や Amazon Linux での例）
$ sudo service nginx reload