Nginxでgzip圧縮通信を行う設定をする方法

投稿者 : OSCA

概要

 サーバーからクライアントへのデータ通信量を減らす方法として、データを圧縮する方法があります。 本稿では Nginx でコンテンツを圧縮して返却する方法にについて解説します。

圧縮通信の仕組み

 上記の通り、サーバーからクライアントへのデータ通信量を減らす方法として、データを圧縮する方法があります。 特に HTML や CSS, JavaScript などのテキストファイルは、圧縮することにより大幅にデータ量を減らすことができます。 データを圧縮した場合に何が嬉しいかというと、ネットワーク通信量を削減できるということと、それだけ早くコンテンツを取得し終えられるため、ブラウザ側は早くHTMLのレンダリングを開始することができます。

圧縮通信の利点

  • ネットワーク通信量を削減できる。
  • ネットワーク通信が早く終わるため、ブラウザのレンダリング開始を早められる。

 ただし、圧縮通信を行う場合、クライアント(ブラウザ)側とサーバー側が、共通の圧縮アルゴリズムをサポートしている必要があります。 サーバーが一方的にブラウザに圧縮データを送りつけても、データを解凍できないと意味がありませんよね。 また、サーバー側は圧縮処理を、ブラウザ側は解凍処理を行うようになるため処理負荷は高まります。

圧縮通信の懸念点

  • クライアント側とサーバー側で共通した圧縮アルゴリズムをサポートしている必要がある。
  • サーバー側は圧縮、クライアント側は解凍の処理が必要になるため、僅かに処理負荷は高まる。

 クライアント(ブラウザ)側がサポートしている圧縮アルゴリズムは、HTTPリクエストの際に Accept-Encoding ヘッダを付与することでサーバーに伝えることができます。 Accept-Encoding ヘッダの詳細については、別項「HTTPリクエストヘッダ Accept-Encoding とは?」を参考にしてください。 サーバー側は Accept-Encoding ヘッダで教えてもらった圧縮アルゴリズムをサポートしていれば、その圧縮アルゴリズムを利用してコンテンツを圧縮して応答するというわけです。

HTTPリクエストの例

GET /index.html HTTP/1.1
Host: weblabo.oscasierra.net
Accept-Encoding: gzip, deflate, br

Nginxの設定

 それでは Nginx における設定方法について解説します。 Nginx ではデフォルトで gzip の HTTP 圧縮通信に対応しており、設定ファイルに gzip on; の記述をすることで機能を有効にでき、また gzip_types で圧縮の対象とするファイル形式(MIMEタイプ)を指定できます。 次の例では HTML, TEXT, CSS を圧縮して返却するように設定しています。

gzip on;
gzip_types text/html text/css text/javascript

 上述の通り、圧縮する対象は HTML, TEXT, CSS, JavaScript, XML, JSON などのテキストのコンテンツとするのが良いでしょう。 JPEG画像などは既に圧縮されているのであまり効果がありません。

おわりに

 本稿では Nginx で gzip のHTTP圧縮を実現する方法について解説しました。 WEBサイトのパフォーマンスチューニングの一環として、ぜひ対策してみてください。

著者 : OSCA

OSCA

 初級WEBエンジニアです。最近は Android, iOS, WEBアプリの作成に力を入れています。 個人として何か一つでも世の中の多くの人に使ってもらえるアプリを作ろうと日々奮闘中です。
@engineer_osca