Web性能优化工具WebPageTest(二)——性能数据

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

在前一篇《配置》完成后,点击“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,如需转载请自行联系原作者




相关文章
|
17天前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
113 17
Selenium:强大的 Web 自动化测试工具
|
25天前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
46 6
Spring Boot 入门:简化 Java Web 开发的强大工具
|
1月前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
64 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
28天前
|
缓存 JSON 监控
如何在项目中保证 Web 组件化的性能
保证 Web 组件化的性能需要从多个方面入手,综合运用各种优化方法和策略。通过持续的优化和改进,能够提高组件化的整体性能,为用户提供更好的体验,同时也有助于提高项目的开发效率和质量。
40 8
|
28天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
34 5
|
1月前
|
中间件 Go API
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
85 1
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
48 3
|
1月前
|
缓存 前端开发 JavaScript
Web应用性能优化策略
Web应用性能优化策略
|
29天前
|
机器学习/深度学习 编解码 JavaScript
探索WebAssembly:加速Web应用性能的神奇引擎
探索WebAssembly:加速Web应用性能的神奇引擎
|
1月前
|
机器学习/深度学习 JavaScript 前端开发
WebAssembly:提升Web应用性能的新技术
WebAssembly:提升Web应用性能的新技术
51 0