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

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

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、渲染、操作系统事件等。

网络事件		描述
	DNS	浏览器查找DNS所需要的时间
	t连接等待	浏览器与网站服务器建立连接（TCP）需要一定的时间。由于浏览器可以打开的连接数目是有限的，如果达到这个限制他必须等其它连接关闭之后才能再重新建立一个新的连接。（更多关于浏览器连接的信息可以参照Parallel downloads across hostnames）。 这个事件显示了浏览器等其它连接完成的时间。
	连接	浏览器和web服务器建立连接。这个事件只有打开新连接时出现，已有连接重新打开使用不包含在内。
	请求发送	浏览器发送的HTTP请求。只显示GET方式的请求。
	已连接	浏览器通过网络等待接收数据。事件随着浏览器TCP连接的结束而结束。
本地事件		描述
	缓存	浏览器成功将内容加入到缓存中。
	可用数据	可用于浏览器呈现的数据。由于web服务器发送大量的数据，如果文件很大那么有可能一个资源会出现多个该事件。
	获取JS	浏览器获取JavaScript。该事件可能会延缓其它事件，如果此种情况出现，将会在其下一行列出。
	运行JS	浏览器执行JavaScript。该事件可能会延缓其它事件，如果此种情况出现，将会在其下一行列出。如果获取JS和运行JS中间有时间间隔，这说明源文件中包括有延时功能的函数。

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

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

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

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

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

本文网址： http://www.dudo.org/article/NewSoftware/using_google_page_speed.htm
转载请注意出处