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&action=raw&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ページのデータを圧縮する効果があります。
1ページのサイズが大きく、転送量の多い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の導入も検討して良いと思います