[转帖]Web性能优化工具WebPageTest(二)——性能数据

web,性能,优化,工具,webpagetest,数据 · 浏览次数 : 0

小编点评

**WebPageTest 性能分析** **优化等级:A** **性能评估指标:** | 指标 | 值 | |---|---| | 视ually Complete | 12.5 s | | RUM First Paint | 145 ms | | domInteractive | 25 ms | | loadEvent | 100 ms | | domContentLoaded | 50 ms | | loadTime | 130 ms | | CPU Utilization | 10% | | Bandwith in | 500 kbps | **性能分析:** * **视ually Complete:**页面加载 12.5 秒。 * **RUM First Paint:**页面第一个渲染的时间为 145 ms。 * **domInteractive:**DOM 解析完成后立即响应。 * **loadEvent:**加载页面事件触发的时间为 100 ms。 * **domContentLoaded:**DOM 加载完成的时间为 50 ms。 * **loadTime:**页面加载时间为 130 ms。 * **CPU Utilization:**CPU 利用率不到 10%。 * **Bandwith in:**网络连接瀑布图中的传输量为 500 kbps。 **其他:** * 使用 CDN 的优势没有在分析中显示。 * 缓存静态内容的有效性尚未评估。 * 优化等级 A 表明页面性能优异,页面加载快速且响应性强。

正文

Web性能优化工具WebPageTest(二)——性能数据
https://www.cnblogs.com/strick/p/6681692.html

 

 

在前一篇《配置》完成后,点击“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)。

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

与[转帖]Web性能优化工具WebPageTest(二)——性能数据相似的内容:

[转帖]Web性能优化工具WebPageTest(二)——性能数据

Web性能优化工具WebPageTest(二)——性能数据 https://www.cnblogs.com/strick/p/6681692.html 在前一篇《配置》完成后,点击“START TEST”,就可以开始测试,测试需要一段时间。 有时候可能还要排队,如下图所示,测试完成后可查看到测试结果

[转帖]Web性能优化工具WebPageTest(一)——总览与配置

https://www.cnblogs.com/strick/p/6677836.html 网站性能优化工具大致分为两类:综合类和RUM类(实时监控用户类),WebPageTest属于综合类。 WebPageTest通过布置一些特定的场景进行测试,例如不同的网速、浏览器、位置等。 测试完成后,能获得

[转帖]Web性能优化工具WebPageTest(三)——本地部署(Windows 7版本)

http://www.zlprogram.com/Show/30/30117.shtml 这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本“WebPageTest 3.0”。 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. www:网站PHP代码 也可以参

[转帖]Web技术(四):TLS 握手过程与性能优化(TLS 1.2与TLS 1.3对比)

https://blog.csdn.net/m0_37621078/article/details/106126033?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163451992416780265476402%2522%252C

[转帖]实现 10 倍应用性能提升的 10 个技巧

https://my.oschina.net/u/5246775/blog/5981861 Web 应用性能优化迫在眉睫。线上经济活动份额不断增长,发达世界的互联网经济已占经济总量的 5% 以上(请参见下文的互联网统计数据来源)。在这个始终在线、超级互联的现代世界,用户的期望已经今非昔比。如果您的网

[转帖]Web技术(六):QUIC 是如何解决TCP 性能瓶颈的?

文章目录 一、QUIC 如何解决TCP的队头阻塞问题?1.1 TCP 为何会有队头阻塞问题1.2 QUIC 如何解决队头阻塞问题1.3 QUIC 没有队头阻塞的多路复用 二、QUIC 如何优化TCP 的连接管理机制?2.1 TCP连接的本质是什么2.2 QUIC 如何减少TCP 建立连接的开销2.3

[转帖]Nginx10万+并发 内核优化

由于默认的linux内核参数考虑的是最通用场景,这明显不符合用于支持高并发访问的Web服务器的定义,所以需要修改Linux内核参数,是的Nginx可以拥有更高的性能; 在优化内核时,可以做的事情很多,不过,我们通常会根据业务特点来进行调整,当Nginx作为静态web内容服务器、反向代理或者提供压缩服

[转帖]基于 Nginx 实现 10万+ 并发,Linux 内核优化

来源:http://t.cn/EyQTMwG 由于默认的Linux内核参数考虑的是最通用场景,这明显不符合用于支持高并发访问的Web服务器的定义,所以需要修改Linux内核参数,是的Nginx可以拥有更高的性能; 在优化内核时,可以做的事情很多,不过,我们通常会根据业务特点来进行调整,当Nginx作

[转帖]Nginx性能调优

https://www.jianshu.com/p/024b33d1a1a1/ 本文翻译自Tuning NGINX for Performance Nginx以高性能负载均衡、缓存和web服务器出名,支撑着世界上繁忙网站中的40%。大多数使用场景下,Nginx和Linux系统的默认配置表现较好,但是

[转帖]Nginx服务器性能调优

Worker 相关worker设置比较简单,只需要设置正确的数量。 Worker Processes 如果您的站点流量不大,Nginx,数据库和Web应用程序都运行在同一台服务器上。则在/etc/nginx/nginx.conf中,设置worker_processes 1; 如果您的站点流量比较大或