首页 > 系统应用 > nginx > 转篇Nginx服务器开启pagespeed加速效果
2015
09-28

转篇Nginx服务器开启pagespeed加速效果

问到我一个问题,问fastcgi_cache和pagespeed加速有没有冲突。略微想了下,2个都是比较原生的主,应该不存在兼容问题。

至于这个朋友问到这2个机制处理的先后问题,我思考了下。既然fastcgi_cache已经是缓存到本地的文件,那么pagespeed肯定是后处理的。通俗来说,就是当用户访问WEB时,Nginx 应该是先调用 fastcgi缓存,然后再进行pagespeed优化处理,最后返回数据给用户。

当然,经过我最后的测试,也证实了我的猜测是正确的。

重新编译了一下Nginx,测试了一下pagespeed

一般来说新增编译一个模块,只要提供这个模块的下载地址,编译应该就没多大问题了。

本文模块下载及编译参考:

#进入 nginx 源码同级目录,比如在 /usr/local/src
 
#下载模块
wget -O ngx_pagespeed-release-1.9.32.6-beta.tar.gz https://codeload.github.com/pagespeed/ngx_pagespeed/tar.gz/release-1.9.32.6-beta
 
#解压
tar zxvf  ngx_pagespeed-release-1.9.32.6-beta.tar.gz
 
#下载psol优化库
cd ngx_pagespeed-release-1.9.32.6-beta
wget https://dl.google.com/dl/page-speed/psol/1.9.32.6.tar.gz
 
#解压psol
tar zxvf 1.9.32.6.tar.gz
 
#查看现有nginx的编译参数
/usr/local/nginx/sbin/nginx -V
 
#重新编译nginx,新增pagespeed模块
cd /usr/local/src/nginx-1.60
./configure  --add-module=../ngx_pagespeed-release-1.9.32.6-beta 后面接上上一步查询到的参数
 
#再往后make 和 make upgrade 就不多说了,之前博客都已经分享过了

修改配置

编辑网站的nginx配置文件,比如 saunix.cn.conf,在server模块里面加入如下代码:

#如果不知道加到哪,可以加入到 root /home/wwwroot/yourdomain.com; 的后面即可
# 启用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/*";

然后,新增缓存文件夹:

mkdir p /tmp/cache/ngx_pagespeed_cache

最后,重启Nginx即可生效(实测发现这个模块的修改必须重启nginx,reload是无效的…),

测试效果

①、看源码

好了,重启Nginx后,咱们刷新一下前台,随便搜索下 pagespeed,可以发现源码大部分都已经被替换了:

转篇Nginx服务器开启pagespeed加速效果 - 第1张  | 大话运维

如图,绝大部分js、css的url都变了,被合并成了一个url。

体积小点的图片,比如表情,被转成了浏览器编码的形式,算是减少服务器请求的一种优化:

转篇Nginx服务器开启pagespeed加速效果 - 第2张  | 大话运维

看起来优化后,html代码变多了很多,于是下载看了下:

转篇Nginx服务器开启pagespeed加速效果 - 第3张  | 大话运维

果然, 同一个页面开启后,大了20多k!尼玛,要是其他地方没有大的改善,这绝逼有点吓人了,于是继续看看。

②、看图片

接着,看了下文章缩略图,发现还能压缩图片体积:

比如未启用pagespeed之前的图片大小【图片地址】:

转篇Nginx服务器开启pagespeed加速效果 - 第4张  | 大话运维

开启后:【图片地址

转篇Nginx服务器开启pagespeed加速效果 - 第5张  | 大话运维

尼玛,十多倍的差异,让我有点不信邪。于是下载到电脑看下:

转篇Nginx服务器开启pagespeed加速效果 - 第6张  | 大话运维

这下差异确实小了点,大概2倍多。但是,后者本是WebP格式,也就是谷歌(google)开发的一种旨在加快图片加载速度的图片格式。我下载到本地后会自动转成了jpge格式,体积肯定是有所变化!总的来说,这压缩效果真的很明显!不过经过我多次验证,发现并非所有图片都有这个效果,估计和原本图片的压缩程度有关系。

③、工具测

光靠肉眼,有点无力。pagespeed 主要用来加快浏览器的渲染加载,所以我决定用下阿里测分析下加速前后的区别。

优化前的测试报告:

转篇Nginx服务器开启pagespeed加速效果 - 第7张  | 大话运维

报告地址http://www.alibench.com/rp/f9a4c1a8ddd267e0897613501dd2b422

优化后的测试报告:

转篇Nginx服务器开启pagespeed加速效果 - 第8张  | 大话运维

报告地址http://www.alibench.com/rp/17778d646ca7133609cc348b77096f37

点开一下加载详情对比了下:

优化前:

转篇Nginx服务器开启pagespeed加速效果 - 第9张  | 大话运维

优化后:

转篇Nginx服务器开启pagespeed加速效果 - 第10张  | 大话运维

效果还是很明显的,感兴趣的可以自己点开报告地址,查看更详细的对比!当然也推荐喜欢折腾的朋友尝试一下开启 Nginx 服务器 pagespeed加速!如果是 Apache 服务器,可以集成 mod_pagespeed,感兴趣的自己去找资料折腾吧!

最新补充:张戈博客体验了几天,发现一个问题:启用这玩意之后,CPU占用会比较高,Nginx 经常100%,虽然存在静态缓存,但是网站后台偶尔会比较卡,暂时已取消这个功能。所以对于使用单核CPU的云服务器就不建议折腾这个玩意了。

最后编辑:
作者:saunix
大型互联网公司linux系统运维攻城狮,专门担当消防员

留下一个回复