こんにちは。CSチームの坂本です。

前回はNginxをWordPressのWebサーバーとして導入しました。今回からは設定などを変更していくことで更にNginxでWordPressを高速化する方法を考えていきたいと思います。

前回の記事
Nginx + WordPress

今回は高速化の第1段階として、Gzip圧縮したデータを転送しWebページの読み込みにかかる時間を減らしたいと思います。

Gzip圧縮転送は、Webページの読み込み時間を減らすための基本的な方法です。

Nginxには「Gzip」モジュールがあり、簡単に設定ができます。

※Apacheにも「mod_deflate」モジュールが存在します。

ですが、この「Gzip」モジュールを利用した場合、データをリアルタイムで圧縮するため、導入することによって逆にサーバーの処理に時間がかかってしまい、結果として読み込み時間が遅くなってしまうこともあるようです。

この問題の解決策になりそうな「Gzip Precompression」というモジュールがNginxにありましたので、今回はこのモジュールを試してみたいと思います。

※EC2の環境、Nginx以外のMySQL、PHP、PHP-FPMの設定などは前回と同様です。

目次

1. 「Gzip Precompression」モジュールについて
2. インストール
3. 設定ファイル
4. 比較

1. 「Gzip Precompression」モジュールについて

「Gzip Precompression」モジュールは、拡張子が「.gz」のファイルが存在した場合、「.gz」ファイルを転送する、という単純な処理をしてくれるモジュールです。例えば、「style.css」への要求があった場合は「style.cs.gz」を探して、存在した場合はこちらを転送してくれます。

難点は、データを事前に手動で「gzip -9 style.css」のように圧縮しておかなければいけないことです。

ですが、WordPressのようにテーマが決まっていて「.css」、「.js」などの静的なファイルが頻繁に変わることがないサイトであれば、『事前に「.css」、「.js」ファイルのみ圧縮しておいて利用する』、という運用方法も検討できるかと思います。

今回は、WordPressのテーマ、「Twenty Eleven」のトップページで利用されている「style.css」を利用してGzip圧縮なしの場合、「Gzip」モジュール利用の場合、「Gzip Precompression」モジュール利用の場合を簡単に比較してみたいと思います。

2. インストール

「Gzip」モジュールはデフォルトで含まれているモジュールですが、「Gzip Precompression」モジュールはデフォルトで含まれていませんのでソースからインストールします。

※Nginxはモジュールを後から追加できません。

configure実行の際に、オプションに–with-http_gzip_static_moduleを追加してインストールします。

wget http://nginx.org/download/nginx-1.0.15.tar.gz
tar zxvf nginx-1.0.15.tar.gz 
cd nginx-1.0.15
./configure --prefix=/usr/share/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --http-client-body-temp-path=/var/lib/nginx/tmp/client_body --http-proxy-temp-path=/var/lib/nginx/tmp/proxy --http-fastcgi-temp-path=/var/lib/nginx/tmp/fastcgi --http-uwsgi-temp-path=/var/lib/nginx/tmp/uwsgi --http-scgi-temp-path=/var/lib/nginx/tmp/scgi --pid-path=/var/run/nginx.pid --lock-path=/var/lock/subsys/nginx --user=nginx --group=nginx --with-file-aio（…省略、適宜必要なモジュールを指定してください。）--with-http_gzip_static_module
make
make install
sudo vi /etc/nginx/nginx.conf　# 設定ファイル変更
sudo /usr/sbin/nginx # 起動

3. 設定ファイル

nginx.confのhttpブロックの中を変更して確認します。
以下は比較の際の各設定の違いです。今回比較したい「style.css」を比較するための最低限の設定になります。

※gzipをonにすると、「text/html」はデフォルトで圧縮されます。

Gzip圧縮なし

    #gzip  on;
    #gzip_types text/css;

    #gzip_static on;

「Gzip」モジュール利用

    gzip  on;
    gzip_types text/css;

    #gzip_static on;

「Gzip Precompression」モジュール利用

    gzip  on; # text/htmlのみ圧縮
    #gzip_types text/css;

    gzip_static on;

4. 比較

データ量が53.34キロバイト、ダウンロードが203ミリ秒、トータル300ミリ秒でした。

データ量が14.35キロバイト、ダウンロードが90ミリ秒、トータル187ミリ秒でした。

※事前に圧縮率9（圧縮率最高）で「style.css」をGzip圧縮しています。

gzip -9 style.css

データ量が11.10キロバイト、ダウンロードが10ミリ秒、トータル105ミリ秒でした。

