NginxとGzipモジュールを使用してウェブサイトを高速化する方法を学ぶ


世界中でかなりのインターネット速度が利用できる時代でも、ウェブサイトの読み込み時間を最適化するためのあらゆる努力は、両手を広げて歓迎されます。

この記事では、圧縮によってファイルサイズを小さくすることで転送速度を上げる方法について説明します。このアプローチは、プロセスで使用される帯域幅の量を削減し、それを支払うWebサイトの所有者にとっても安価になるという追加の利点をもたらします。

上記の段落で述べた目標を達成するために、この記事ではNginxとその組み込みのgzipモジュールを使用します。 の公式ドキュメントに記載されているように、このモジュールは、よく知られているgzip圧縮方法を使用して応答を圧縮するフィルターです。 。これにより、送信されるデータのサイズが半分以上に圧縮されます。

この投稿の最後に到達するまでに、Nginxを使用してWebサイトやアプリケーションを提供することを検討するもう1つの理由があります。

NginxWebサーバーのインストール

Nginxは、すべての主要な最新のディストリビューションで利用できます。この記事ではCentOS7仮想マシン(IP 192.168.0.29)を使用しますが。

以下に示す手順は、他のディストリビューションでもほとんど変更を加えなくても機能します。 VMは新規インストールであると想定されています。それ以外の場合は、マシンで実行されている他のWebサーバー(Apacheなど)がないことを確認する必要があります。

Nginxを必要な依存関係とともにインストールするには、次のコマンドを使用します。

----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
# yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
# apt update && apt install nginx

インストールが正常に完了し、Nginxがファイルを提供できることを確認するには、Webサーバーを起動します。

# systemctl start nginx
# systemctl enable nginx

次に、Webブラウザを開いて http://192.168.0.29 に移動します(192.168.0.29をサーバーのIPアドレスまたはホスト名に置き換えることを忘れないでください)。ウェルカムページが表示されます。

一部のファイルタイプは他のタイプよりも適切に圧縮できることに注意する必要があります。プレーンテキストファイル(HTML、CSS、JavaScriptファイルなど)は非常によく圧縮されますが、他のファイル(.isoファイル、tarball、画像など)はすでに圧縮されているため、圧縮されません。

したがって、Nginxとgzipの組み合わせにより、前者の転送速度を上げることができますが、後者ではほとんどまたはまったく改善が見られない可能性があります。

gzipモジュールが有効になっている場合、HTMLファイルは常に圧縮されますが、Webサイトやアプリケーションで一般的に見られる他のファイルタイプ(CSSやJavaScriptなど)は圧縮されないことにも注意してください。

gzipモジュールなしでNginxWebサイトの速度をテストする

まず、HTML、CSS、JavaScriptファイルの優れた組み合わせである完全なBootstrapテンプレートをダウンロードしましょう。

圧縮ファイルをダウンロードした後、サーバーブロックのルートディレクトリに解凍します(これは、Apache仮想ホスト宣言のDocumentRootディレクティブに相当するNginxであることに注意してください)。

# cd /var/www/html
# wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
# unzip -a gh-pages.zip
# mv startbootstrap-creative-gh-pages tecmint

/var/www/html/tecmint 内には次のディレクトリ構造が必要です。

# ls -l /var/www/html/tecmint

次に、 http://192.168.0.29/tecmint にアクセスして、ページが正しく読み込まれることを確認します。最新のブラウザには、一連の開発者ツールが含まれています。 Firefoxでは、ツール→Web開発者メニューから開くことができます。

特に、 Network サブメニューに関心があります。このサブメニューを使用すると、コンピューターとローカルネットワークおよびインターネットの間で発生するすべてのネットワーク要求を監視できます。

開発者ツールで Network メニューを開くためのショートカットは、 Ctrl + Shift + Q です。そのキーの組み合わせを押すか、メニューバーを使用して開きます。

HTML、CSS、およびJavaScriptファイルの転送を調べることに関心があるので、下部のボタンをクリックしてページを更新します。メイン画面に、すべてのHTML、CSS、およびJavaScriptファイルの転送の詳細が表示されます。

[サイズ]列(個々のファイルサイズを表示)の右側に、個々の転送タイミングが表示されます。特定のファイルをダブルクリックして、[タイミング]タブで詳細を表示することもできます。

gzipモジュールを有効にしたら、同じ転送と比較できるように、上の画像に示されているタイミングをメモしておいてください。

Nginxでのgzipモジュールの有効化と構成

gzipモジュールを有効にして構成するには、 /etc/nginx/nginx.conf を開き、次の画像に示すようにメインサーバーブロックを見つけて、次の行を追加または変更します(忘れないでください最後のセミコロンまたはNginxは、後で再起動するときにエラーメッセージを返します!)

root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

gzipディレクティブはgzipモジュールをオンまたはオフにしますが、gzip_typesは、モジュールが処理する必要のあるすべてのMIMEタイプを一覧表示するために使用されます。

MIMEタイプの詳細と使用可能なタイプの表示については、 Basics_of_HTTP_MIME_typesにアクセスしてください。

Gzip圧縮モジュールを使用したNginxWebサイトの速度のテスト

上記の手順が完了したら、Nginxを再起動し、 Ctrl + F5 を押してページをリロードしましょう(これもFirefoxで機能するため、別のブラウザを使用している場合は、最初に対応するドキュメントを参照してください)キャッシュを上書きして、転送時間を観察しましょう。

# systemctl restart nginx

[ネットワークリクエスト]タブには、いくつかの重要な改善が表示されます。タイミングを比較して、自分の目で確かめてください。これは、コンピュータと192.168.0.29の間の転送です(GoogleサーバーとCDNの間の転送は私たちの理解を超えています)。

たとえば、gzipを有効にする前/後の次のファイル転送の例を考えてみましょう。タイミングはミリ秒単位で示されます。

  1. index.html (represented by /tecmint/ at the top of the list): 15 / 4
  2. Creative.min.css: 18 / 8
  3. jquery.min.js: 17 / 7

これでNginxがさらに好きになりませんか?私に関する限り、そうです!

概要

この記事では、Nginxgzipモジュールを使用してファイル転送を高速化できることを示しました。 gzipモジュールの公式ドキュメントには、確認する必要のあるその他の構成ディレクティブがリストされています。

さらに、Mozilla Developer Network Webサイトには、ネットワークモニターに関するエントリがあり、これを使用する方法が説明されています。ネットワークリクエストの舞台裏で何が起こっているのかを理解するためのツール。

いつものように、この記事について質問がある場合は、以下のコメントフォームを使用してください。皆様からのご連絡をお待ちしております!