博客 | NGINX

使用 NGINX Plus 的 Google PageSpeed 动态模块优化您的网站

NGINX-F5-horiz-black-type-RGB 的一部分
Liam Crilly 缩略图
利亚姆·克里利
2017 年 3 月 3 日发布

随着网页平均大小不断增大,优化网站设计、开发和交付的各个方面变得越来越重要,以确保用户获得良好的体验(无论他们使用什么设备)。 有充分的证据表明页面加载时间会影响用户体验和收入。

Google PageSpeed是一套用于测量和优化网站性能的工具,多年来一直作为可编译到 NGINX 开源中的第三方模块使用。 随着 NGINX Plus R11 中动态模块的引入, NGINX Plus用户现在也可以利用 PageSpeed。

当您将 PageSpeed 作为动态模块加载到 NGINX Plus 中时,它会自动重写并优化您网站上的资源。 在这篇博文中,我们解释了如何构建和配置动态模块。 (请记住,作为第三方模块,PageSpeed 不受 NGINX Plus 支持协议的约束。)

构建和加载 PageSpeed 作为 NGINX Plus 的动态模块

以下说明基于Google 的手动安装说明,并针对与 NGINX Plus 的二进制兼容性进行了调整。 (您可以不加改变地使用 Google 的说明来构建与 NGINX 开源兼容的动态模块。)

步骤 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 开源

  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. 按照如下方式下载并提取源文件。 请注意,这些命令应该像脚本一样按顺序运行。

    wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION} -beta.zip 解压 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 脚本/format_binary_url.sh ] && psol_url=$(脚本/format_binary_url.sh PSOL_BINARY_URL) wget${psol_url} tar -xzvf $(基本名称${psol_url}) # 提取至 psol/

步骤3: 编译 PageSpeed 动态模块

  1. 在构建环境中,首先运行带有--with-compat参数的 NGINX配置脚本来编译 PageSpeed 动态模块,以使动态模块与 NGINX Plus 二进制兼容。 然后运行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 二月 6 11:52 ngx_pagespeed_1.11.5.so lrwxrwxrwx 1 23 二月 6 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

步骤4: 加载 PageSpeed 动态模块

在生产环境中执行这些步骤。

  1. 包含load_module指令以将 PageSpeed 作为动态模块加载。 该指令必须出现在nginx.conf配置文件的顶层(“主”)上下文中(即,不在http上下文中)。

    load_module模块/ngx_pagespeed.so;
  2. PageSpeed 本身是在http上下文中配置的,因此将这些指令放在/etc/nginx/conf.d目录中名为pagespeed.conf的新配置文件中。 PageSpeed 针对proxy_pass指令中指定的网站激活,此处为http://www.example.com

    pagespeed MessageBufferSize 10240;
    pagespeed FileCachePath /var/ngx_pagespeed_cache;
    
    服务器 {
    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是 Google 提供的一个独立工具,用于衡量网页在移动和桌面设备上的优化程度。 它为两种设备提供了分数,并提出了如何加快页面加载速度的建议。 它是衡量您的网站和展示 PageSpeed 模块有效性的有用工具。

PageSpeed Insights 工具可以对网站的页面加载性能进行评分并提出优化方法。 当我们安装PageSpeed的动态模块时,NGINX获得了96分的高分。

您可以使用 PageSpeed Insights 比较启用和未启用 PageSpeed 的情况下的网站得分和优化建议。 在pagespeed on;pagespeed off;指令之间切换,以衡量您网站上 PageSpeed 模块的有效性。

PageSpeed 无需任何进一步的配置或调整即可应用其优化。 但是,如果您想更好地控制在您的网站上执行哪些优化,请参阅PageSpeed 文档

亲自尝试使用 NGINX Plus 的 PageSpeed – 立即开始30 天免费试用联系我们讨论您的用例


“这篇博文可能引用了不再可用和/或不再支持的产品。 有关 F5 NGINX 产品和解决方案的最新信息,请探索我们的NGINX 产品系列。 NGINX 现在是 F5 的一部分。 所有之前的 NGINX.com 链接都将重定向至 F5.com 上的类似 NGINX 内容。”