跨境极客Charlie
WordPress基础教程

进阶：Nginx增加Google PageSpeed模块

LNMP环境下Nginx增加PageSpeed模块，使之模块化，可定制，优化CSS，js发送过程，优化图片，缩减资源大小等工作，实现Web性能的最佳实践。

Charlie
Google PageSpeed
文章头图：进阶：Nginx增加Google PageSpeed模块

适用范围提示（2020 年原文，2024 年部分修订）

本文基于 LNMP 环境下手动编译 ngx_pagespeed 的方式。ngx_pagespeed 由 Google 开发，目前处于低维护状态，2023 年后未有重大更新，不建议在新项目中作为首选方案。现代替代路径包括：Cloudflare（CDN 层优化，无需改动服务器）、Nginx proxy_cache + gzip/brotli，以及 WebP 格式的构建时处理。

阅读建议：本文的 PageSpeed 过滤器配置逻辑和性能优化思路仍有参考价值；具体编译安装步骤请先确认 Nginx 版本与模块兼容性。

在网页测速结果内经常会看到优化提醒：缩短服务器响应时间，使用浏览器缓存，缩减资源大小，优化图片，优化CSS发送过程，移除会阻止内容呈现的JavaScript等等，虽然WordPress经过多个插件组合可以实现这些功能，但是太多的插件，服务器负担太重导致服务器响应时间变长，谷歌PageSpeed可以使用高速缓存，共享内存等方式加速网站资源的传输。一次配置可多主机调用，实现十分方便。

本篇在上篇基础上深入讲LNMP环境下Nginx增加PageSpeed模块，使之模块化，可定制，优化CSS发送过程，优化图片，缩减资源大小等工作，实现Web性能的最佳实践，改善网页延迟。

PageSpeed 基础篇 基础篇：Nginx增加Google PageSpeed模块

安装MemCached

apt-get install memcached

执行netstat -tap | grep memcached，查看是否安装成功。

#安装成功会出现如下显示
root@sufob:~# netstat -tap | grep memcached
tcp 0 0 localhost:11211 *:* LISTEN 15703/memcached

配置PageSpeed

新建配置文件

先创建一个文件夹存放PageSpeed配置文件。

新建一个main.conf文件，用作PageSpeed全局变量控制。

mkdir /usr/local/nginx/page_speed
nano /usr/local/nginx/page_speed/main.conf

将下面内容复制粘贴到main.conf保存。可参考注释理解各项功能。

#main.conf
#PageSpeed 配置
pagespeed on;
#1.12.34.1以上可设置all
pagespeed ProcessScriptVariables all;
#启用PageSpeed Gzip请求资源，此项要求ng启用gzip
pagespeed FetchWithGzip on;

#配置筛选项默认CoreFilters
pagespeed RewriteLevel CoreFilters;
#是否尊重原始header
pagespeed RespectVary off;
#是否让PageSpeed优化缓存时间（接管缓存控制）
pagespeed DisableRewriteOnNoTransform off;
#重写HTML缓存头
pagespeed ModifyCachingHeaders on;
#列出未解决的错误
pagespeed ListOutstandingUrlsOnError on;
#限制资源最大值启用优化，默认大小16M
pagespeed MaxCacheableContentLength 16777216;
#配置共享内存元数据缓存
pagespeed CreateSharedMemoryMetadataCache "/var/cache/pagespeed/" 51200;
#配置文件高速缓存
pagespeed FileCachePath /var/cache/pagespeed;
pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000;
pagespeed LRUCacheKbPerProcess 8192;
pagespeed LRUCacheByteLimit 16384;

#启用memcached，默认64M，需SELinux enabled
pagespeed MemcachedServers "localhost:11211";
#共享内存元数据缓存检查点，5分钟一次
pagespeed ShmMetadataCacheCheckpointIntervalSec 300;

#缓存清除
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;
#清空缓存临界值，优化率80%
pagespeed DownstreamCacheRewrittenPercentageThreshold 80;

#PageSpeed管理页面配置
#共享内存统计
pagespeed Statistics on;
#开启虚拟主机统计信息
pagespeed UsePerVhostStatistics on;

