使用 ngx_pagespeed 优化 WordPress 前端

2022年3月14日 WordPress 小羿先森

ngx_pagespeed 模块的主要功能如下
解决安装 ngx_pagespeed 所需的依赖
LNMP 安装 ngx_pagespeed 的方法
宝塔面板安装ngx_pagespeed 模块
Centos 6 安装 ngx_pagespeed 很容易出现的错误及解决办法
配置 Nginx PageSpeed 为我们的 WordPress 加速

Nginx PageSpeed 是 Nginx 的一个扩展模块，主要的功能是再服务器端优化网站的前端页面，使前端页面符合 PageSpeed Insights 的指导原则，有了 PageSpeed，网站开发人员就可以在开发前端页面的时候，稍微轻松一点了，把前端优化的任务都交给服务器来处理，虽然这会使服务器负载增加；但从减少客户请求数的角度去看，牺牲部分服务器性能还是值得的，反正现在服务器也越来越便宜，大不了增加服务器配置就好了，下面我们来看一下安装和使用 Nginx PageSpeed 的方法。

ngx_pagespeed 模块的主要功能如下

ngx_pagespeed 几乎为我们提供了优化网站前端页面所需要的所有功能，下面是一些比较常用和重要的功能，其他功能可以到 ngx_pagespeed 官方文档查看。

图像优化：移除图片元数据、动态调整，重新压缩
CSS 和 JavaScript 压缩、合并、级联、内联，把当前页面需要的 CSS 直接放在页面中，符合 PageSpeed Insights 提出的 “清除首屏内容中阻止呈现的 JavaScript 和 CSS” 原则。
小资源内联，比如比较小的图片，直接转换成 base64 格式的，放在 HTML 中。
推迟图像和 JavaScript 加载，只加载当前屏幕显示的图像，异步加载 JavaScript
对HTML重写、压缩空格、去除注释等，吧 HTML 页面中不必要的内容都移除了，减少了 HTML 的体积。
提升缓存周期，把静态资源的缓存过期时间提高了。

下面是本站使用 ngx_pagespeed 优化过后，通过 PageSpeed Insights 测试出来的分数，不管是移动端、还是桌面端，均达到了100分，这是手工优化前端页面很难达到的高度。当然，优化的过程是动态的，也不是每个页面随时都能达到这个分数，但是整体上来看，使用 ngx_pagespeed 优化后，前端页面的打开速度确实快了许多，用肉眼就能分辨出来。

解决安装 ngx_pagespeed 所需的依赖

安装之前，首先要解决安装或升级 ngx_pagespeed 所需的依赖环境。

RedHat, CentOS, or Fedora

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip

Ubuntu or Debian

sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip

如果已经安装了则需要更新依赖(要求 gcc ≥ 4.8 or clang ≥ 3.3)

LNMP 安装 ngx_pagespeed 的方法

由于我使用的是军哥的 LNMP 一键安装脚本，直接编辑升级 Nginx 的脚本，加上编译 ngx_pagespeed 的参数，升级 Nginx 就可以了，当然，如果不想升级，直接输入当前的 Nginx 版本号，相当于重新安装了一遍。

1、首先，根据官方教程下载 Page Speed，把下面的命令保存成 download_pagespeed.sh 文件，然后运行 chmod +x download_pagespeed.sh 赋予该文件可执行权限，然后运行 ./download_pagespeed.sh 即可自动下载并解压 ngx_pagespeed 模块的源代码。

#[check the release notes for the latest version]
NPS_VERSION=1.13.35.2-stable
cd /opt
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d)
cd "$nps_dir"
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}x64.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/

从 1.12.34 版本开始，按照官方的教程进行的时候，可能会遇到无法下载 PSOL 的情况，这时候，按照下面的地址下载对应版本的 PSOL 就可以了。

https://dl.google.com/dl/page-speed/psol/[PageSpeed版本]-x[系统位数].tar.gz

2、然后编辑 Nginx 升级脚本

我用的是 LNMP 1.3，其他版本更换安装路径即可。

cd /lnmp1.3-full/include
vi upgrade_nginx.sh

找到 ./configure --user=www --group=www --prefix=/usr/local/nginx，在这行代码的末尾添加，其中 ngx_pagespeed-1.13.35.2-stable 是第一步下载的 PageSpeed 模块的目录名称，根据实际情况替换即可。

--add-module=/opt/incubator-pagespeed-ngx-1.13.35.2-stable

接着更新 Nginx，可以根据需要，选择 Nginx 版本升级，一般选择最新的稳定版本即可。

./upgrade_nginx.sh

十几分钟之后，如果没有提示其他错误，Nginx 升级到指定版本的同时，ngx_pagespeed 就安装好了。

宝塔面板安装ngx_pagespeed 模块

宝塔面板虽然是图形界面，但最终执行的还是命令行的操作，所以我们一样可以给Nginx添加ngx_pagespeed 模块，宝塔面板安装Nginx的脚本文件路径为：/www/server/panel/install/nginx.sh，我们修改这个文件，添加编译配置，然后在后台重新安装Nginx，安装的时候选择编译安装就可以了。

