使用PageSpeed进行网站优化

2014年06月05日

最近网站打开速度较慢，服务器带宽经常暴满，虽然从10m提高到15m，依然时常能达到锋值，ping值高达两三百毫秒，PageSpeed Insights得分仅为57。

pagespeed insight测试网址，如果无法访问或者检测出错，请自觉翻墙.

PageSpeed Insights 简介

以下内容摘自：https://developers.google.com/speed/docs/insights/about

Page Speed Insights能针对移动设备和桌面设备衡量网页的性能。该工具会抓取网址两次，一次是通过移动设备用户代理，另一次是通过桌面设备用户代理。

PageSpeed得分范围是从0到100分。分数越高，代表性能越好。85分或更高分表明网页性能良好。请注意，PageSpeed Insights正在不断改进，因此，分数可能会随着我们添加新规则或完善分析而发生变化。

PageSpeed Insights能根据以下内容衡量网页如何提升其性能：

 1.首屏加载时间：从用户请求新页面到浏览器呈现首屏内容所用的时间。

 2.完整的网页加载时间：从用户请求新网页到浏览器完全呈现网页所用的时间。

然而，由于网络连接性能有很大差异，因此，PageSpeed Insights只考虑网页性能中与网络无关的方面：服务器配置、网页的HTML结构及其所用的外部资源（例如，图片、JavaScript和> CSS）。实施这些建议应该能改进网页的相对性能。但网页的绝对性能将仍取决于用户的网络连接。

PageSpeed同时提供浏览器插件和服务器模块。

浏览器插件支持firefox跟chrome浏览器，Firefox插件需要先安装firebug，如果需要显示打分情况请在about:config中将extensions.PageSpeed.show_score改为true
服务器模块支持apache和nginx，安装后会根据Web Performance Best Practices原则进行自动优化。

安装ngx_pagespeed模块

生产环境使用的服务器为 nginx1.4.4，源代码编译安装

原服务器 nginx 编译参数：

configure arguments: --prefix=/usr/local/nginx --with-http_sub_module --with-http_stub_status_module --with-http_geoip_module --with-http_mp4_module --with-http_ssl_module --with-http_realip_module --with-http_flv_module

下载和编译：

cd ~
wget https://github.com/pagespeed/ngx_pagespeed/archive/release-1.7.30.4-beta.zip
unzip release-1.7.30.4-beta.zip
cd ngx_pagespeed-release-1.7.30.4-beta/
wget https://dl.google.com/dl/page-speed/psol/1.7.30.4.tar.gz
tar -xzvf 1.7.30.4.tar.gz # expands to psol/

cd ~
# check http://nginx.org/en/download.html for the latest version
wget http://nginx.org/download/nginx-1.4.4.tar.gz
tar -xvzf nginx-1.4.4.tar.gz
cd nginx-1.4.4/
./configure --add-module=$HOME/ngx_pagespeed-release-1.7.30.4-beta
make
sudo make install

编译参数因人而异：

[root@cpp76 nginx-1.4.4]# ./configure --prefix=/usr/local/nginx --with-http_sub_module --with-http_stub_status_module --with-http_geoip_module --with-http_mp4_module --with-http_ssl_module --with-http_realip_module --with-http_flv_module --add-module=$HOME/ngx_pagespeed-release-1.7.30.4-beta
[root@cpp76 nginx-1.4.4]# mv /usr/sbin/nginx  /usr/sbin/nginx.old
[root@cpp76 nginx-1.4.4]# ln -s /usr/local/nginx/sbin/nginx /usr/sbin/nginx

为立即生效，可使用暴力重启，测试发现，直接使用nginx -s reload并不生效

[root@cpp76 nginx-1.4.4]# pkill -9 nginx 
[root@cpp76 nginx-1.4.4]# nginx

生产机请使用优雅重启，会等待已建立的连接结束，再使用新安装的nginx重启线程

kill -USR2 `cat /usr/local/php/var/run/php-fpm.pid`

附录：

ngx_pagespeed 最新版本为： https://github.com/pagespeed/ngx_pagespeed
如果使用Tengine,可动态加载模块:https://github.com/pagespeed/ngx_pagespeed/wiki/Using-ngx_pagespeed-with-Tengine

ngx_pagespeed 配置

配置详细文档见：
http://ngxpagespeed.com/ngx_pagespeed_example/

我的配置：

 # 启用ngx_pagespeed
 pagespeed on;
 pagespeed FileCachePath /var/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;
 # 嵌入小的外部css文件
 pagespeed EnableFilters inline_css;
 # 嵌入小js
 pagespeed EnableFilters inline_javascript;
 # 移除html注释
 pagespeed EnableFilters remove_comments;
 # 重要的样式优先
 pagespeed EnableFilters prioritize_critical_css;
 #延迟执行js
 pagespeed EnableFilters defer_javascript;
 #css移到js前
 pagespeed EnableFilters move_css_above_scripts;

放在http{ }标签内，重启nginx即可，如果遇到冲突,某些地址可禁用ngx_pagespeed,或者禁用某些filter.比如ngx_pagespeed开启defer_javascript fileter后会向xml文件加入一段js,可禁用。

 location ~*\.xml$ {
         pagespeed off;
 }

ngx_pagespeed加速原理

在nginx中通过自定义的filter 修改网页资源来实现网站最佳实践，达到降低网页延迟和减少带宽占用的目的。

一些filter改变html结构，如压缩精简html,调整css与js位置
还有一些改变CSS, JavaScript, 如合并css和js文件，内嵌css
动态优化图片，自动生成无损和压缩的图片，通过脚本延迟加载图片
缓存控制，ngx_pagespeed 处理后的图片缓存时间为一年。

ngx_pagespeed既可部署在独立服务器，也可部署到主机服务提供商，或者CDN主机上，提高站点性能、降低延迟和带宽占用。

优化前后对比：

page speed insights:
网站速度诊断 :
带宽占用:

红线为优化后的带宽

总的来说作用还是比较理想的

关于最佳实践

除了安装服务器模块外，其实还修改了部分模板，虽然有些做法需要符合最佳实践原则，像要把js要放在页脚，但因某些页面冲突，比如把jquery.js的加载放在页脚时，有些页面内嵌的js会使用到jquery 选择器，这时如果jquery.js放页脚就会出错。当然也可以重构页面，不可一概而论，还是切合实际量力而行吧。

琴心剑胆

Life is painting a picture, not doing a sum.