pagespeed StatisticsLogging on;
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;
#消息缓冲区大小，默认为0，不保留消息
pagespeed MessageBufferSize 100000;
pagespeed LogDir /var/log/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;

新建一个pagespeed.conf文件，用作Nginx配置文件，实现PageSpeed模块化的必要配置。

nano /usr/local/nginx/page_speed/pagespeed.conf

将下面内容复制粘贴到pagespeed.conf保存。

#pagespeed.conf
#PageSpeed优化设置
#直接获取HTTPS资源，允许自签名证书资源
pagespeed FetchHttps enable,allow_self_signed;

#加载筛选文件
include /usr/local/nginx/page_speed/filters_config.conf;

#启用测量客户端加载和呈现页面所花费的时间
pagespeed EnableFilters add_instrumentation;
#预处理DNS
pagespeed EnableFilters insert_dns_prefetch;

#缓存
#相当于同时使用了extend_cache_images, extend_cache_scripts和 extend_cache_css
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;

#确保对pagespeed优化资源的请求进入pagespeed处理程序并且没有额外的头部信息
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$ps_dollar" { }

#PageSpeed Admin Dashboard
include /usr/local/nginx/page_speed/dashboard.conf;

新建一个filters_config.conf文件，用于控制Pagespeed功能的开启及参数。

nano /usr/local/nginx/page_speed/filters_config.conf

将下面内容复制粘贴到filters_config.conf保存。

#filters_config.conf
## Text / HTML
pagespeed EnableFilters combine_heads;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters convert_meta_tags;
pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters pedantic;
pagespeed EnableFilters remove_comments;
pagespeed EnableFilters remove_quotes;
#pagespeed EnableFilters trim_urls;

## JavaScript
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters canonicalize_javascript_libraries;
pagespeed EnableFilters inline_javascript;
#高风险,延迟加载js
#pagespeed EnableFilters defer_javascript;

## CSS
pagespeed EnableFilters outline_css;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters inline_import_to_link;
pagespeed EnableFilters inline_css;
pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters fallback_rewrite_css_urls;
pagespeed EnableFilters rewrite_style_attributes_with_url;

## Images
pagespeed EnableFilters dedup_inlined_images;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters inline_images;
pagespeed EnableFilters convert_gif_to_png;
pagespeed EnableFilters convert_jpeg_to_progressive;
pagespeed EnableFilters recompress_jpeg;
pagespeed EnableFilters recompress_png;
pagespeed EnableFilters recompress_webp;
pagespeed EnableFilters strip_image_color_profile;
pagespeed EnableFilters strip_image_meta_data;
pagespeed EnableFilters jpeg_subsampling;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters resize_images;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters insert_image_dimensions;
pagespeed NoTransformOptimizedImages on;
pagespeed EnableFilters sprite_images;

新建一个dashboard.conf文件，用于配置管理面板。

nano /usr/local/nginx/page_speed/dashboard.conf

将下面内容复制粘贴到dashboard.conf保存。

