Google网站性能优化工具Page Speed试用报告

原文地址：http://dudo.org/archives/2009060611295.html

Google近日推出了一款网站性能优化工具：Page Speed（http://code.google.com/speed/page-speed/）。它旨在帮助站长与网站开发者分析网站中存在的性能方面的问题，并有针对性地提出改进意见。Page Speed在功能方面极其类似于Yahoo!的网站性能优化YSlow，不过YSlow要比Page Speed推出早得的多。它们都是基于Firebug的Fireffox插件，使用方法也类似。这里我主要介绍一下Google新推出的Page Speed的使用，对Yslow感兴趣的朋友可以参照我以前的这篇文章《你的网站为什么会慢？——用YSlow为你的网站提速》，同时还有我翻译的Yahoo!的文章Yahoo!网站性能最佳体验的34条黄金守则——内容、JavaScript和CSS、服务器、图片、Coockie与移动应用，相信一定会对你提高网站性能有帮助。

一、Page Speed的安装及使用

Page Speed是一款Firefox插件，同时他依附于别款插件Firebug，也就是说你的Firefox浏览器中必须已经安装了Firebug才能安装Page Speed。安装环境为Firefox 3.0.4以上，Fireug 1.3.3以上。

Page Speed的使用也很简单，在Firefox中点击右下角的Firebug图标启动后，再点击Page Speed选项卡即可。要注意的是，你要对你网站内的某个页面进行性能分析，你必须先把该页面加载完成后才能使用Page Speed，也就是说只有在浏览器左下角出现“Done”或者"完成"之后才可以启用Page Speed进行分析。如果页面中流媒体，可能不会现在“完成”，这种情况要等到流媒体可以播放。

然后点击“Analyze Performance”（性能分析），这时Page Speed会根据web performance best practices （网页性能最佳实践）进行逐项打分。然后根据重要程序和优先级对每项进行排列。

此外，你还可以点击每条建议前面的“加号”展开查看详细的描述，或者直接点击每条规则相看该规则的具体内容，还可以点击“Show Resource”（查看来源）来查看每条建议是针对页面中哪部分内容提出的。

对于分析结果中的符号说明一下：

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

二、活动记录

活动记录是一条页面活动的时间轴，它记录了包括网络事件、JavaScript运行在内的所有浏览器活动。你可以使用它并配合性能分析中的数据进一步对网站性能做出评估。

• 查看页面运行过程中所耗费的时间，以毫秒计算；
• 查看浏览器事件，包括页面加载完成后的事件；
• 区分造成页面响应缓慢的原因，其中包括网络来时、DNS查找、连接建立、JavaScript运行等；
• 获取在特定时间或者事件下才响应的JavaScript事件列表；
• 可以对其它标签或者窗口中打开的页面进行分析；
• 多页面加载时的页面加载顺序；
• 对根据Page Speed优化前后的表现进行对比。

三、理解Page Speed中的事件

页面记录选项卡下是通过时间线来记录各种资源加载到页面所有需要的时间。事件的记录时间间隔为10毫秒，如果事件需要的时间少于10毫秒那么它将用较短的色块来表示。时间线中没有任何颜色的表示，在浏览器事件的运行依赖于其它进程，如DOM和CSS渲染、Flash ActionScript、渲染、操作系统事件等。

此外，Page Speed还包括了对已完成的JavaScript函数的信息搜集功能，当页面中的JS函数一旦运行，PageSpeed就会捕捉到相关信息。不通过对Page Speed进行设置还可以对未触发函数、延时加载函数等进行收集。

下面的图片显示了7800毫秒时已经加载但还未触发的函数列表：

而下面则显示是已经触发运行了的JS函数：

此外Pge Speed还有诸如JavaScript函数控制、浏览器User Agent设置等更高级功能。具体使用大家可以与YSlow对比一下。

相信，用好这两款工具，对于站长和网站开发者来说会有极大的帮助。