前書き

Webサイトの読み込み速度は、ブラウザーでダウンロードする必要があるすべてのファイルのサイズによって異なります。 送信するファイルのサイズを小さくすると、Webサイトの読み込みが速くなるだけでなく、帯域幅の使用料金を支払う必要があるユーザーにとっても安価になります。

http://www.gzip.org/ [+ gzip +]は一般的なデータ圧縮プログラムです。 Nginxを設定して、 `+ gzip +`を使用して、処理中のファイルを圧縮できます。 これらのファイルは、Webサーバーとブラウザ間で転送されるデータ量が少なくなるという利点がありますが、取得時に損失なくサポートするブラウザによって圧縮解除されます。

一般的な圧縮の仕組みと、+ gzip の仕組みにより、特定のファイルは他のファイルよりも圧縮率が高くなります。 たとえば、テキストファイルの圧縮率は非常に高く、最終的には2倍以上小さくなります。 一方、JPEGやPNGファイルなどの画像は、その性質によりすでに圧縮されており、 ` gzip +`を使用した2回目の圧縮では、ほとんどまたはまったく結果が得られません。 ファイルを圧縮するとサーバーのリソースが消費されるため、結果的にサイズを大幅に縮小するファイルのみを圧縮するのが最適です。

このガイドでは、CentOS 7サーバーにインストールされたNginxを設定して、「+ gzip +」圧縮を使用してWebサイトの訪問者に送信されるコンテンツのサイズを縮小する方法について説明します。

前提条件

このチュートリアルを実行するには、次のものが必要です。

ステップ1-テストファイルの作成

このステップでは、デフォルトのNginxディレクトリに複数のテストファイルを作成して、テキスト「+ gzip +」の圧縮を行います。

ネットワーク経由で提供されるファイルの種類を決定するために、Nginxは十分に高速ではないため、ファイルの内容を分析しません。 代わりに、ファイル拡張子を参照して、ファイルの目的を示す_MIMEタイプ_を判別します。

この動作のため、テストファイルの内容は無関係です。 ファイルに適切な名前を付けることで、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

手順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.6.3
Date: Fri, 11 Mar 2016 12:53:06 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Fri, 11 Mar 2016 12:48:02 GMT
Connection: keep-alive
ETag: "56e2be82-400"
Accept-Ranges: bytes

応答では、 `+ gzip `の記述は一切ありません。 これは、サーバーで「 gzip 」圧縮が有効になっていないことを示しています。 CentOS 7では、これが原因で、 ` gzip `のサポートはデフォルトのNginx構成では完全に無効になっています。 圧縮が有効になっている場合、出力に「 Content-Encoding:gzip +」というヘッダーが追加されます。

HTMLページだけでなく、新規インストールのその他すべてのファイルも非圧縮で提供されます。 それを確認するために、 `+ test.jpg +`という名前のテスト画像を同じ方法でリクエストできます。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

結果は以前とほぼ同じになります。

Nginx応答ヘッダー

HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 Mar 2016 12:58:03 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Fri, 11 Mar 2016 12:48:05 GMT
Connection: keep-alive
ETag: "56e2be85-400"
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.6.3
Date: Fri, 11 Mar 2016 12:59:04 GMT
Content-Type: text/css
Content-Length: 1024
Last-Modified: Fri, 11 Mar 2016 12:48:05 GMT
Connection: keep-alive
ETag: "56e2be85-400"
Accept-Ranges: bytes

ステップ3-Nginxのgzipモジュールの有効化と構成

次のステップは、圧縮の恩恵を受けることができるすべてのファイル形式の圧縮を有効にするようにNginxを構成することです。

`+ gzip `モジュールはNginxのコアモジュールです。つまり、既にインストールされていますが、有効にして構成する必要があります。 CentOS 7でのNginxの新規インストールでは、 ` / etc / nginx / conf.d `ディレクトリからの ` .conf +`拡張子を持つすべてのファイルが自動的にロードされます。 これにより、追加モジュールを簡単に構成できます。

Nginxの `+ gzip `モジュールを有効にするには、 ` nano `またはお気に入りのテキストエディターを使用して ` gzip.conf +`という名前の設定ファイルを作成します。

sudo nano /etc/nginx/conf.d/gzip.conf

次の内容を貼り付けます。

/etc/nginx/conf.d/gzip.conf

##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
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/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

ファイルを保存して閉じ、終了します。

ここで適用される構成設定を見ていきましょう。

  • `+ gzip on +`ディレクティブはGzip圧縮を有効にします。

  • IE6は `+ gzip `をまったくサポートしていないため、 ` gzip_disable” msie6 “+`は、圧縮ファイルを受信するブラウザーからInternet Explorer 6を除外します。

  • `+ gzip_vary `および ` gzip_proxied +`設定は、ブラウザとサーバー間のプロキシサーバーが圧縮を正しく認識することを確認します。

  • `+ gzip_comp_level 6 +`は、圧縮するファイルの量を設定します。 数値が大きいほど、圧縮レベルとリソース使用量が高くなります。 6は妥当な中間点です。

  • `+ gzip_http_version 1.1 `は、 ` gzip `圧縮をHTTP / 1.1プロトコルをサポートするブラウザーに制限するために使用されます。 ブラウザがサポートしていない場合、 ` gzip +`もサポートしていない可能性があります。

  • `+ gzip_min_length 256 +`は、256バイト未満のファイルを圧縮しないようにNginxに指示します。 非常に小さなファイルは、圧縮の恩恵をほとんど受けません。

  • `+ gzip_types +`は、圧縮されるすべてのMIMEタイプをリストします。 この場合、リストにはHTMLページ、CSSスタイルシート、JavascriptおよびJSONファイル、XMLファイル、アイコン、SVG画像、Webフォントが含まれます。

新しい構成を有効にするには、Nginxを再起動します。

sudo systemctl restart nginx

手順4-新しい構成の確認

次のステップでは、構成の変更が期待どおりに機能したかどうかを確認します。

各テストファイルで `+ curl `を使用し、 ` Content-Encoding:gzip +`ヘッダーの出力を調べることで、ステップ2で行ったようにこれをテストできます。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

応答として、以前はなかった `+ Content-Encoding:gzip +`ヘッダーが表示されるはずです。

Nginx応答ヘッダー

HTTP/1.1 200 OK
Server: nginx/1.6.3
Date: Fri, 11 Mar 2016 13:19:16 GMT
Content-Type: text/html
Last-Modified: Fri, 11 Mar 2016 12:48:02 GMT
Connection: keep-alive
Vary: Accept-Encoding

他のすべてのファイルを同じ方法でテストできます。

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 +`圧縮を正常に設定しました!

結論

Nginxの設定を変更して `+ gzip `圧縮を完全に使用するのは簡単ですが、そのメリットは計り知れません。 帯域幅が制限されている訪問者はサイトをより速く受信するだけでなく、Googleはサイトの読み込みがより速くなることに満足します。 スピードは現代のウェブの重要な部分として注目を集めており、 ` gzip +`を使用することはそれを改善するための大きな一歩です。