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

2024-09-18 09:57:41 浏览数 (1)

最近文章写的很勤嘛哈哈,在宝塔面板部署完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的开发库,而不需要用户手动确认每个软件包的安装。这些软件包通常是在编译和安装其他软件时所需的依赖项,命令如下:

代码语言:javascript复制
yum install gcc cmake unzip wget gcc-c   pcre-devel zlib-devel -y

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

安装完成后,开启安装pagespeed

安装pagespeed

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

代码语言:javascript复制
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】,命令如下:

代码语言:javascript复制
tar -xvzf v1.13.35.2-stable.tar.gz

cd incubator-pagespeed-ngx-1.13.35.2-stable

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

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

代码语言:javascript复制
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

查看目录下文件

代码语言:javascript复制
ls -lh

如图,看看有没有这个【psol】文件,如图:

编译安装

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

代码语言:javascript复制
cd /www/server/nginx/sbin/

cp nginx nginx.bak

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

代码语言:javascript复制
ng_pagespeed

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

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

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

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

配置文件

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

代码语言:javascript复制
# 基本设置  
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服务器即可。

验证

验证方法很多,比如:

代码语言:javascript复制
nginx -V

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

代码语言:javascript复制
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模块,但是知道什么时候就删除了,不过删除了也好,毕竟太占用资源了,还是那句话服务器配置不理想的不建议使用,可能会适得其反,好了有问题留言反馈吧。

0 人点赞