#管理员控制面板
location /ngx_pagespeed_statistics {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location /ngx_pagespeed_global_statistics {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location /ngx_pagespeed_message {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location /pagespeed_console {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location ~ ^/pagespeed_admin {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}
location ~ ^/pagespeed_global_admin {
auth_basic "PageSpeed Admin Dashboard";
auth_basic_user_file /usr/local/nginx/page_speed/.htpasswd;
}

配置缓存文件夹权限

mkdir /var/cache/pagespeed
chown www:root /var/cache/pagespeed
chmod 700 /var/cache/pagespeed
mkdir /var/log/pagespeed
chown www. /var/log/pagespeed

安装apache-utils

apt-get install apache2-utils

设置PageSpeed管理面板的用户名密码。

htpasswd -d -b -c /usr/local/nginx/page_speed/.htpasswd sufob Pagespeed

其中sufob为用户名，Pagespeed为密码，根据情况修改成自己的用户名、密码。

配置Nginx

/usr/local/nginx/conf/nginx.conf中http标签最后一行include vhost/*.conf;前插入下面一行

include /usr/local/nginx/page_speed/main.conf;

示例：

...
        access_log /home/wwwlogs/access.log;
    }
include /usr/local/nginx/page_speed/main.conf;
include vhost/*.conf;
}

在每个要启用PageSpeed模块的网站Nginx配置文件对应conf内引用下面一行即可实现PageSpeed模块化

include /usr/local/nginx/page_speed/pagespeed.conf;

修改Nginx的conf文件，需要重新加载Nginx使配置生效。

终端内运行

lnmp nginx reload

效果

查看网站源码，可以看到jquery异步加载，其余js脚本采用延迟加载，这实现了PageSpeed Insights中对移除会阻止内容呈现的 JavaScript的要求。

jpg图片自动转换成webp格式。

jpg图片自动转换成webp格式 {768x432} {priority} {caption: Photo by Someone}
jpg图片自动转换成webp格式 {768x432} {priority} {caption: Photo by Someone}

管理缓存

Dashboard有两种权限，全局管理员和网站管理员，可以在dashboard中设置新的用户名、密码，实现权限分配。

  1. 管理面板 1.1. 全局管理员面板
全局管理员面板
全局管理员面板
1.2. 管理员面板
管理员面板
管理员面板
2. 缓存报表

点击Console，可查看服务器缓存报表。根据报表数据针对性修改conf文件，达到实用要求。

更具体的内容可参照官方文档https://www.modpagespeed.com/doc/console

缓存报表
缓存报表
  1. 缓存清除

点击Caches标签下的Purge Cache，可以清除指定内容缓存也可清除全部缓存。全部清除缓存会使服务器短时间内负载升高，根据情况自行决定。

缓存清除
缓存清除

结论

本文中的conf配置文件能满足大部分速度优化需要，如果需要调整配置文件，修改文章中的filters_config.conf配置即可，根据自己的需要在行开头加#号注释掉或者添加新功能。

如果遇到jquery特效失效的情况，极有可能是js合并或者异步、延迟加载逻辑出错，重新调整conf中js的筛选器或者修改网站源码将jquery等js文件移到footer，手动设置延迟、异步加载。

如何验证「真的变快了」

  1. 任抽 产品页、列表页、首页 各一，分别在移动与桌面跑实验室工具，记录 LCP/CLS 。
  2. 对比开启过滤项前后的 HTML 体积、图片体积、请求数。
  3. 看 GSC 的 网页体验 与核心模板是否仍有异常 URL。

若验证后仍不达标，多半是 主题脚本、广告像素、客服插件 而不是 Nginx 单行配置。

常见问题

问：配置很复杂，团队维护成本？
答：PageSpeed 过滤器 需要版本化与文档；否则换人即失控。

问：是否要全站开 WebP？
答：结合 CDN 与现代图片元素 可能比服务端全自动转换更可预期。

下一步

[2026 技术实战提示] 在真实的商业环境中执行上述策略时，请始终以官方最新文档的 API 参数或界面变动为准。建议配合 GTM Preview 和 Google Search Console 进行实时验证。

同主题文章

WordPress基础教程 · 2020-08-03
Betheme主题增加产品管理功能模块，并实现谷歌结构化数据要求
Betheme 上为轻量产品展示扩展 CPT + Product 结构化数据：字段怎么填、如何用 Rich Results 测试验收；并提醒富媒体搜索结果本身未必直接带动排名。
阅读 →
WordPress基础教程 · 2020-07-25
如何使用WordPress快速搭建SOHO外贸独立网站
SOHO 用 WordPress 起独立站的适用场景：共享主机、插件生态与上手成本；同时说明电商规模化后的性能/安全边界，并链到 Shopify、Headless 等替代路径。
阅读 →
WordPress基础教程 · 2018-09-09
详解Apache重定向www到非www，http到https
Apache重定向redirects，通过配置.htaccess文件实现www重定向到非www(或非www到www)，http强制跳转到https。
阅读 →

评论

留言需人工审核后才会显示；回复会随主评论一起发布。评论按文章独立归档，请在你阅读的那篇文章下留言。 技术诊断请发邮件 sue@sufob.com或查看联系说明。