ウェブサイト検索

NginxとGzipモジュールを使ってウェブサイトの速度を上げる方法を学ぶ

世界中で高速インターネットが利用できる時代であっても、ウェブサイトの読み込み時間を最適化するためのあらゆる努力は大歓迎です。

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

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

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

この記事の最後まで読んだ頃には、あなたはウェブサイトやアプリケーションを提供するためにNginxを使用することを検討するさらにもう1つの理由を持つことになります。

Nginxウェブサーバーのインストール

Nginxはすべての主要な現代のディストリビューションで利用可能です。この資料では、CentOS 7の仮想マシン（IP 192.168.0.29）を使用します。

以下の指示は、他のディストリビューションでもほとんど（あるいは全く）修正せずに機能します。あなたのVMが新しいインストールであると仮定します。そうでない場合は、マシン上で他のウェブサーバー（例えば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がファイルを提供できることを確認するために、ウェブサーバーを起動します:


systemctl start nginx
systemctl enable nginx

その後、ウェブブラウザを開き、http://192.168.0.29にアクセスします（192.168.0.29をサーバーのIPアドレスまたはホスト名に置き換えるのを忘れないでください）。ようこそページが表示されるはずです：

いくつかのファイルタイプは他のものよりも圧縮しやすいことを念頭に置く必要があります。プレーンテキストファイル（HTML、CSS、JavaScriptファイルなど）は非常によく圧縮されますが、他のファイル（.isoファイル、tarball、および画像など）は元々圧縮されているため、あまり圧縮されません。

したがって、Nginxとgzipの組み合わせが、前者の転送速度を向上させる一方で、後者にはほとんど改善が見られないか、全く改善されないことが予想されます。

gzipモジュールが有効になっているとき、HTMLファイルは常に圧縮されることを念頭に置くことも重要ですが、ウェブサイトやアプリケーションで一般的に見られる他のファイルタイプ（具体的にはCSSおよびJavaScript）は圧縮されません。

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

まず、完全なBootstrapテンプレートをダウンロードしましょう。これは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では、ツール → ウェブ開発者メニューから開くことができます。

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

推奨リーディング： Nginxの性能を最大10倍向上させるためにMod_Pagespeedをインストールする

開発者ツールの 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圧縮モジュールを使用した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のウェブサイトには、ネットワークモニターについてのエントリーがあり、このツールを使用してネットワークリクエストの背後で何が起こっているのかを理解する方法が説明されています。

いつものように、この記事に関して質問がある場合は、下のコメントフォームをご自由にご利用ください。私たちはいつもあなたからのご意見を楽しみにしています！

関連記事: