Chrome下的Page Speed使用

Firefox下的PageSpeed

Page Speed原本是Google为Firefox插件Firebug开发的插件，用于评价网页的前端性能以分数的形式进行显示，并且提示如何进行改进。它本身并不是一个网站优化工具，也就是说它并不会为你的网站前端性能做任何工作，它所扮演的角色就是类似网站性能咨询师，可以为你的网站前端性能优化做一些建议工作。

与它类似的是由雅虎公司出口的ySlow工具，这也是一个firebug的插件，功能基本类似，Page Speed继承了google快速开发的优点，版本更新较快。

Page Speed主要依据是前端优化的一些标准，这些标准最被来自Yahoo公司前端部分所总结的前端优化准则。这些理论总结在《高性能网站建设》（High Performance Web Sites），共有14条黄金标则，再后来YUI团队又出了Even Faster Web Sites，就是《高性能网站建设进阶指南：Web开发者性能优化最佳实践》，里面是对影响前端性能更详细的解决方案，前端人员及运维人员推荐一看。 

安装和使用Chrome下的Page Speed

Chrome下的Page Speed尚处于实验室处理，因此安装时需要启用chrome的实验性扩展程序api，输入about:flags，找到实验性扩展程序 API，选择启用，然后点击“立即重新启动”。

然后安装该扩展程序，（点击即安装），Ctrl+Shift+I调出开发人员工具，即可看到PageSpeed作为工具的一个面板了。

 

值得关注的是Chrome下的Page Speed是中文版，站长朋友一般高中辍学较多:)，这个工具真正的替站长朋友省心不少。使用这个工具来查看我当前网站walkingp.com的得分，得到了87分，满分是100分，一般来说85分即为高分。

红色表示需要解决的问题，黄色表示警告，建议解决；绿色表示正常。而我现在站点的位置主要是站外图片资源链接及第三方网站统计造成的。还有就是服务器没有启用Gzip。

另外说一下我现在的主机使用的是香港主机，主机商是易网库，原先是在博客园上看到的广告，经坤坤（博客园大管家）的介绍还可以，使用一下，速度还不错（响应速度在200ms，还可以接受），性价比很高，售后服务也很及时，值得推荐。

YSlow和Page Speed比较

这两个工具都系出名门，值得注意的是，YSlow是前雅虎工程师Steve Souders的作品（开发成员之一），他后来离开雅虎到了Google，加入了Page Speed的开发组，同时他还是Firebug Work Group成员之一。

YSlow有14条衡量标准，而Page Speed共有20条衡量标准，YSlow标准更加学院派一些，比如使用CDN这项，Page Speed并没有加入，可能是google考虑并不是所有网站都像它自己那么强大。YSlow就像是一个规规矩矩的教授，一板一眼地使用专业术语跟你解释影响前端性能的因素。以现在我的站点 walkingp.com为例，其中一个Configure entity tags (ETags)为F（最差），搜索这个互联网上的资料并不是很多，多数人可能就跟我一样对它都是第一次听说，它属于Apache服务器的一个配置，一般PHP程序中需要设置，类似文件的Last_Modified Date，用于比较浏览器缓存中文件与服务器文件，因为一般资源文件，比如ICON、CSS等是不轻易改变的，这样可以将ETags设置大一点，

相对来讲Page Speed操作更加人性化，使用的打分方式对于使用者来说也更加人性化，还有Page Speed会针对一些优化项给出优化过的处理，包括图片压缩、CSS合并、JS合并，比如，针对图片压缩，它会将压缩后的图片同时生成，用户可以直接下载使用，如图：

（Firefox版的Page Speed有这个功能，Chrome下这个功能暂时还没有实现）。

另外针对前端人员，CSS选择器如果写得不合适的话， 它也会给出相应的提示：

Page Speed一个较大的参数是”Minimize DNS lookups”，减少DNS查找，这是因为同域下的资源就不需要浏览器去请求其他站点的数据，这样就减少了浏览器请求——确认——返回——解析的过程了。另外由于浏览器前端连接数的限制，同一站点不能同时并行下载多个文件，因此对于图片、音视频信息建议建立二级域名存放。比如我的域名是walkingp.com，那么建议做法就是把我的图片还有css、js等资源放在img.walkingp.com站点上。

Page Speed会以分数的方式来提示用户，这样以数字的形式对于用户是最容易理解的方式，还记得360当年用分类来吓唬用户吗？当前偶介个小白就被它吓倒了，于是装上了一个又一个“360安全XXX”，现在360上市了，不知道周鸿祎是否还记得当年耍流氓玩古惑仔的岁月？

另外Page Speed也给了一些十分不起眼的优化细节，比如Avoid CSS @Imort，避免使用Import来加载CSS；“Remove query strings from static resources”，静态资源避免?查询参数，等等。

总结起来，Page Speed可操作性较强，功能也较丰富，而YSlow在一些方面则相对专业性更强，可以主要以Page Speed指标为主，YSlow为辅的原则将站点的前端性能提升上来。