ウェブサイト検索

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

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

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

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

推奨読書: Nginx ウェブサイトのセキュリティを確保、強化し、パフォーマンスを向上させるための究極のガイド

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

Nginx Webサーバーのインストール

Nginx は、すべての主要な最新ディストリビューションで利用できます。ただし、この記事ではCentOS 7 仮想マシン (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 ファイルは常に 圧縮されますが、他のファイル タイプは一般的に圧縮されることに留意することも重要です。ウェブサイトとアプリケーション (つまり、CSS と JavaScript) はそうではありません。

gzip モジュールを使用しない Nginx ウェブサイト速度のテスト

まず、HTML、CSS、JavaScript ファイルをうまく組み合わせた完全なブートストラップ テンプレートをダウンロードしましょう。

圧縮ファイルをダウンロードした後、サーバー ブロックのルート ディレクトリに解凍します (これは、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 Developer] メニューから開くことができます。

特に Network サブメニューに興味があります。これにより、コンピュータとローカル ネットワークおよびインターネットの間で行われるすべてのネットワーク リクエストを監視できるようになります。

推奨事項: Mod_Pagespeed をインストールして Nginx のパフォーマンスを最大 10 倍高速化する

開発者ツールで ネットワーク メニューを開くショートカットは、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 圧縮モジュールを使用して Nginx ウェブサイトの速度をテストする

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


systemctl restart nginx

[ネットワーク リクエスト] タブには、いくつかの大幅な改善が見られます。タイミングを比較して自分の目で確認してください。ただし、これは私たちのコンピュータと 192.168.0.29 間の転送であることに留意してください (Google サーバーと CDN 間の転送は私たちの把握の範囲外です)。

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

  1. index.html (リストの先頭の /tecmint/ で表されます): 15/4
  2. Creative.min.css: 18/8
  3. jquery.min.js: 17/7

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

推奨読書: Apache Web サーバーのパフォーマンスを向上させる 5 つのヒント

まとめ

この記事では、Nginx gzip モジュールを使用してファイル転送を高速化できることを説明しました。 gzip モジュールの公式ドキュメントには、参照しておくとよい他の構成ディレクティブがリストされています。

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

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

関連記事: