WPO基础：再说瀑布图

在之前的文章《关于WPO监测：说说瀑布图》，我们讨论了生成瀑布图的工具，今天我们从WPO基础的角度来说说瀑布图，以及我们能从瀑布图中看到什么。

 

大家介绍一下“时间瀑布图”。

 

访客打开你的网页要花时间，时间将分别耗费在请求服务器数据、读取脚本、读取样式表、图片、文本、载入外部资源、查找DNS以及杂七杂八的各种因素上。我们用“时间瀑布图”来告诉大家打开一个网页需要经过哪些步骤，哪些步骤花费了多少毫秒。有道是“时光如流水”，因为瀑布图的图形是时间，样子呈阶梯下降状，所以被称作时间瀑布。

图6-25：奔驰汽车中文官网首页“时间瀑布图” [引用信息源： http://www.webpagetest.org ]

 

图6-25要旋转90度来看 :-），通过瀑布图，我们可以了解到奔驰汽车首页打开的过程是：

1）  首先定位 http://www.mercedes-benz.com.cn

2） 然后获取一个html文本

3） 然后是css样式表

4） 然后是js脚本

5） 然后是一大堆css，JS文件、图片

6）（中间省略若干行）

7） 接近尾声，经过了一个fls.doubleclick.net的长长的时间条

8）  再是一堆图片和一部分js脚本，完全打开首页

 

我们还能从瀑布图中得到如下信息

a 打开的文件种类包括：.html / .js / .css / .jpg / .png / .gif

b  网页请求的域名数量：mercedes-benz.com.cn， fls.doubleclick.net， daimlerag.122.2o7.net

c  打开网页最耗时操作：

http://fls.doubleclick.net/activityi;src=2586546;type=benzc763;cat=-uvtv906;ord=1;num=4263835435058.474?

这个操作耗时3.1秒，造成这个耗时操作的原因，可能是因为fls.doubleclick.net网络连接不稳定造成的，因为不同时间段访问，这个操作耗费的时间不同。那么这个耗时操作的影响是什么呢？应该从瀑布图上看出来，奔驰首页上部和下部的背景图是排在这个操作后面的，而上下两幅背景图对于网页美观程度还是有一定影响的。也就是说这个网络不稳定因素会影响到部分访客的浏览感受，是一个需要解决的问题。

 

不同的“时间瀑布图”代表的意义不一样。我们看看PayPal中文首页（http://www.paypal.com/c2）的瀑布图，很明显页面很简单，载入的元素也很少。但在载入第一项的时候，却耗费了2.6秒之多。造成这个问题的原因是什么呢？应该和网络慢有关。很可能PayPal中文网页的服务器放在海外。

 

图6-26：PayPal中文首页“时间瀑布图” [生成工具： http://www.webpagetest.org ]

 

PayPal很多年以前已在华展开业务，在香港和上海都有办公室，为什么会吝惜改善当地的服务器和带宽资源呢？如果是基于安全性考虑所以PayPal将所有服务器都放在海外，那么可以将登录后的信息放到海外，而登录前的中文首页可以通过技术手段使用中国地区的网络资源，从而改善访客浏览感受。

上面的两个例子，让大家对瀑布图有一个直观的认识，也提醒我们：瀑布图可以帮你发现网页的很多问题。

 

作者: 谭砚耘@用户体验与可用性设计-科研笔记

版权属于: 谭砚耘 （TOTHETOP至尚国际 ）

版权所有。转载时必须以链接形式注明作者和原始出处

http://www.webusability.cn/wpo-basic-what-is-waterfall-timeline-graphic-1296/

如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