強引にKUSANAGIにngx_pagespeedを入れて動かしてみる

先日、うちの会社がCMSプロレスに協賛させていただいたわけなのですが、その中でpagespeedは利用するといいよという話があったらしいのです。
nginxにもngx_pagespeedというモジュールがあり、それを適応することでCSSやJSの圧縮や画像の最適化などをサーバ側でやってくれるようになるわけなのです。

過去にngx_pagespeedは利用したことがあったので、どうにかしてKUSANAGIにも利用できないものかと考えてみたのです。
利用した際の健忘録は↓

とはいえ、健忘録にもあるように通常だとモジュールをビルドの際に組み込んでおく必要があるわけです。
これが壁になって今まで利用を考えてこなかったのですが、「そういえばNginxも動的モジュール組み込めるようになったなあ」と気がついたので、やってみました。

モジュールの作成

読み込ませるモジュールを作成するわけですが、Nginxの動的モジュールはOSやNginxのバージョン、組み込まれている他の拡張機能に依存するため、KUSANAGIのNginxで利用されているバージョンとモジュールとまったく同じものを同じCentOS7の環境でビルドしなければなりません。

本番ではない開発用のサーバでビルドを行いました。

2018年2月24日現在の最新版のKUSANAGIのNginxは1.13.8
拡張機能は以下のコマンドにあるとおりです。

なお、調べたい場合は

nginx -V

で調べることができます。

bash <(curl -f -L -sS https://ngxpagespeed.com/install) \
--nginx-version "1.13.8" \
--dynamic \
-a '--with-http_ssl_module \
--with-http_realip_module \
--with-http_addition_module \
--with-http_sub_module \
--with-http_dav_module \
--with-http_flv_module \
--with-http_mp4_module \
--with-http_gunzip_module \
--with-http_gzip_static_module \
--with-http_random_index_module \
--with-http_secure_link_module \
--with-http_stub_status_module \
--with-http_auth_request_module \
--with-mail \
--with-mail_ssl_module \
--with-file-aio \
--with-http_v2_module \
--with-http_image_filter_module \
--with-http_geoip_module \
--with-http_perl_module'

ngx_pagespeedのビルドに関する細かい情報は公式のドキュメントを見ましょう
Build ngx_pagespeed From Source

これで、インストールまで行えば ngx_pagespeed.so が作成されます。

KUSANAGIに適応してみる

先程作った ngx_pagespeed.so を適応したいKUSANAGI環境へ移動させます。SFTPとか利用すれば簡単にできるでしょう。
以下はroot権限での作業です。

適当に /etc/nginx/ ディレクトリに modules ディレクトリを作成し、そこに ngx_pagespeed.so を移動させます。

cd /etc/nginx/
mkdir modules
mv /home/kusanagi/ngx_pagespeed.so ./modules/

nginx.conf にモジュールを読み込む記述を入れます。

vi nginx.conf

eventsの上に入れておくといいです。

load_module "modules/ngx_pagespeed.so";

あとは、適応させたいサイトの設定ファイルにpagespeed有効化の記述を入れればOKです。

vi hogehoge_ssl.conf

server_name の下辺りに入れておくと後で見やすいかもしれません。

pagespeed on;
pagespeed RewriteLevel CoreFilters;
pagespeed FileCachePath /var/cache/nginx/ngx_pagespeed; 
pagespeed EnableFilters collapse_whitespace,remove_comments,defer_javascript,prioritize_critical_css;

RewriteLevelやEnableFiltersは環境に合わせて適宜変更しましょう。
公式ドキュメントを参考にね
Configuring PageSpeed Filters

これで kusanagi restart すれば適応されます。

注意

今回は試してみただけです。本番での利用は推奨しません。
利用はしっかり保守を行うことが大前提となります。

前述したとおり、KUSANAGIのNginxのバージョンに依存しているため、バージョンアップされるたびに毎回別環境でのビルドをする必要があり、管理的にはよろしいとは言えません。
また、ngx_pagepseedも機械的にCSSやJSなどの圧縮・最適化を行うので、利用しているテーマやプラグインによっては正常に動作しなくなったり、表示が崩れてしまったりします。

完全に自己責任で利用を行ってください。
無理して使って直せなくなってしまっても恨まないように。

まとめ

2018年2月24日現在このサイトには適応してあるので、稼働自体に問題はありません。
PCでの表示では体感速度的に変化はありませんが、CMSプロレスでも利用していた「Test My Site」では2秒という表示速度まで上げることができました。

「PageSpeed Insights」でも評価を上げることができたので、ngx_pagespeedの利用自体は良いことなのだと思います。
テーマやプラグインに制約が出てきてしまうので、KUSANAGIに導入されるのは難しいかなとも思いますが、こんな方法もあるよというくらいで覚えておいてくれればと思います。

あ、あとこのサイトはさくらのクラウドのウェブアクセラレータも使ってますので、そっちの影響もあるかなと思いますよ。

いろいろ組み合わせて、高速なWeb環境を実現だー
ヾ(・д・。)マタネー♪

この記事を書いた人

たぬき@首席技監

アーシタンと蔵守の技術周り担当。主にワードプレス(WordPress)、サーバ管理なんかをやっています。