前書き
Webサイトの読み込み速度は、ブラウザーでダウンロードする必要があるすべてのファイルのサイズによって異なります。 送信するファイルのサイズを小さくすると、Webサイトの読み込みが速くなるだけでなく、帯域幅の使用料金を支払う必要があるユーザーにとっても安価になります。
gzip
は、一般的なデータ圧縮プログラムです。 gzip
を使用して、オンザフライで提供されるファイルを圧縮するようにNginxを構成できます。 これらのファイルは、Webサーバーとブラウザ間で転送されるデータ量が少なくなるという利点がありますが、取得時に損失なくサポートするブラウザによって圧縮解除されます。
圧縮が一般的に機能する方法だけでなく、gzip
がどのように機能するかにより、特定のファイルは他のファイルよりも圧縮率が高くなります。 たとえば、テキストファイルの圧縮率は非常に高く、最終的には2倍以上小さくなります。 一方、JPEGやPNGファイルなどの画像は、その性質上すでに圧縮されており、gzip
を使用した2回目の圧縮では、ほとんどまたはまったく結果が得られません。 ファイルを圧縮するとサーバーのリソースが消費されるため、結果的にサイズを大幅に縮小するファイルのみを圧縮するのが最適です。
このガイドでは、Ubuntu 14.04サーバーにインストールされているNginxを構成して、gzip
圧縮を利用して、Webサイトの訪問者に送信されるコンテンツのサイズを縮小する方法について説明します。
前提条件
このチュートリアルを実行するには、次のものが必要です。
-
sudo non-root userを持つ1つのUbuntu 14.04サーバー
-
How To Install Nginx on Ubuntu 14.04 tutorialに従ってサーバーにインストールされたNginx
[[step-1 -—- creating-test-files]] ==ステップ1—テストファイルの作成
このステップでは、デフォルトのNginxディレクトリにいくつかのテストファイルを作成して、gzip
の圧縮をテキスト化します。
ネットワーク経由で提供されるファイルの種類を決定するために、Nginxは十分に高速ではないため、ファイルの内容を分析しません。 代わりに、ファイル拡張子を検索して、ファイルの目的を示すMIME typeを判別します。
この動作のため、テストファイルの内容は無関係です。 ファイルに適切な名前を付けることで、Nginxをだまして、1つの完全に空のファイルをイメージで、もう1つをスタイルシートなどと考えることができます。
この構成では、Nginxは非常に小さなファイルを圧縮しないため、サイズがちょうど1キロバイトのテストファイルを作成します。 これにより、Nginxが必要な場所で圧縮を使用しているかどうかを確認し、ある種類のファイルを圧縮し、他の種類のファイルでは圧縮しないようにすることができます。
truncate
を使用して、デフォルトのNginxディレクトリにtest.html
という名前の1キロバイトのファイルを作成します。 拡張機能は、HTMLページであることを示します。
sudo truncate -s 1k /usr/share/nginx/html/test.html
同じ方法でさらにいくつかのテストファイルを作成しましょう。1つはjpg
画像ファイル、1つはcss
スタイルシート、もう1つはjs
JavaScriptファイルです。
sudo truncate -s 1k /usr/share/nginx/html/test.jpg
sudo truncate -s 1k /usr/share/nginx/html/test.css
sudo truncate -s 1k /usr/share/nginx/html/test.js
[[step-2 -—- checking-the-default-behavior]] ==ステップ2—デフォルトの動作を確認する
次の手順では、作成したばかりのファイルを使用して、新規インストールでの圧縮に関するNginxの動作を確認します。
test.html
という名前のHTMLファイルが圧縮されているかどうかを確認しましょう。 このコマンドは、Nginxサーバーからファイルを要求し、HTTPヘッダー(Accept-Encoding: gzip
)を使用してgzip
圧縮コンテンツを提供しても問題がないことを指定します。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
応答として、いくつかのHTTP応答ヘッダーが表示されるはずです。
Nginx応答ヘッダー
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:04:12 GMT
Content-Type: text/html
Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT
Connection: keep-alive
Content-Encoding: gzip
最後の行に、Content-Encoding: gzip
ヘッダーがあります。 これは、gzip
圧縮がこのファイルの送信に使用されたことを示しています。 これは、Ubuntu 14.04では、インストール後にNginxのgzip
圧縮がデフォルト設定で自動的に有効になっているために発生しました。
ただし、デフォルトでは、NginxはHTMLファイルのみを圧縮します。 新規インストールのその他すべてのファイルは、圧縮されずに提供されます。 これを確認するには、同じ方法でtest.jpg
という名前のテストイメージをリクエストできます。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
結果は以前と少し異なるはずです:
Nginx応答ヘッダー
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:10:34 GMT
Content-Type: image/jpeg
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:06:22 GMT
Connection: keep-alive
ETag: "569e973e-0"
Accept-Ranges: bytes
出力にContent-Encoding: gzip
ヘッダーはありません。これは、ファイルが圧縮なしで提供されたことを意味します。
テストCSSスタイルシートを使用してテストを繰り返すことができます。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
繰り返しになりますが、出力には圧縮に関する記述はありません。
CSSファイルのNginx応答ヘッダー
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:20:33 GMT
Content-Type: text/css
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:20:33 GMT
Connection: keep-alive
ETag: "569e9a91-0"
Accept-Ranges: bytes
[[step-3 -—- configuring-nginx-39-s-gzip-settings]] ==ステップ3—Nginxのgzip設定を構成する
次のステップは、圧縮されたHTMLファイルだけでなく、圧縮の恩恵を受ける他のファイル形式も提供するようにNginxを構成することです。
Nginxgzip
構成を変更するには、メインのNginx構成ファイルをnano
またはお気に入りのテキストエディターで開きます。
sudo nano /etc/nginx/nginx.conf
次のようなgzip
設定セクションを見つけます。
/etc/nginx/nginx.conf
. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .
デフォルトでは、gzip
圧縮はgzip on
ディレクティブによって有効になっていますが、いくつかの追加設定は#
コメント記号でコメント化されています。 このセクションにいくつかの変更を加えます。
-
コメントされたすべての行のコメントを解除して(つまり、行の先頭にある
#
を削除して)、追加の設定を有効にします。 -
256バイト未満のファイルを圧縮しないようにNginxに指示する
gzip_min_length 256;
ディレクティブを追加します。 これは非常に小さなファイルであり、圧縮によるメリットはほとんどありません。 -
gzip_types
ディレクティブに、Webフォント、ico
アイコン、およびSVG画像を示す追加のファイルタイプを追加します。
これらの変更が適用された後、設定セクションは次のようになります。
/etc/nginx/nginx.conf
. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
. . .
ファイルを保存して閉じ、終了します。
新しい構成を有効にするには、Nginxを再起動します。
sudo service nginx restart
[[step-4 -—- verifying-the-new-configuration]] ==ステップ4—新しい構成の検証
次のステップでは、構成の変更が期待どおりに機能したかどうかを確認します。
各テストファイルでcurl
を使用し、Content-Encoding: gzip
ヘッダーの出力を調べることで、手順2で行ったのと同じようにこれをテストできます。
curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
curl -H "Accept-Encoding: gzip" -I http://localhost/test.js
これで、画像ファイルであるtest.jpg
のみが非圧縮のままになります。 他のすべての例では、出力でContent-Encoding: gzip
ヘッダーを見つけることができるはずです。
その場合は、Nginxでgzip
圧縮を正常に構成しています。
結論
gzip
圧縮を完全に使用するようにNginx構成を変更するのは簡単ですが、そのメリットは計り知れません。 帯域幅が制限されている訪問者はサイトをより速く受信するだけでなく、Googleはサイトの読み込みがより速くなることに満足します。 速度は現代のウェブの重要な部分として勢いを増しており、gzip
を使用することはそれを改善するための1つの大きなステップです。