Nginx + PageSpeed(ngx_pagespeed)を導入して WEBサイトを高速化する方法│株式会社イー・エージェンシー

9088106173_5e98ss6c8bb4_o

PageSpeedは、Googleが提供しているWebサイト高速化モジュールです。

HTTPサーバに組み込んで使います。

前々から気になっていたモジュールですが、先日このような記事を見かけたので試してみました。

Googleの秘策「PageSpeed」をガジェット速報に導入したら表示速度が3倍速くなった！
http://ggsoku.com/2013/06/google-pagespeed/

今回は、PageSpeedのNginx版である、ngx_pagespeedモジュールを使います。
Nginxのインストールから、ngx_pagespeedの導入、検証までを行います。
NginxはApache HTTP ServerのようなDSO（動的モジュールロード）に対応していませんので、ngx_pagespeedモジュールの準備をしたあと、Nginxをソースからビルドして静的に組み込みます。

※ NginxベースのHTTPサーバ Tengine（http://tengine.taobao.org/）では、DSOがサポートされていてngx_pagespeedがインストールできるそうです。
https://github.com/pagespeed/ngx_pagespeed/wiki/Using-ngx_pagespeed-with-Tengine
興味のある方は試してみてください。

環境

CentOS 6.4

nginxとPageSpeedモジュールをインストール

インストールに必要なライブラリを準備しておきます。

# yum install gcc-c++ pcre-dev pcre-devel zlib-devel make

nginxのPageSpeedモジュール（ngx_pagespeed）を準備。

# cd ~
# wget https://github.com/pagespeed/ngx_pagespeed/archive/release-1.5.27.3-beta.zip
# unzip release-1.5.27.3-beta
# cd ngx_pagespeed-release-1.5.27.3-beta/
# wget https://dl.google.com/dl/page-speed/psol/1.5.27.3.tar.gz
# tar -xzvf 1.5.27.3.tar.gz

nginxの最新版nginx 1.5.1をソースからインストール。

# cd ~
# wget http://nginx.org/download/nginx-1.5.1.tar.gz
# tar xvfz nginx-1.5.1.tar.gz
# cd nginx-1.5.1
# ./configure --add-module=$HOME/ngx_pagespeed-release-1.5.27.3-beta
# make
# make install

nginxのバージョンを確認。

# /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.5.1
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-3) (GCC) 
configure arguments: --add-module=/root/ngx_pagespeed-release-1.5.27.3-beta

nginxの起動スクリプトを設置。

# ln -s /usr/local/nginx-1.5.1 /usr/local/nginx
# wget -O /etc/init.d/nginx 'http://wiki.nginx.org/index.php?title=RedHatNginxInitScript&amp;action=raw&amp;anchor=nginx'
# chmod +x /etc/init.d/nginx
# vi /etc/init.d/nginx

22行目を編集

nginx="/usr/local/nginx/sbin/nginx"

25行目を編集

NGINX_CONF_FILE="/usr/local/nginx/conf/nginx.conf"

52行目をコメントアウト

#make_dirs

nginxの起動スクリプトをchkconfigに登録して、自動起動するようにしておきましょう。

# chkconfig nginx on
# chkconfig --list nginx

PageSpeedモジュール（ngx_pagespeed）のフィルタ設定

nginx設定ファイルのserverブロックにPageSpeedの設定を追記します。

