开发者社区> 技术小胖子> 正文

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)。

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

 




    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/6681692.html,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Sql性能检测工具:Sql server profiler和优化工具:Database Engine Tuning Advisor
原文:Sql性能检测工具:Sql server profiler和优化工具:Database Engine Tuning Advisor 一、工具概要     数据库应用系统性能低下,需要对其进行优化,     如果不知道问题出在哪里,可以使用性能检测工具sql server profiler。
1759 0
三种web性能压力测试工具http_load webbench ab小结
题记:压力和性能测试工具很多,下文讨论的是我觉得比较容易上手,用的比较多的三种http_load下载地址:http://www.acme.com/software/http_load/http_load-12mar2006.tar.gz程序非常小,解压后也不到100K 居家旅行 携带方便 呵呵http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载。
888 0
Kubernetes 1.4:一个DevOps工具管理所有的容器
本文讲的是Kubernetes 1.4:一个DevOps工具管理所有的容器【编者的话】有很多的DevOps工具管理容器,但Kubernetes迅速成为其中的佼佼者。
1666 0
Web业务性能优化技术总结
前言 Web业务的性能优化是一个系统工程,既有深度,又有广度。以下所简称性能均特指Web业务性能。
1513 0
21117
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载