宝塔面板Nginx环境部署Pagespeed模块来提升web性能图文详解

最近文章写的很勤嘛哈哈，在宝塔面板部署完brotli功能模块之后，偶尔间看到有人提到了pagespeed模块不明所以的我于是乎百度了一下，得知Pagespeed是Google提供的一个网页性能工具，主要用于测试和优化网页在PC端和移动端的性能。通过Pagespeed，用户可以识别并解决网页加载速度慢、响应时间长等性能问题，从而提升用户体验和网站的整体性能。一看见可以提升网站的性能，瞬间就来了性质，直到安装完成后才明白真心不建议大家安装，至于为什么，看文章最后就知道了。

无论怎么样文章还是记录了，如果有需要的按照如下教程开启折腾之路吧。

环境描述

服务器版本：CentOS Linux release 7.9.2009 (Core)

内核版本：Linux localhost.localdomain 3.10.0-1160.49.1.el7.x86_64

GCC版本：gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-44)（gcc -v命令查看，因为pagespeed模块编译对GCC版本有要求）

宝塔面板：9.1.0

Nginx示例版本：Nginx 1.22

需要的安装包：incubator-pagespeed-ngx-1.13.35.2-stable（wget https://github.com/apache/incuba ... .35.2-stable.tar.gz）

安装依赖

通过YUM包管理器自动安装GCC编译器（包括C和C++）、CMake构建系统、unzip解压工具、wget下载工具、PCRE和zlib的开发库，而不需要用户手动确认每个软件包的安装。这些软件包通常是在编译和安装其他软件时所需的依赖项，命令如下：

yum install gcc cmake unzip wget gcc-c++ pcre-devel zlib-devel -y

输入命令后系统会自动安装，就是部分镜像可能出错，系统会自动匹配，如图：

安装完成后，开启安装pagespeed

安装pagespeed

终端新建【ngx_page】目录，进入目录下，下载文件。命令如下：

mkdir -p /www/server/ngx_page/
cd /www/server/ngx_page/

wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz

输入之后，如图，基本没啥难度。如果访问github受限制就下载到本地，在上传到服务里目录里。

解压文件，进入目录【incubator-pagespeed-ngx-1.13.35.2-stable】，命令如下：

tar -xvzf v1.13.35.2-stable.tar.gz

cd incubator-pagespeed-ngx-1.13.35.2-stable

如图，下载后进入目录在解压文件。

进入目录后在进行下载文件，解压文件，命令如下：

wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz

tar -xvzf 1.13.35.2-x64.tar.gz

查看目录下文件

ls -lh

如图，看看有没有这个【psol】文件，如图：

编译安装

进入宝塔面板的nginx目录，备份宝塔nginx文件。

cd /www/server/nginx/sbin/

cp nginx nginx.bak

备份完成之后我们按照以下步骤进行安装。在宝塔面板右侧软件商店，去卸载宝塔面板，卸载完成后点击【安装】，编译安装，选择版本【1.22】，然后添加自定义模块，命令如下：

ng_pagespeed

--add-module=/www/server/ngx_page/incubator-pagespeed-ngx-1.13.35.2-stable

 确保模块参数的目录位置正确（图路径是后续变更的），名称和描述随便设置就行。

我们选择【1.22.1】版本，设置后开启刚刚自定义模块，启用状态，如图。

我安装了两个模块，一个是【brotli】压缩模块和【pagespeed】加速模块，确定没有问题后，点击【提交并安装】，等待安装完成，时间不长但也不慢，取决于服务器运行速度和带宽，直至安装成功，然后配置文件。

配置文件

这里说明下，跟brotli不一样，pagespeed的配置需要去网站站点里设置，，找到网站，想要使用pagespeed功能的网站，设置，配置文件，复制如下代码：

# 基本设置  
pagespeed on;  
pagespeed FileCachePath /var/ngx_pagespeed_cache;  