# vi /usr/local/nginx/conf/nginx.conf
server {
~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~
pagespeed on;
pagespeed RewriteLevel CoreFilters; 
pagespeed FileCachePath /var/cache/ngx_pagespeed_cache; 
pagespeed EnableFilters collapse_whitespace,trim_urls,remove_comments;

このまま、nginxをスタート！といきたいところですが、キャッシュディレクトリに書き込みができなくて、アラートが出ます。

# /etc/init.d/nginx start 
Setting option from ("on")
Setting option from ("RewriteLevel", "CoreFilters")
Setting option from ("FileCachePath", "/var/cache/ngx_pagespeed_cache")
Setting option from ("EnableFilters", "collapse_whitespace,trim_urls,remove_comments")
nginx: [emerg] "root" directive FileCachePath must be an nginx-writeable directory in /usr/local/nginx/conf/nginx.conf:124
nginx: configuration file /usr/local/nginx/conf/nginx.conf test failed

キャッシュディレクトリを作成してあげましょう。

# mkdir /var/cache/ngx_pagespeed_cache
# chown daemon.daemon /var/cache/ngx_pagespeed_cache

nginxをスタート。

# /etc/init.d/nginx restart

PageSpeedモジュールが有効になっているか確認をします。

レスポンスヘッダにX-Page-Speedが追記されていればOKです。

# curl -I 'http://localhost/' | grep X-Page-Speed
 % Total % Received % Xferd Average Speed Time Time Time Current
 Dload Upload Total Spent Left Speed
 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
X-Page-Speed: 1.5.27.3-3005

PageSpeedモジュールの設定解説

pagespeed on;
pagespeed RewriteLevel CoreFilters;
pagespeed FileCachePath /var/cache/ngx_pagespeed_cache;
pagespeed EnableFilters collapse_whitespace,trim_urls,remove_comments;

今回はこのように、PageSpeedモジュールを設定をしました。
各項目について解説します。

PageSpeedモジュールを有効にします。

pagespeed on;

CoreFiltersを読み込みます。

pagespeed RewriteLevel CoreFilters;

以下のフィルタが有効になります。

combine_css,extend_cache,inline_css,inline_javascript,rewrite_css,rewrite_images,rewrite_javascript

適応させたくない場合は、このように設定してください。

pagespeed RewriteLevel PassThrough;

フィルタを追加しています。
カンマ区切りで記述します。

collapse_whitespace　HTML内の不要な空白を削除

trim_urls　URLから不要なプレフィックスを削除

remove_comments　HTMLのコメントを削除

pagespeed EnableFilters collapse_whitespace,trim_urls,remove_comments;

さらに、色いろなフィルタがあります。

公式ページを参考に設定してみましょう。

http://ngxpagespeed.com/ngx_pagespeed_example/

検証

本当にブラウザからの読み込みが早くなっているかどうか、検証してみます。

WordPressで試してみました。

PageSpeedオフ

ページサイズ404KB, 読み込み時間294ms

PageSpeedオン

ページサイズ376KB, 読み込み時間348ms

結果、PageSpeedをオンにしたら読み込み時間が若干遅くなりました。

代わりに、ページサイズが小さくなっていることがわかります。

HTMLソースを見ると、不要な記述が省略されていたりと色々な最適化がされています。

まとめ

PageSpeedは、Webページのデータを圧縮する効果があります。

１ページのサイズが大きく、転送量の多いWebサイトに向いているモジュールだと言えます。

逆にシンプルなWebサイトでは不要だと思われます。

適用するWebサイトがどのようなWebサイトか見極めてから試していくのが良いでしょう。
また、PageSpeed(ngx_pagespeed)は、ベータ版のモジュールです。
プロダクション環境で使う場合には必ず動作テストを行なってください。

参考

pagespeed/ngx_pagespeed · GitHub

https://github.com/pagespeed/ngx_pagespeed

ngx_pagespeed – Make the Web Faster — Google Developers

https://developers.google.com/speed/pagespeed/ngx

Nginx 用 pagespeed モジュール ngx_pagespeed を試してみたよ

http://dogmap.jp/2013/01/24/ngx_pagespeed/

”Nginx のリバースプロキシキャッシュを使用している場合、キャッシュ時間を指示してあげる必要があります。”

nginxにSPDYを導入して、Webページを高速化する方法

https://www.e-agency.co.jp/column/20130129.html

SSLを使っているWebサイトならば、SPDYの導入も検討して良いと思います

Nginx + PageSpeed(ngx_pagespeed)を導入して WEBサイトを高速化する方法

環境

nginxとPageSpeedモジュールをインストール

PageSpeedモジュール（ngx_pagespeed）のフィルタ設定

PageSpeedモジュールの設定解説

検証

まとめ

参考

PICK UP