Optimizing Your Website with the Google PageSpeed Dynamic Module for NGINX Plus

Liam CrillySr Director, Product Management

As the average size of web pages continues to grow, it is increasingly important to optimize all aspects of design, development, and delivery of your website in order to ensure a good experience for your users, regardless of what device they are using. It is well documented that page load time impacts user experience and revenue.

Google PageSpeed is a suite of tools for measuring and optimizing the performance of your website, and has been available for several years as a third‑party module you can compile into NGINX Open Source. With the introduction of dynamic modules in NGINX Plus R11, NGINX Plus users can now take advantage of PageSpeed as well.

When you load PageSpeed as a dynamic module into NGINX Plus, it automatically rewrites and optimizes resources on your website. In this blog post we explain how to build and configure the dynamic module. (Keep in mind that as a third‑party module, PageSpeed is not covered by your NGINX Plus support agreement.)

Building and Loading PageSpeed as a Dynamic Module for NGINX Plus

The following instructions are based on Google’s manual install instructions, and adapted for binary compatibility with NGINX Plus. (You can use Google’s instructions unchanged to build a dynamic module that works with NGINX Open Source.)

Step 0: Preparing the Build Environment

We strongly recommend that you compile dynamic modules on a separate system, which we refer to here as the “build environment”. Doing so minimizes the risk and complexity of the system where you plan to run NGINX Plus with the PageSpeed module (we refer to this as the “production environment”). The build environment must have the same operating system and version as the production environment; in addition, the following components must be installed:

• UnZip utility
• Compiler and make utility
• Perl‑compatible regular expressions library (development files)
• Zlib compression libraries (development files)

To ensure your build environment has these prerequisites installed, run the following command.

• For Ubuntu/Debian:[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
• For CentOS/RHEL/Oracle Linux: [@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Step 1: Obtaining NGINX Open Source

1. Working in the production environment, run the following command to identify the NGINX Open Source version that corresponds to the running NGINX Plus release. It’s highlighted in orange in this output: NGINX 1.11.5, which corresponds to NGINX Plus R11.[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
2. Working in the build environment, download the sources for the appropriate NGINX Open Source version.[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Step 2: Downloading and Preparing the PageSpeed Sources

Perform these steps in the build environment.

1. Look up the latest version number of the PageSpeed module in the release notes, or by running this command. [@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
2. The PageSpeed version number is used multiple times in the build commands, so set it as an environment variable, NPS_VERSION. Include only the numeric part of the version string, not the ‑stable or ‑beta suffix.[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
3. Download and extract the sources as follows. Note that these commands are expected to be run sequentially, like a script. [@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Step 3: Compiling the PageSpeed Dynamic Module

1. Working in the build environment, compile the PageSpeed dynamic module by first running the NGINX configure script with the --with-compat argument to make the dynamic module binary‑compatible with NGINX Plus. Then run make modules to compile just the module.[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
2. The build process produces the dynamic module as objs/ngx_pagespeed.so. Copy the .so file from the build environment to the modules directory, /etc/nginx/modules, in the production environment. We recommend (and the following step assumes) that as you copy the file over you rename it to include the NGINX Open Source version number, for example ngx_pagespeed_1.11.5.so.
3. Working in the production environment, create a symbolic link between the version‑numbered filename and the generic (original) filename.[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Step 4: Loading the PageSpeed Dynamic Module

Perform these steps in the production environment.

1. Include the load_module directive to load PageSpeed as a dynamic module. The directive must appear in the top‑level (“main”) context of the nginx.conf configuration file (that is, not in the http or stream contexts).[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
2. PageSpeed itself is configured in the http context so put these directives in a new configuration file called pagespeed.conf in the /etc/nginx/conf.d directory. PageSpeed is activated for the website specified in the proxy_pass directive, here http://www.example.com. [@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
3. Reload NGINX Plus to load the PageSpeed module into the running instance.[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Testing the NGINX Plus PageSpeed Module with PageSpeed Insights

PageSpeed Insights is a separate tool provided by Google for measuring the level of optimization applied to a web page for both mobile and desktop devices. It provides a score for both devices with suggestions for how to make the page load faster. It is a useful tool for measuring your site and for demonstrating the effectiveness of the PageSpeed module.

You can use PageSpeed Insights to compare your site score and suggestions for optimization with and without PageSpeed enabled. Swap between the pagespeed on; and pagespeed off; directives to measure the effectiveness of the PageSpeed module on your site.

PageSpeed applies its optimizations without any further configuration or tuning. However, if you want to have more control over which optimizations are performed on your site, refer to the PageSpeed documentation.

Try out PageSpeed with NGINX Plus for yourself – start your free 30-day trial today or contact us to discuss your use cases.

About the Author

Liam CrillySr Director, Product Management

More blogs by Liam Crilly