# 启用必要的优化过滤器  
pagespeed EnableFilters collapse_whitespace;  
pagespeed EnableFilters canonicalize_javascript_libraries;  
pagespeed EnableFilters combine_css;  
pagespeed EnableFilters combine_javascript;  
pagespeed EnableFilters elide_attributes;  
pagespeed EnableFilters extend_cache;  
pagespeed EnableFilters flatten_css_imports;  
pagespeed CssFlattenMaxBytes 5120;  
pagespeed EnableFilters lazyload_images;  
pagespeed EnableFilters rewrite_javascript;  
pagespeed EnableFilters insert_dns_prefetch;  
pagespeed EnableFilters prioritize_critical_css;  
  
# 禁止对特定目录的优化（可选）  
pagespeed Disallow "*/zb_system/*";  
  
# 图片处理配置  
pagespeed EnableFilters lazyload_images;  
pagespeed EnableFilters rewrite_images;  
pagespeed EnableFilters recompress_images;  
pagespeed EnableFilters convert_jpeg_to_webp;  
# 如果需要处理动画GIF，则启用此过滤器  
# pagespeed EnableFilters convert_to_webp_animated;  
# 注意：convert_to_webp_lossless 和 convert_to_webp_animated 可能会与 convert_jpeg_to_webp 冲突，因为它们用于不同的图片格式和目的  
  
# 移动端图片优化  
pagespeed EnableFilters resize_mobile_images;  
pagespeed EnableFilters responsive_images;  
pagespeed EnableFilters resize_images;  
pagespeed EnableFilters insert_image_dimensions;  
pagespeed EnableFilters resize_rendered_image_dimensions;  
pagespeed EnableFilters strip_image_meta_data;  
  
# 图片格式转换优化（选择性地启用）  
# pagespeed EnableFilters convert_png_to_jpeg; # 注意：这可能会导致图像质量损失  
# pagespeed EnableFilters convert_to_webp_lossless; # 对于静态图片，如PNG和GIF，可以考虑使用无损压缩  
  
# 允许在JS中引用的资源也进行优化  
pagespeed InPlaceResourceOptimization on;  
pagespeed EnableFilters in_place_optimize_for_browser;  
  
# 配置特殊的location块来处理PageSpeed资源  
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {  
    add_header Cache-Control "public, max-age=31536000";  
    # 其他的header设置可以根据需要添加  
}  
  
location ~ "^/ngx_pagespeed_static/" { }  
location ~ "^/ngx_pagespeed_beacon" { }

如图所示，设置完成后【/var/ngx_pagespeed_cache】确保这个目录存在，不存在可以自己新建或者设置其他缓存的目路径。

安装完成后，重载或者重启nginx服务器即可。

验证

验证方法很多，比如：

nginx -V

如图，我们能看见pagespeed模块信息，或者直接访问页面：

curl -I -p https://www.itlaoli.com

换成自己的域名访问，如图显示【X-Page-Speed：1.13.35.2-0】相关信息即表示已经成功部署和开启了相关功能。

注意事项

在安装和部署中遇到了几个问题，不知道在重新编译安装时为什么会出现安装失败，我测试的时候用1.24提示安装失败，文件不存在：/www/server/nginx/sbin/nginx，我以为版本不行，结果第二次安装1.22时又出现失败，不为什么，然后重新安装，重新设置就成功了，没搞明白哪里出错了，所以我由原来的1.24更换了1.22

最重要的一点开启pagespeed之后网站速度真的是质的提升，效果上感觉就很明显都不用看数据和对比了，但是，对嘛哪有那么好的事情，有利就有弊啊，这个服务器的负载状态和CPU的使用率瞬间也就拉满了，按照网上的说辞是调动了CPU的功能去满足网站速度的提示，我去后台一看，果真，负载已经跑满了，如图：

CPU基本是80%+，截图时降到44.2%，所以也是不建议安装了，毕竟配置是2核4G的都这样，单核和低配的更不要去想了，估计都得堵死，所以折腾下载也并没有什么L用哈，白折腾，但是不管怎么样的的确确学到了新的支持，看宝塔论坛里说1.7之后集成了pagespeed模块，但是知道什么时候就删除了，不过删除了也好，毕竟太占用资源了，还是那句话服务器配置不理想的不建议使用，可能会适得其反，好了有问题留言反馈吧。