顕著に結果がでました。サーバー側の処理はどれも90ミリ秒台ですが、「Gzip」モジュール利用の場合のデフォルトの圧縮率が1ですので、圧縮率を9に変更した場合は、サーバー側の処理にもう少し時間がかかるのではないかと思います。

今回はWordPressも初期状態で検証以外のアクセスもありませんので大きな差ではないかもしれません。ですが、「塵も積もれば山となる」はずですので実際の運用では高速化に有効な手段となるのでははないでしょうか？

次回も引き続き、Nginxを使用してWordPressを高速化する方法を考えてみたいと思います。

 

こんにちは。CSチームの坂本です。

今回はロシア産の軽量サーバー、NginxをWordPressのWebサーバーとして導入したいと思います。

NginxはApache、IISに次いで現在3番目に利用されているWebサーバーで、ここ最近急激にシェアを伸ばしています。

NginxがApacheに比べ最も優れているといわれる点はスピードですが、Apacheより設定が簡単なことも人気の理由のようです。

WordPress.comでも導入されており、WordPressの運用に適したサーバーであるといえそうです。

目次

1. インストール
2. Nginxの設定
3. NginxとPHP-FPMの起動
4. Apacheと比較

1. インストール

まず、NginxでWordPressを動かすために最低限必要な「Nginx、MySQL、PHP、PHP-FPM」をインストールします。

sudo yum install nginx
sudo yum install mysql-server 
sudo yum install php php-fpm php-mbstring php-mysql

※MySQL、PHP、PHP-FPMの設定は適宜おこなってください。

2. Nginxの設定

Nginxのデフォルトの設定ファイルを変更し、PHPを動かすための最低限の設定をおこないます。

基本の設定ファイル

1. /etc/nginx/nginx.conf
2. /etc/nginx/conf.d/default.conf

以下がWebサーバーの場合のNginxの設定ファイルの基本構造となっています。

Webサーバーの設定ファイルの基本構造

# 省略
http { # httpブロック、Webサーバーの場合はhttpとなる
    server { # serverブロック、仮想サーバーの設定
        location / { # locationブロック、URLのパスにマッチした時の設定
        }
    }
}

実際の設定ファイルを簡単に確認します。

/etc/nginx/nginx.conf

# 省略
http {
    # 省略
    include /etc/nginx/conf.d/*.conf;
}

nginx.confで設定されているhttpブロックで/etc/nginx/conf.d以下の.confファイルを読み込む設定となっています。httpブロックで設定された内容はそのブロック内で設定されているserverブロック、locationブロックに適用されますので、共通する設定はこちらで設定します。

今回はnginx.confは変更せず、default.conf内のserverブロック、locationブロックを変更して最低限PHPが動く設定にします。

/etc/nginx/conf.d/default.conf

server {
    listen 80; # 仮想サーバーのポート番号      
    server_name _; # 仮想サーバーの名前 

    location / {
        root /usr/share/nginx/html; # ドキュメントルート  
        index index.php index.html; # インデックスページとして使われるファイル名 
    }

    location ~ .php$ { # 末尾「.php」にマッチした時の設定
        fastcgi_pass 127.0.0.1:9000; # FastCGIサーバーのアドレス:ポート番号  
        fastcgi_index index.php; # インデックスページとして使われるファイル名 
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; # PHP-FPMで処理するファイル名
        include fastcgi_params; # 外部設定ファイル（/etc/nginx/fastcgi_params）の読み込み  
    }
}

3. NginxとPHP-FPMの起動

設定が終わったらNginxとPHP-FPMを起動し、WordPressをインストールしてください。

sudo /etc/init.d/nginx start
sudo /etc/init.d/php-fpm start

4. Apacheと比較

上記のEC2環境と同じ条件の環境でApache + WordPressを構築し、Chromeの「Developer Tools」を使って同じ環境からアクセスし、簡単にWebページの読み込みにかかった時間を比較しました。

※Apacheは始めからAmazon Linux AMIにインストールされているものをデフォルトの設定で利用しています。MySQL、PHPは同じものをインストールしています。Apacheもチューニングをおこなうことで速くなると思いますが、今回はデフォルトの設定での比較になります。

「Developer Tools」はChromeの右上のスパナのアイコン – ［ツール］ – ［デベロッパーツール］で起動します。

Networkタブを開いてからアクセスします。

Apacheは1.66秒掛かっているのに対し、Nginxは0.825秒でした。

何回か計測した結果でApacheでは約1.5秒掛かるのに対し、Nginxは1秒を上回ることはなくスピードを実感できました。

今回はNginxの導入をおこないました。次回以降はその他の設定の変更をおこない、Nginxを利用して更に高速化する方法を考えたいと思います。