安装完成后，直接在站点设置的网站配置或伪静态里面添加 Pagespeed 配置就可以了。

Centos 6 安装 ngx_pagespeed 很容易出现的错误及解决办法

有些朋友在安装 ngx_pagespeed 时，出现了以下错误，

build_from_source=false error: module ngx_pagespeed requires the pagespeed optimization library

意思是需要 pagespeed 优化库，也就是上面下载的 psol 文件。明明已经下载了，可是为什么找不到呢？这是因为Centos 6 的 gcc 版本较低，达不到安装 ngx_pagespeed 的要求，这时候，升级一下 gcc 就可以了。

cd /etc/yum.repos.d && wget http://people.centos.org/tru/devtools-2/devtools-2.repo
yum -y install devtoolset-2-gcc devtoolset-2-binutils devtoolset-2-gcc-c++

上面的命令将安装的文件放在了 /opt/rh/devtoolset-2，要使用这个 gcc 来编辑，需要再编辑的时候，指定 gcc 的位置，重新编辑 upgrade_nginx.sh，在文件的末尾加入以下命令。

./configure (中间省略) --add-module=pagespeed代码路径 --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

最终，upgrade_nginx.sh 编辑 Nginx 的命令应该是这样子的。

./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module ${Nginx_With_Openssl} ${NginxMAOpt} ${Nginx_Modules_Options} --add-module=/opt/incubator-pagespeed-ngx-1.13.35.2-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

如果系统是 CentOS7，还是提示 “build_from_source=false checking for psol … not found”，可能是 libuuid-devel 没有安装，运行下面命令安装即可。

yum install -y libuuid-devel

配置 Nginx PageSpeed 为我们的 WordPress 加速

安装之后，ngx_pagespeed 已自动启用，通过 Nginx 配置文件启用 pagespeed 后，PageSpeed 就可以我们的网站服务了。下面是我使用的 ngx_pagespeed 配置文件，供大家参考。大家可以根据自己的需要启用或禁用某些模块，更多ngx_pagespeed配置青岛到 ngx_pagespeed 官方文档查看。

# on 启用，off 关闭
pagespeed on;

# 重置 http Vary 头
pagespeed RespectVary on;

# html字符转小写
pagespeed LowercaseHtmlNames on;

# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;

# 相对URL
pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By ngx_pagespeed";

# 开启 https
pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件（空间大小、时限）
pagespeed FileCachePath "/var/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;

# 过滤规则
# pagespeed RewriteLevel PassThrough;
pagespeed RewriteLevel OptimizeForBandwidth;

# 不需过滤的目录或文件
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";

# 移除不必要的url前缀，开启可能会导致某些自动加载功能失效
#pagespeed EnableFilters trim_urls;

# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;

# 移除 html 注释
pagespeed EnableFilters remove_comments;

# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;

# 延迟加载 JavaScript
pagespeed EnableFilters defer_javascript;

# 合并CSS
pagespeed EnableFilters combine_css;

# 压缩CSS
pagespeed EnableFilters rewrite_css;

# 重写CSS，优化加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;

# google字体直接写入html 目的是减少浏览器请求和DNS查询
pagespeed EnableFilters inline_google_font_css;

# 压缩 js
pagespeed EnableFilters rewrite_javascript;

# 合并 js
pagespeed EnableFilters combine_javascript;

# 重写样式属性
pagespeed EnableFilters rewrite_style_attributes;

# 压缩图片
pagespeed EnableFilters rewrite_images;

# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;

# 图片预加载
pagespeed EnableFilters inline_preview_images;

# 调整图片大小
pagespeed EnableFilters resize_images;

# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;

# 图片延迟加载
pagespeed EnableFilters lazyload_images;

# 雪碧图片，图标很多的时候很有用
#pagespeed EnableFilters sprite_images;

# 扩展缓存改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;

# 不将规则应用在 wp-admin目录和 wplogin.php页面
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 风险指数高，不建议开启
#pagespeed EnableFilters local_storage_cache;

# 不能删
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}

location ~ "^/ngx_pagespeed_static/" { }

location ~ "^/ngx_pagespeed_beacon$" { }

location /ngx_pagespeed_statistics {
allow 127.0.0.1;
deny all;
}

location /ngx_pagespeed_global_statistics {
allow 127.0.0.1;
deny all;
}

location /ngx_pagespeed_message {
allow 127.0.0.1;
deny all;
}

location ~ ^/pagespeed_global_admin {
allow 127.0.0.1;
deny all;
}

pagespeed StatisticsPath /ngx_pagespeed_statistics;
pagespeed MessagesPath /ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed_console;
pagespeed AdminPath /pagespeed_admin;

# 控制台可通过 http://domain.com/ngx_pagespeed_admin 来查看控制台
pagespeed Statistics on;
pagespeed StatisticsLogging on;

pagespeed LogDir /var/log/pagespeed;

location /pagespeed_console {
allow 127.0.0.1;
deny all;
}

pagespeed AdminPath /ngx_pagespeed_admin;

location ~ ^/pagespeed_admin {
allow 127.0.0.1;
deny all;
}

# 日志限制
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;