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(二)——性能数据的更多相关文章

  1. Web性能优化工具WebPageTest(一)——总览与配置

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

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

    在前一篇<配置>完成后,点击“START TEST”,就可以开始测试,测试需要一段时间. 有时候可能还要排队,如下图所示,测试完成后可查看到测试结果. 一.Summary 1)优化等级 优 ...

  3. Web性能优化工具WebPageTest(三)——本地部署(Windows 7版本)

    这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...

  4. web开发者性能优化工具(一)

    web开发者性能优化工具 1   数据包嗅探器(在性能优化时,查看页面(包括页面中全部资源)的加载过程) HttpWatch (http://www.httpwatch.com/) 把网络流量用图形的 ...

  5. PHP性能优化工具–xhprof安装

    PHP性能优化工具–xhprof安装,这里我先贴出大致的步骤: 1.获取xhprof 2.编译前预处理 3.编译安装 4.配置php.ini 5.查看运行结果 那么下面我们开始安装xhprof工具吧: ...

  6. PLSQL_性能优化工具系列10_Automatic Database Diagnostic Monitor - ADDM

    2014-09-06 Created By BaoXinjian

  7. Linux/Android 性能优化工具 perf

    /***************************************************************************** * Linux/Android 性能优化工 ...

  8. ASP.NET MVC性能优化工具 MiniProfiler

    ASP.NET MVC性能优化工具 MiniProfiler 2014年04月19日 ⁄ ASP.NET ⁄ 共 1159字 ⁄ 字号 小 中 大 ⁄ 暂无评论 ⁄ 阅读 325 views 次 MV ...

  9. SQL Server性能优化工具Profiler

    SQL Server Profiler是什么 SQL Server Profiler是一个界面,用于创建和管理跟踪并分析和重播跟踪结果. 这些事件保存在一个跟踪文件中,稍后试图诊断问题时,可以对该文件 ...

  10. Android性能优化典范(二)

    Google前几天刚发布了Android性能优化典范第2季的课程,一共20个短视频,包括的内容大致有:电量优化,网络优化,Wear上如何做优化,使用对象池来提高效率,LRU Cache,Bitmap的 ...

随机推荐

  1. Langchain-Chatchat项目:1.1-ChatGLM2项目整体介绍

      ChatGLM2-6B是开源中英双语对话模型ChatGLM-6B的第2代版本,引入新的特性包括更长的上下文(基于FlashAttention技术,将基座模型的上下文长度由ChatGLM-6B的2K ...

  2. C++篇:第十四章_编程_知识点大全

    C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 十四.编程 (一)概念 系统函数及其库是 C++语言所必须的,预处理命令不是 C ...

  3. Python图像处理丨两种实现图像形态学转化运算

    摘要:本篇文章主要讲解Python调用OpenCV实现图像形态学转化,包括图像顶帽运算和图像黑帽运算. 本文分享自华为云社区<[Python图像处理] 十.形态学之图像顶帽运算和黑帽运算> ...

  4. 代码混淆工具ipaguard:如何使用ipaguard保护和混淆iOS应用程序代码

    ​ 转载:怎么保护苹果手机移动应用程序ios ipa文件中的代码? 目录 转载:怎么保护苹果手机移动应用程序ios ipa文件中的代码? 代码混淆步骤 1. 选择要混淆保护的ipa文件 2. 选择要混 ...

  5. jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

    本文章总结jQuery实现checkbox三种情况的全选功能 第一种:等值全选,也称name的等值全选,通过checkbox的名称name实现. 第二种:模糊全选,也称id模糊全选,通过checkbo ...

  6. 在低代码开发平台 ILLA Cloud 中使用 Hugging Face 上的模型

    ILLA Cloud 是一个面向开发者的开源低代码开发平台,平台专注于帮助开发者快速建立企业内部应用,为开发者节约数据调用与页面设计的时间.平台具有面向开发者.数据整合.协同开发.灵活部署等功能与特点 ...

  7. ChatGPT带你入门机器学习:逻辑回归模型博客和小红书风格文案一次搞定!

    打脸了 顺手向大家演示一下如何用 ChatGPT 写技术博客吧,其实蛮简单的,特别需要操心的是它会一本正经的胡说八道,还信誓旦旦的.我们要审查它的回答,万不可全信. 为了便于阅读,我把prompt加粗 ...

  8. 【Debug】常用问题排查流程

    常用问题排查流程 查看当前用户信息

  9. JSP | 常见 JSP 简答题

    一.简述 JSP 的工作原理 当我们访问一个JSP页面的时候,这个文件首先会被JSP引擎翻译为一个Java源文件,其实就是一个Servlet,并进行编译,然后像其他Servlet一样,由Servlet ...

  10. AIsing Programming Contest 2020 游记 (ABC水题,D思维)

    补题链接:Here A - Number of Multiples 水题 B - An Odd Problem 水题 C - XYZ Triplets 水题,注意数组不要开小了 D - Anythin ...