大鸟在浏览一些网站的时候,看到不错的JS特效、图片都喜欢将功能收藏,或者图片另存为下来。经常在下载JS和图片的时候看到其后缀比较奇怪,比如带有".jpg.pagespeed.ic.TyXVh2L5XY.jpg"这样的后缀,可以看到当前网站环境中安装过ngx_pagespeed加速插件。所以,在这篇文章中,大鸟也将在Linux VPS主机WEB环境中安装ngx_pagespeed看看,不一定去使用,但是看看如何安装的。
从用户体验角度看,JS、图片地址是这样的感觉不是很好看,但是有些大型网站也是有使用的,应该在一定程度上起到加速作用。据说对于单核机器性能不理想,而且占用资源还比较大。
第一、安装ngx_pagespeed准备
1、这次的测试环境使用军哥LNMP V1.3版本环境,默认是没有安装ngx_pagespeed或者可以快速安装的。
2、备份数据。建议我们还是先在测试机环境测试后,如果有需要再用到生产环境,不要直接用生产环境,因为需要重新编译升级Nginx,万一有什么闪失。
第二、下载ngx_pagespeed插件
wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.9.32.10-beta.zip
unzip v1.9.32.10-beta.zip
cd ngx_pagespeed-1.9.32.10-beta
wget https://dl.google.com/dl/page-speed/psol/1.9.32.10.tar.gz
tar -xzvf 1.9.32.10.tar.gz
这里我们需要下载ngx_pagespeed和psol优化库,目前最新版本是v1.9.32.10,具体我们可以到https://github.com/pagespeed/ngx_pagespeed/releases 看到当前版本。
第三、修改升级文件
这里我们需要重新编译Nginx才可以,LNMP不提供一键快速安装ngx_pagespeed,这里我们添加到Nginx中,然后进行升级指定编译。
在lnmp1.3-full/include中找到upgrade_nginx.sh,在"./configure --user=www --group=www --prefix=/usr/local/nginx"位置最后添加"--add-module=$HOME/ngx_pagespeed-1.9.32.10-beta"
./upgrade.sh
然后再执行命令进行升级Nginx。
这里选择1,然后还需要选择Nginx版本。
第四、站点启动ngx_pagespeed
# 启用ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;
# 禁用CoreFilters
pagespeed RewriteLevel PassThrough;
# 启用压缩空白过滤器
pagespeed EnableFilters collapse_whitespace;
# 启用JavaScript库卸载
pagespeed EnableFilters canonicalize_javascript_libraries; #谷歌被墙,并不确定这个设置有没有副作用
# 把多个CSS文件合并成一个CSS文件
pagespeed EnableFilters combine_css;
# 把多个JavaScript文件合并成一个JavaScript文件
pagespeed EnableFilters combine_javascript;
# 删除带默认属性的标签
pagespeed EnableFilters elide_attributes;
# 改善资源的可缓存性
pagespeed EnableFilters extend_cache;
# 更换被导入文件的@import,精简CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 延时加载客户端看不见的图片
pagespeed EnableFilters lazyload_images;
# 启用JavaScript缩小机制
pagespeed EnableFilters rewrite_javascript;
# 启用图片优化机制
pagespeed EnableFilters rewrite_images;
# 预解析DNS查询
pagespeed EnableFilters insert_dns_prefetch;
# 重写CSS,首先加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;
# Example 禁止pagespeed 处理/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
将上面的配置文件丢到当前需要启动ngx_pagespeed站点的nginx配置文件server中。具体备注可以看到,上面这一段是参考张戈(https://zhangge.net/5063.html)。
同时,需要创建一个缓冲目录
mkdir -p /tmp/cache/ngx_pagespeed_cache
第五、重新启动Nginx生效
service nginx restart
重启Nginx可以生效。然后大鸟再到安装WORDPRESS测试网站,看看源代码是否有变化。
可以看到是生效了。
最后,在这篇文章中可以实现LNMP环境,包括其他Nginx也差不多类似,可以安装ngx_pagespeed,但是对于低配置机器或者对于文件名比较纠结难看的后缀的,还是不要使用。
最新补充:便宜vps主机体验了几天,发现一个问题:启用这玩意之后,CPU占用会比较高,Nginx 经常100%,虽然存在静态缓存,但是网站后台偶尔会比较卡,暂时已取消这个功能。所以对于使用单核CPU的云服务器就不建议折腾这个玩意了。