Web性能优化工具WebPageTest（二）——性能数据

在前一篇《配置》完成后，点击“START TEST”，就可以开始测试，测试需要一段时间。

有时候可能还要排队，如下图所示，测试完成后可查看到测试结果。

一、Summary

1）优化等级

优化等级分为A~F级别，评分项分别为：

阻塞时间（First Byte Time）、长连接已启动(Keep-alive Enabled)、传输压缩(Compress Transfer)、

压缩图片(Compress Images)、缓存静态内容(Cache Static Content)和使用CDN(Use of CDN)。

在《快速入门》中能看到更多信息。

点击某个评级能看到这个评级具体的评分。

再翻到底部，有评分标准，当你对这个评分有疑惑的时候，可以查阅一下。

例如我使用了CDN，不过这里显示我没使用，是因为我用的CDN没有在网站设定的字典中。

词汇表（Glossary）	适用对象（Applicable Objects）	检查过程（What is checked）
First Byte Time	时间到页面的第一个字节（后端处理+重定向）	目标时间是DNS，套接字和SSL协商所需的时间+ 100ms。 每个超过目标的100ms将扣除单个信件等级。
Keep-Alive	来自为该页面提供多个对象的域的所有对象	响应标头包含一个“keep-alive”指令。
GZIP Text	所有具有mime类型的 “text / *”或“* javascript *”的对象	检查传输编码是否是gzip。
Compress Images	JPEG图片	超过10％的photoshop质量50将通过。 高达50％将会发出警告，任何比这更大的事情都会失败。 总分是通过重新压缩图像可以保存的图像字节的百分比。
Use Progressive JPEGs	所有的JPEG图片	检查每个JPEG图像。 得到的分数是相对于总JPEG字节作为逐行图像的JPEG字节的百分比。
Cache Static	非MIME类型的“text / *”，“* javascript *”或“image / *”的非html对象， Expires头不是0或-1。 cache-control头为"private", "no-store"或"no-cache"。 或者一个 pragma头设置为"no-cache"	存在“Expires”标头（不是0或-1） 或“cache-control：max-age”指令存在并设置一个小时或更长时间。 如果到期日期设定为少于30天，您将收到警告（仅适用于当前最高等级）。
Use A CDN	所有静态非html内容（css，js和图像）	检查它是否托管在已知的CDN上。目前已知CDN的列表在这里。

如有疑问，可以参照原版，如下：

2）高级度量

1. Load Time：

测量的时间是从初始化请求，到开始执行window.onload事件。

2. First Byte：

第一个字节时间（通常缩写为TTFB）被测量为从初始化请求，到服务器响应的第一个字节，被浏览器接收的时间（不包括DNS查询、TCP连接的时间）。

3. Start Render：

通过捕获页面加载的视频，并在浏览器第一次显示除空白页之外的其他内容时查看每个帧来衡量的。

4. Speed Index：

表示页面呈现用户可见内容的速度（越低越好）。具体可以参考《Speed Index》

5. Document Complete Time：

和Load Time相同

6. Fully Loaded Time：

从初始化请求，到Document Complete后，2秒内（中间几百毫秒轮询）没有网络活动的时间，但这2秒是不包括在测量中的，所以会出现两个差值大于或小于2秒。

7. Requests：

浏览器针对页面上的内容（图片，javascript，css等）发出的请求数。

8. Bytes In：

浏览器加载页面下载的数据量。它通常也被称为“页面大小”。

9. First View：

首次进入页面，无相关资源缓存。

10. Repeat View：

再次进入页面，有相关资源缓存，前一篇文章中有介绍这两个的配置。

更详细的细节可以参考《指标》

3）资源瀑布与网页快照

1. 瀑布图（Waterfall）：

包括资源载入和网络连接瀑布图。

2. 网页快照（Screen Shot）：

点击幻灯片试图（Filestrip View）可以查看到各个百分比网页的样子，下面的第五节中有图有说明，还有很多删选功能。

3. 内容分解（Content Breakdown）：

两个饼状图，资源请求类型和字节大小。

二、性能评估（Performance Review）

点击下图导航栏中的“Performance Review”，就能进入此页面。

几个指标就是上面的优化等级，多维度，以表格的方式呈现出来，更直观的观察性能。

三、瀑布图

点击Summary中的瀑布图，就能进入到详情页面，在这里又能看到更多的参数指标。

1）高级度量

与上面Summary页面的高级度量比较，好几个是一样的。下面就描述几个不一样的指标。

1. Visually Complete：

视觉完成时间，也就是WebPageTest捕获到完整页面的时间。

2. RUM First Paint：

实时监控首次页面渲染时间，我理解就是资源瀑布图中的“msFirstPaint”时间，（IE专用属性）是由浏览器本身报告的一个测量，它认为绘制的第一个内容。通常是相当准确，但有时它报告的时候，浏览器只画一个空白屏幕。

3. domInteractive：

这个参数可以点击的，可以查看W3C中的解释，这个时候DOM已经被解析，但是CSS还没被解析。可以参考《Document.readyState》

4. domContentLoaded：

这个时间，用户就可以操作了，也就是上图中“domContentLoadedEventStart~domContentLoadedEventEnd”的这段时间。jQuery中有个“ready”方法，内部使用的就是这个相关的事件。

5. loadEvent：

完成加载load事件，这个时间对应的是“loadEventStart~loadEventEnd”，就是瀑布图中的“On Load”。与上面的“Load Time”有点不同，“Load Time”是触发执行时间。

2）资源瀑布图

1. 里程碑时间：

方框中的就是各个里程点时间。用不同颜色的竖线在图中表示。

2. 资源行：

点击某一行，就能看到详细的请求头、响应头、时间消耗等信息。下图中有些资源会有两种颜色展示，例如“image”有淡紫和深紫，对应时间是下图红色框中的内容。

3. CPU Utilization：

CPU利用率

4. Bandwith in：

带宽

3）网络连接瀑布图

这里展现的其实就是开了几个TCP连接，有传输js的、css的或图片的。TCP的相关信息可以参考《网络协议》

4）HTTP请求参数详情

以表格的形式展现请求细节，并且每一行有三种颜色选择，分别对应三个时间指标。

5）HTTP请求内容

这里展现的内容与瀑布图中选中某一行类似，平铺的方式，可以更容易的做参数对比。

四、内容分解与域名

导航栏中有Content Breakdown和Domains，分别统计了内容和域名。

1）内容分解（Content Breakdown）

内容分解中的饼状图在“Summary”中也有展示。

还分别列了表格，展示不同消息类型的请求数和字节大小。

2）域名（Domains）

从域名的角度描述请求数和字节大小。

五、幻灯片（filmstrip）

在“Summary”中点击“Filmstrip View”，就能进入下图中的页面。

1）滚动条

滑动滚动条，下面还会有根红线对应这个时刻的资源载入情况。

2）过滤条件

包括缩略图大小（Thumbnail Size）、缩略图间隔（Thumbnail Interval）和终结点（Comparsion End Point）。

终结点中有几个参数指标可以选择，可以参考前面的说明。