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)。
终结点中有几个参数指标可以选择,可以参考前面的说明。
Web性能优化工具WebPageTest(二)——性能数据的更多相关文章
- Web性能优化工具WebPageTest(一)——总览与配置
网站性能优化工具大致分为两类:综合类和RUM类(实时监控用户类),WebPageTest属于综合类. WebPageTest通过布置一些特定的场景进行测试,例如不同的网速.浏览器.位置等. 测试完成后 ...
- Web性能优化工具WebPageTest(三)——本地部署(Windows 7版本)
这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...
- web开发者性能优化工具(一)
web开发者性能优化工具 1 数据包嗅探器(在性能优化时,查看页面(包括页面中全部资源)的加载过程) HttpWatch (http://www.httpwatch.com/) 把网络流量用图形的 ...
- Web 性能优化: 使用 Webpack 分离数据的正确方法
摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...
- PHP性能优化工具–xhprof安装
PHP性能优化工具–xhprof安装,这里我先贴出大致的步骤: 1.获取xhprof 2.编译前预处理 3.编译安装 4.配置php.ini 5.查看运行结果 那么下面我们开始安装xhprof工具吧: ...
- PLSQL_性能优化工具系列10_Automatic Database Diagnostic Monitor - ADDM
2014-09-06 Created By BaoXinjian
- Android性能优化典范(二)
Google前几天刚发布了Android性能优化典范第2季的课程,一共20个短视频,包括的内容大致有:电量优化,网络优化,Wear上如何做优化,使用对象池来提高效率,LRU Cache,Bitmap的 ...
- Linux/Android 性能优化工具 perf
/***************************************************************************** * Linux/Android 性能优化工 ...
- ASP.NET MVC性能优化工具 MiniProfiler
ASP.NET MVC性能优化工具 MiniProfiler 2014年04月19日 ⁄ ASP.NET ⁄ 共 1159字 ⁄ 字号 小 中 大 ⁄ 暂无评论 ⁄ 阅读 325 views 次 MV ...
随机推荐
- mfc--使用ShellExecute打开另一个可执行程序
ShellExecute(sFile [, vArguments] [, vDirectory] [, vOperation] [, vShow]) ShellExecute(NULL,"o ...
- [LeetCode] Is Subsequence 题解
前言 这道题的实现方法有很多,包括dp,贪心算法,二分搜索,普通实现等等. 题目 Given a string s and a string t, check if s is subsequence ...
- Java 字节流操作
在java中我们使用输入流来向一个字节序列对象中写入,使用输出流来向输出其内容.C语言中只使用一个File包处理一切文件操作,而在java中却有着60多种流类型,构成了整个流家族.看似庞大的体系结构, ...
- JavaWeb之Filter过滤器
原本计划这一篇来总结JSP,由于JSP的内容比较多,又想着晚上跑跑步减减肥,所以今天先介绍Filter以及它的使用举例,这样的话还有些时间可以锻炼锻炼.言归正传,过滤器从字面理解她的话有拦网.过滤的功 ...
- wx模块小实例
功能介绍: 查询数据库表数据,提取数据并显示 main.py(执行文件) #coding:gbk __author__ = 'Hito' import querySmscode import wx c ...
- 表达式计算 java 后缀表达式
题目: 问题描述 输入一个只包含加减乖除和括号的合法表达式,求表达式的值.其中除表示整除. 输入格式 输入一行,包含一个表达式. 输出格式 输出这个表达式的值. 样例输入 1-2+3*(4-5) 样例 ...
- 用Visual Studio Code Debug世界上最好的语言
前言 这阵子因缘巧合接手了一个辣鸡项目,是用世界上最好的拍黄片写的,项目基本是另一个小伙伴在撸码,我就兼职打杂和发布做点运维的工作. 然后昨天项目上了测试版之后,一用起来Error满天飞了.让小伙伴查 ...
- otool是mac自带的工具
找了一晚上otool的安装包,到最后才发现mac自带otool
- 四大组件之一---------activity的知识
activity的生命活动 activity的四种启动模式 Android中以一个任务栈用来管理activity 一个栈的形式进行管理 在清单文件中,通过<activity>标签的andr ...
- 谷歌开源图片压缩算法Guetzli实测体验报告
谷歌大神又出开源新技术啦,这次是对JPEG格式的图片采用全新算法重新编码,输出的图片还是JPEG但是图片大小明显缩小,而质量不但没有损失,甚至还更加优化,速速来体验一把. 一.环境安装 下载谷歌开源软 ...