Ubuntu20.04でgzipとNginxを使用してWebサイトのパフォーマンスを向上させる方法

投稿日: 2022-08-02 2022-08-02
タグ: Linux Basics, nginx, open source, ubuntu

著者はCOVID-19救済基金を選択し、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Webサイトのパフォーマンスは、ユーザーのブラウザがダウンロードする必要のあるすべてのファイルのサイズに部分的に依存します。これらの送信ファイルのサイズを小さくすると、Webサイトが高速になります。また、従量制接続での帯域幅使用量を支払う人にとって、Webサイトを安くすることができます。

gzipは人気のあるデータ圧縮プログラムです。 gzipを使用して、その場で提供されるファイルを圧縮するようにNginxを構成できます。これらのファイルは、取得時にそれをサポートするブラウザによって解凍されますが、Webサーバーとブラウザ間で転送するデータの量が少ないという利点があります。良いニュースは、圧縮サポートがすべての主要なブラウザーに遍在していることであり、それを使用しない理由はありません。

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

このチュートリアルでは、gzip圧縮を使用するようにNginxを構成します。これにより、Webサイトの訪問者に送信されるコンテンツのサイズが小さくなり、パフォーマンスが向上します。

前提条件

このチュートリアルに従うには、次のものが必要です。

1台のUbuntu20.04サーバーで、sudo権限を持つ通常の非rootユーザー。この初期サーバーセットアップチュートリアルに従って、サーバーを準備する方法を学ぶことができます。
チュートリアルUbuntu20.04にNginxをインストールする方法に従ってサーバーにインストールされたNginx。

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

このステップでは、デフォルトのNginxディレクトリにいくつかのテストファイルを作成します。後でこれらのファイルを使用して、gzipの圧縮に対するNginxのデフォルトの動作を確認し、構成の変更が意図した効果をもたらすことをテストします。

ネットワーク上で提供されるファイルの種類を推測するために、Nginxはファイルの内容を分析しません。それは法外に遅いでしょう。代わりに、ファイル拡張子を検索して、ファイルのMIMEタイプを判別します。これはその目的を示します。

この動作のため、テストファイルの内容は関係ありません。ファイルに適切な名前を付けることで、たとえば、完全に空のファイルの1つが画像で、もう1つがスタイルシートであるとNginxを騙して考えることができます。

truncateを使用して、デフォルトのNginxディレクトリにtest.htmlという名前のファイルを作成します。この拡張機能は、それがHTMLページであることを示します。

sudo truncate -s 1k /var/www/html/test.html

同じ方法でさらにいくつかのテストファイルを作成しましょう。1つはjpgイメージファイル、1つはcssスタイルシート、もう1つはjsJavaScriptファイルです。

sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

次のステップは、作成したばかりのファイルを使用して、新規インストールで要求されたファイルを圧縮することに関してNginxがどのように動作するかを確認することです。

ステップ2—デフォルトの動作を確認する

test.htmlという名前のHTMLファイルが圧縮されて提供されているかどうかを確認しましょう。このコマンドは、Nginxサーバーからファイルを要求し、HTTPヘッダー（Accept-Encoding: gzip）を使用してgzip圧縮コンテンツを提供しても問題がないことを指定します。

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

応答として、いくつかのHTTP応答ヘッダーが表示されます。

OutputHTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip

最後の行に、Content-Encoding: gzipヘッダーがあります。これは、gzip圧縮がこのファイルの送信に使用されたことを示しています。これは、Nginxでgzip圧縮が、Ubuntu20.04の新規インストールでも自動的に有効になっているためです。

ただし、デフォルトでは、NginxはHTMLファイルのみを圧縮します。他のすべてのファイルは非圧縮で提供されますが、これは最適とは言えません。これを確認するには、次の方法でtest.jpgという名前のテスト画像をリクエストできます。

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

結果は以前とは少し異なるはずです。

OutputHTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:05:49 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

出力にContent-Encoding: gzipヘッダーはありません。これは、ファイルが圧縮なしで提供されたことを意味します。

テストCSSスタイルシートを使用してテストを繰り返すことができます。

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

繰り返しになりますが、出力には圧縮についての言及はありません。

OutputHTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:06:04 GMT
Content-Type: text/css
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

次のステップでは、gzipを使用することでメリットが得られるあらゆる種類のファイルを圧縮するようにNginxに指示します。

ステップ3—Nginxの`gzip`設定を構成する

Nginx gzip構成を変更するには、nanoまたはお気に入りのテキストエディターでメインのNginx構成ファイルを開きます。

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ディレクティブによって実際に有効になっていることがわかりますが、いくつかの追加設定は#記号でコメント化されており、効果がありません。このセクションにいくつかの変更を加えます。

コメントされたすべての行のコメントを解除して（つまり、行の先頭にある#を削除して）、追加の設定を有効にします。
gzip_min_length 256;ディレクティブを追加します。これは、Nginxに256バイト未満のファイルを圧縮しないように指示します。非常に小さなファイルは、圧縮の恩恵をほとんど受けません。
gzip_typesディレクティブに、Webフォント、アイコン、XMLフィード、JSON構造化データ、および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
  application/atom+xml
  application/geo+json
  application/javascript
  application/x-javascript
  application/json
  application/ld+json
  application/manifest+json
  application/rdf+xml
  application/rss+xml
  application/xhtml+xml
  application/xml
  font/eot
  font/otf
  font/ttf
  image/svg+xml
  text/css
  text/javascript
  text/plain
  text/xml;
. . .

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

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

sudo systemctl restart nginx

次に、新しい構成が機能することを確認しましょう。

ステップ4—新しい構成を確認する

テストHTMLファイルに対して前と同じリクエストを実行します。

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

そのファイルタイプに対して圧縮がすでに有効になっているため、応答は同じままです。

OutputHTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip

ただし、以前に圧縮されていないCSSスタイルシートを要求した場合、応答は異なります。

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

現在、gzipはファイルを圧縮しています。

OutputHTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:21:54 GMT
Content-Type: text/css
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"6022dc91-400"
Content-Encoding: gzip

手順1で作成したすべてのテストファイルから、test.jpgイメージファイルのみを非圧縮のままにしておく必要があります。これは同じ方法でテストできます。

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

gzip圧縮はありません：

OutputHTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:25:40 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

ここでは、Content-Encoding: gzipヘッダーが期待どおりに出力に存在しません。

その場合は、Nginxでgzip圧縮を正常に構成しています。

結論

gzip圧縮を利用するようにNginx構成を変更するのは簡単ですが、そのメリットは計り知れません。帯域幅が制限されている訪問者はサイトをより速く受信するだけでなく、他のすべてのユーザーにも顕著な速度の向上が見られます。検索エンジンは、サイトの読み込みが速くなることにも満足します。現在、読み込み速度は検索エンジンがWebサイトをランク付けする方法の重要な指標であり、gzipを使用することはそれを改善するための1つの大きなステップです。

getdocs

13036

序章