NGINX Plus向けGoogle PageSpeed Dynamic ModuleでWebサイトを最適化

Liam Crillyプロダクトマネジメント担当シニアディレクター

Webページの平均サイズが増え続ける中、ユーザーがどのデバイスを使用していても快適に利用できるよう、Webサイトの設計、開発、配信のあらゆる側面を最適化することがますます重要になっています。ページの読み込み時間がユーザーエクスペリエンスと収益に影響を与えることは、十分に実証されています。

Google PageSpeedは、Webサイトのパフォーマンスを測定し、最適化するためのツールスイートです。また、NGINX Open Sourceにコンパイルして組み込めるサードパーティ製モジュールとして、数年前から提供されています。NGINX Plus R11で動的モジュールが導入されたことにより、NGINX PlusのユーザーもPageSpeedを利用できるようになりました。

PageSpeedを動的モジュールとしてNGINX Plusに読み込むと、Webサイト上のリソースが自動的に書き換えられ、最適化されます。このブログ記事では、動的モジュールをビルドして設定する方法について説明します。（PageSpeedはサードパーティ製モジュールであるため、NGINX Plusのサポート契約の対象外となる点にご注意ください。）

PageSpeedをNGINX Plusの動的モジュールとしてビルドして読み込む

以下の手順は、Googleの手動インストール手順に基づき、NGINX Plusとのバイナリ互換性を確保するよう調整されています。（Googleの手順を変更せずに使用して、NGINX Open Sourceで動作する動的モジュールをビルドできます。）

ステップ0：ビルド環境の準備

動的モジュールは、ここで「ビルド環境」と呼ぶ別のシステムでコンパイルすることを強く推奨します。これにより、PageSpeedモジュールを使用してNGINX Plusを実行するシステム（ここでは「本番環境」と呼びます）のリスクと複雑さを最小限に抑えられます。ビルド環境では、本番環境と同じオペレーティングシステムおよびバージョンを使用する必要があります。さらに、以下のコンポーネントをインストールする必要があります。

• UnZipユーティリティ
• コンパイラおよびmakeユーティリティ
• Perl互換正規表現ライブラリ（開発用ファイル）
• Zlib圧縮ライブラリ（開発用ファイル）

ビルド環境にこれらの前提条件がインストールされていることを確認するには、次のコマンドを実行します。

• Ubuntu/Debianの場合：

$ sudo apt-get install unzip gcc make libpcre3-dev zlib1g-dev

• CentOS/RHEL/Oracle Linuxの場合：

$ sudo yum install unzip gcc make pcre-devel zlib-devel

ステップ1：NGINX Open Sourceの入手

1. 本番環境で次のコマンドを実行し、稼働中のNGINX Plusリリースに対応するNGINX Open Sourceのバージョンを確認します。この出力ではオレンジ色で強調表示されているNGINX 1.11.5が、NGINX Plus R11に対応します。

$ nginx -vnginx version: nginx/1.11.5 (nginx-plus-r11)

1. ビルド環境で、該当するバージョンのNGINX Open Sourceのソースをダウンロードします。

$ wget -qO - http://nginx.org/download/nginx-1.11.5.tar.gz | tar zxfv -

ステップ2：PageSpeedソースのダウンロードと準備

ビルド環境で以下の手順を実行します。

1. PageSpeedモジュールの最新バージョン番号は、リリースノートで確認するか、次のコマンドを実行して確認します。

$ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"

1. PageSpeedのバージョン番号はビルドコマンド内で複数回使用するため、環境変数「NPS_VERSION」として設定します。バージョン文字列には数値部分のみを含め、「‑stable」や「‑beta」のサフィックスは含めないでください。

$ NPS_VERSION=numeric-part-of-version-string

1. 以下の手順でソースをダウンロードして展開します。これらのコマンドは、スクリプトのように順番に実行することを前提としています。

wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip unzip v${NPS_VERSION}-beta.zip cd ngx_pagespeed-${NPS_VERSION}-beta/ psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz [ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL) wget ${psol_url} tar -xzvf $(basename ${psol_url}) # extracts to psol/

ステップ3：PageSpeed動的モジュールのコンパイル

1. ビルド環境で、まずNGINXの「configure」スクリプトを「--with-compat」引数付きで実行し、ダイナミックモジュールをNGINX Plusとバイナリ互換にします。次に「make modules」を実行して、モジュールのみをコンパイルします。

$ cd ../nginx-1.11.5$ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION}-beta --with-compat
$ make modules

1. ビルドプロセスにより、動的モジュールが「objs/ngx_pagespeed.so」として生成されます。ビルド環境から本番環境のモジュールディレクトリ「.so」ファイルをコピーしてください。コピー先は「/etc/nginx/modules」です。ファイルをコピーする際は、NGINX Open Sourceのバージョン番号を含む名前（例：「ngx_pagespeed_1.11.5.so」）に変更することを推奨します。次の手順では、この名前に変更済みであることを前提としています。
2. 本番環境で、バージョン番号を含むファイル名から汎用（元の）ファイル名へのシンボリックリンクを作成します。

$ cd /etc/nginx/modules$ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so
$ ls -gG
-rw-r--r-- 1 11924784 Feb  6 11:52 ngx_pagespeed_1.11.5.so
lrwxrwxrwx 1       23 Feb  6 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

ステップ4：PageSpeed動的モジュールの読み込み

以下の手順は本番環境で実行してください。

1. PageSpeedを動的モジュールとして読み込むには、load_moduleディレクティブを追加します。このディレクティブは、nginx.conf構成ファイルの最上位（「main」）コンテキストに記述する必要があります（つまり、httpまたはstreamコンテキストには記述しません）。

load_module modules/ngx_pagespeed.so;

1. PageSpeed自体はhttpコンテキストで設定するため、これらのディレクティブをpagespeed.confという名前の新しい設定ファイルに記述し、/etc/nginx/conf.dディレクトリに配置します。PageSpeedは、proxy_passディレクティブで指定したWebサイト（ここではhttp://www.example.com）に対して有効になります。

pagespeed MessageBufferSize 10240;
pagespeed FileCachePath /var/ngx_pagespeed_cache;

server {
    listen 80;
    location / {
        proxy_pass http://www.example.com; 
    }
    pagespeed on;
}

1. NGINX Plusをリロードし、実行中のインスタンスにPageSpeedモジュールを読み込みます。

$ sudo nginx -s reload

PageSpeed Insightsを使用したNGINX Plus PageSpeed Moduleのテスト

PageSpeed Insightsは、モバイルデバイスとデスクトップデバイスの両方を対象に、Webページに適用されている最適化の度合いを測定するためにGoogleが提供する独立したツールです。両方のデバイスについてスコアを示し、ページの読み込みを高速化する方法を提案します。サイトの測定やPageSpeedモジュールの有効性の実証に役立つツールです。

PageSpeed Insightsを使用すると、PageSpeedを有効にした場合と無効にした場合のサイトスコアと最適化の提案を比較できます。サイトでのPageSpeedモジュールの効果を測定するには、pagespeed on;ディレクティブとpagespeed off;ディレクティブを切り替えます。

PageSpeedは、追加の設定やチューニングを行わなくても最適化を適用します。ただし、サイトに適用する最適化をより細かく制御する場合は、PageSpeedドキュメントを参照してください。

NGINX PlusでPageSpeedをお試しください。今すぐ30日間の無料トライアルを開始するか、ユースケースについてお問い合わせください。

著者について

Liam Crillyプロダクトマネジメント担当シニアディレクター

Liam Crillyのその他のブログ記事