NGINX Plus の Google PageSpeed ダイナミック モジュールを使用して Web サイトを最適化する

Web ページの平均サイズが拡大し続けるにつれて、ユーザーが使用するデバイスに関係なく、優れたエクスペリエンスを確保するために、Web サイトの設計、開発、配信のあらゆる側面を最適化することがますます重要になっています。 ページの読み込み時間がユーザー エクスペリエンスと収益に影響を与えることはよく知られています。

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

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

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

以下の手順は、 Google の手動インストール手順に基づいており、NGINX Plus とのバイナリ互換性に合わせて調整されています。 (Google の手順をそのまま使用して、NGINX オープンソースで動作する動的モジュールを構築できます。)

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

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

• 解凍ユーティリティ
• コンパイラと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オープンソースの入手

1. 実稼働環境で作業している場合は、次のコマンドを実行して、実行中の NGINX Plus リリースに対応する NGINX オープンソース バージョンを識別します。 この出力ではオレンジ色で強調表示されています。 NGINX 1.11.5 は、NGINX Plus R11 に相当します。

   $ nginx -v nginx バージョン: nginx/1.11.5 (nginx-plus-r11)

2. ビルド環境で作業し、適切な NGINX オープンソース バージョンのソースをダウンロードします。

   $ 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/"

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

   $ NPS_VERSION=バージョン文字列の数値部分

3. 次のようにソースをダウンロードして解凍します。 これらのコマンドはスクリプトのように順番に実行されることに注意してください。

   https://github.com/pagespeed/ngx_pagespeed/archive/v を取得します。${NPS_VERSION} -beta.zip を解凍します${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 $(ベース名${psol_url}) # psol/ に抽出

ステップ3: PageSpeed ダイナミック モジュールのコンパイル

1. ビルド環境で作業し、最初に--with-compat引数を指定して NGINX configureスクリプトを実行し、動的モジュールを NGINX Plus とバイナリ互換にして、PageSpeed 動的モジュールをコンパイルします。 次に、 make modulesを実行してモジュールだけをコンパイルします。

   $ cd ../nginx-1.11.5 $ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION} -beta --with-compat $モジュールを作成する

2. ビルド プロセスにより、動的モジュールがobjs/ngx_pagespeed.soとして生成されます。 ビルド環境から.soファイルを本番環境のモジュール ディレクトリ/etc/nginx/modulesにコピーします。 ファイルをコピーするときに、NGINX オープンソースのバージョン番号 (例: ngx_pagespeed_1.11.5.so ) を含むように名前を変更することをお勧めします (次の手順ではこれを前提としています)。

3. 運用環境で作業する場合は、バージョン番号付きのファイル名と汎用 (元の) ファイル名の間にシンボリック リンクを作成します。

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

ステップ4: PageSpeed ダイナミック モジュールの読み込み

運用環境でこれらの手順を実行します。

1. PageSpeed を動的モジュールとして読み込むには、 load_moduleディレクティブを含めます。 ディレクティブは、 nginx.conf構成ファイルの最上位 (「メイン」) コンテキスト (つまり、 httpまたはstreamコンテキストではない) に出現する必要があります。

   load_module モジュール/ngx_pagespeed.so;

2. PageSpeed 自体はhttpコンテキストで構成されているため、これらのディレクティブを/etc/nginx/conf.dディレクトリのpagespeed.confという新しい構成ファイルに配置します。 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;
   }

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

   $ sudo nginx -s リロード

PageSpeed Insights を使用した NGINX Plus PageSpeed モジュールのテスト

PageSpeed Insightsは、モバイル デバイスとデスクトップ デバイスの両方で Web ページに適用された最適化のレベルを測定するために Google が提供する別のツールです。 両方のデバイスのスコアと、ページの読み込みを高速化するための提案が表示されます。 これは、サイトを測定し、PageSpeed モジュールの有効性を実証するための便利なツールです。

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

PageSpeed は、追加の構成や調整を行わずに最適化を適用します。 ただし、サイトで実行される最適化をより細かく制御したい場合は、 PageSpeed のドキュメントを参照してください。

NGINX Plus を使用した PageSpeed をぜひお試しください。今すぐ30 日間の無料トライアルを開始するか、弊社にお問い合わせの上、使用事例についてご相談ください。