王佳冬中文博客

最近在研究一些关于web性能的测试工具，发现一款非常实用且非常方便的工具，今天就来推荐给大家，它就是由google开发的Page Speed，最近体验下来感觉还是不错的。

如何安装Page Speed？

Page Speed是一款Firefox插件，同时它隶属于另外一个插件——Firebug（firefox上最常用的开发插件，如果有不知道的话有机会再介绍给大家），也就是说你的Firefox浏览器中必须已经安装了 Firebug才能安装Page Speed。安装环境为Firefox 3.0.4以上，Fireug 1.3.3以上。

如何使用Page Speed？

安装完毕后，在Firefox中点击右下角的Firebug图标启动后，再点击Page Speed选项卡即可。要注意的是，你要对你网站内的某个页面进行性能分析，你必须先把该页面加载完成后才能使用Page Speed。然后点击“Analyze Performance”（性能分析），这时Page Speed会根据web performance best practices （网页性能最佳实践）进行逐项打分。然后根据重要程序和优先级对每项进行排列。（如上图所示）

该工具提出的建议有：

• 避 免使用CSS表达式
• 结 合使用外部的CSS
• 结 合外部的JavaScript
• 推 迟JavaScript的加载
• 启 用gzip压缩
• 利 用浏览器缓存
• 利 用代理缓存
• 减 少JavaScript
• 减 小Cookie大小
• 减 少DNS查找
• 减 少重定向
• 优 化图片
• 优 化样式和脚本的顺序
• 跨 主机名并行下载
• 将 CSS放在文件头部
• 删 除用不到的CSS
• 始 终从一个URL为资源提供服务
• 在 没有Cookie的域里处理静态内容
• 指 定图片尺寸
• 使 用有效率的CSS选择器

如何使用Page Speed评估web性能？

在以上测试后我们就可以得到一份web性能分析报告，其中：

1. 红色感叹号代表高优先级提示，表示这一项严重影响了你的页面性能，你需要优先对其进行性能优化；
2. 橙色三角代表此项提示需要引起你的注意，并进行适当改进；
3. 绿色的对号代表该项规则在你的网站中应用得到，你在修改了前面两部分的提示之后，它们有可能变为绿色的对号；
4. 蓝色消息符号是为你提供了额外的帮助信息，请稍加留意（需要注意的是，如果你的页面中出现了大量的此类符号，可能是因为你在页面加载完成之前就进行了网站性能分析）。
5. 除此之外，还将得到一个总体评分，满分为100分。

有没有评估的标准？

答案是没有，现在针对这个工具的评估标准还没有人去做。不过我最近正在做这样的事情，所以愿意与大家分享一下：

1、    Page Speed Score总体评分必须在80分以上
2、    严重报错不能超过3个，普通报错不能超过5个
3、    不允许出现的报错：Avoid CSS expressions、Combine external CSS、Combine external JavaScript、Enable compression、Minify CSS、Minify HTML
4、    允许出现的报错，但必须及时纠正的：Leverage browser caching、Leverage proxy caching、Minify JavaScript、Minimize request size、Optimize images
5、    允许出现的报错，有时间可以纠正的：Minimize DNS lookups、Minimize redirects 、Optimize the order of styles and scripts、Parallelize downloads across hostnames、Put CSS in the document head、Remove unused CSS