PageSpeed Nginx 加速模块教程
ngx_pagespeed 是 Google 开发的 Nginx 模块,能够自动对网页内容进行优化,包括压缩合并 CSS/JS、延迟加载图片、内联关键 CSS、转换图片格式等。它在服务器端透明地完成这些优化,无需修改网站源代码。本文将介绍在搬瓦工 VPS 上编译安装和配置 PageSpeed 模块。
一、编译安装
1.1 安装依赖
apt update
apt install build-essential libpcre3-dev zlib1g-dev libssl-dev \
unzip uuid-dev -y
1.2 下载 PageSpeed 模块
cd /usr/src
# 下载 ngx_pagespeed 模块
NPS_VERSION=1.14.36.1
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}-stable.zip
unzip v${NPS_VERSION}-stable.zip
cd incubator-pagespeed-ngx-${NPS_VERSION}-stable
# 下载 PSOL(PageSpeed Optimization Libraries)
PSOL_URL=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget $PSOL_URL
tar xzf *.tar.gz
1.3 编译 Nginx
cd /usr/src
# 获取当前 Nginx 版本
NGINX_VER=$(nginx -v 2>&1 | grep -oP '\d+\.\d+\.\d+')
wget http://nginx.org/download/nginx-${NGINX_VER}.tar.gz
tar xzf nginx-${NGINX_VER}.tar.gz
cd nginx-${NGINX_VER}
# 获取当前编译参数并添加 PageSpeed 模块
./configure $(nginx -V 2>&1 | grep 'configure arguments' | sed 's/configure arguments: //') \
--add-dynamic-module=/usr/src/incubator-pagespeed-ngx-${NPS_VERSION}-stable
make -j$(nproc)
# 安装模块
cp objs/ngx_pagespeed.so /etc/nginx/modules/
二、基础配置
# 在 nginx.conf 顶部加载模块
# load_module modules/ngx_pagespeed.so;
# 在 server 块中启用 PageSpeed
cat > /etc/nginx/conf.d/pagespeed.conf <<'EOF'
pagespeed on;
# 缓存目录
pagespeed FileCachePath /var/cache/ngx_pagespeed;
pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000;
# 启用 CoreFilters(推荐的默认优化集)
pagespeed RewriteLevel CoreFilters;
# PageSpeed 管理路径
pagespeed StatisticsPath /ngx_pagespeed_statistics;
pagespeed GlobalStatisticsPath /ngx_pagespeed_global_statistics;
pagespeed MessagesPath /ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed_console;
pagespeed AdminPath /pagespeed_admin;
pagespeed GlobalAdminPath /pagespeed_global_admin;
# 限制管理页面访问
location /ngx_pagespeed_statistics { deny all; }
location /ngx_pagespeed_global_statistics { deny all; }
location /pagespeed_admin { deny all; }
EOF
# 创建缓存目录
mkdir -p /var/cache/ngx_pagespeed
chown www-data:www-data /var/cache/ngx_pagespeed
nginx -t
systemctl reload nginx
三、过滤器详解
3.1 CoreFilters 包含的优化
- add_head:确保 HTML 有 head 标签。
- combine_css:合并多个 CSS 文件。
- combine_javascript:合并多个 JS 文件。
- convert_meta_tags:转换 meta 标签为 HTTP 头。
- extend_cache:延长资源缓存时间。
- inline_css:内联小型 CSS 文件。
- inline_import_to_link:将 CSS @import 转换为 link。
- inline_javascript:内联小型 JS 文件。
- rewrite_css:压缩 CSS。
- rewrite_javascript:压缩 JS。
- rewrite_images:优化图片。
3.2 额外推荐过滤器
# 启用额外过滤器
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters defer_javascript;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters move_css_to_head;
3.3 禁用特定过滤器
# 如果某个过滤器导致问题
pagespeed DisableFilters combine_javascript;
pagespeed DisableFilters rewrite_images;
四、图片优化配置
# 自动转换图片为 WebP
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters recompress_jpeg;
pagespeed EnableFilters recompress_png;
pagespeed EnableFilters resize_images;
# 图片质量设置
pagespeed JpegRecompressionQuality 80;
pagespeed WebpRecompressionQuality 80;
pagespeed ImageInlineMaxBytes 2048;
pagespeed CssImageInlineMaxBytes 2048;
# 启用图片延迟加载
pagespeed EnableFilters lazyload_images;
pagespeed LazyloadImagesBlankUrl "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
五、缓存管理
# 清除 PageSpeed 缓存
touch /var/cache/ngx_pagespeed/cache.flush
# 或通过 Admin 页面清除(需要配置访问权限)
# 访问 /pagespeed_admin/cache?purge=*
# 禁用特定 URL 的 PageSpeed
location /admin/ {
pagespeed off;
}
# 禁用特定文件类型
pagespeed Disallow "*.min.js";
pagespeed Disallow "*.min.css";
六、性能验证
# 检查响应头中的 PageSpeed 标识
curl -I http://your-domain.com/ | grep X-Page-Speed
# 查看优化后的 HTML 源码
curl -s http://your-domain.com/ | head -50
# 使用 PageSpeed Insights 在线测试
# https://pagespeed.web.dev/
# 使用 Lighthouse 本地测试
npm install -g lighthouse
lighthouse https://your-domain.com --output html --output-path report.html
七、注意事项
- PageSpeed 模块会增加 CPU 和内存的开销,搬瓦工至少 1GB 内存的方案更适合使用。
- 首次访问页面时速度可能变慢(需要生成优化后的资源),后续访问会命中缓存。
- JavaScript 合并和延迟加载可能与某些前端框架冲突,需要逐个测试。
- 建议在开发环境充分测试后再应用到生产环境。
总结
PageSpeed 模块可以自动完成大部分 Web 性能优化工作,是懒人优化的利器。对于更精细的控制,可以结合 Brotli 压缩、WebP 图片优化 和 Varnish 缓存 手动配置。选购搬瓦工 VPS 请查看 全部方案,购买时使用优惠码 NODESEEK2026 可享受 6.77% 的折扣,通过 bwh81.net 访问官网。