https://www.cnblogs.com/strick/p/6677836.html

网站性能优化工具大致分为两类:综合类和RUM类(实时监控用户类),WebPageTest属于综合类。

WebPageTest通过布置一些特定的场景进行测试,例如不同的网速、浏览器、位置等。

测试完成后,能获得优化等级、性能参数、请求瀑布图、网页幻灯片快照等,更多信息可以参考《WebPageTest快速入门》。

一、总览

输入网址后,首先进入视野中的就是下面这张画面。

1)原理

根据WebPageTest的《概述》了解到,WebPageTest是一个PHP网站,用户输入网址、地点、自定义脚本等信息后,参数发送到后台。

后台做些逻辑处理,再通过浏览器相关的代理程序,启动Chrome、Firefox或IE,浏览器执行完后。

将数据传回给后台,后台再将数据保存起来,最后通过各种形式(图、表格、列等),将分析数据过的数据,呈现给用户。

2)视觉进展

WebPageTest会测量视觉进展,也就是展示每个时间显示多少百分比的页面,一些数据测量就是根据这个来的,具体可以参考《Speed Index》。

有两种测量方法:

1. 先将页面显示的过程捕获,保存成多张图片,再通过图片分析工具将每个像素与最终图像比较,算出百分比,不过页面每个像素移动都会改变比对结果

2. 现在有新的方法,使用绘画事件的可视进展,不过需要Webkit内核的浏览器才支持。

3)扩展

WebPageTest还支持扩展开发,只要申请到一个key后,就可以根据提供的API做开发。

不过调用次数都会有限制,所以如果要做还是在自己本地或内网布置一个WebPageTest的环境。

后面我会专门写几篇布置环境的文章,WebPageTest在windows中布置起来简单一点。

4)导航栏

1. TEST RESULT:能看到最新的一个测试。

2. TEST HISTORY:能查看到测试历史记录。

3. FORUMS:论坛信息,里面有许多提问和回答,覆盖面非常广,下图是论坛的首页。

4. DOCUMENTATION:工具文档,英文版,并且挂在google域名下,自己翻译了一下,挂在了github上

5. ABOUT:给出了WebPageTest的Github地址,以及发布版的下载地址等信息。

二、普通配置

1)Test Location和Browser

配置测试地址,美帝、欧洲、亚洲、非洲、美洲,各个地方都有服务器,不过还是选择一个近点的比较好,可以选香港或扬州。

点击Select from Map,弹出的是google地图,你懂得,不做点措施是显示不了的。

不同地点,可以选择的Browser(浏览器)将不同,例如香港服务器可以选择Chrome、Firefox和IE11,扬州就不支持IE11。

三、高级配置(Advanced Settings)

1)Test Settings

Connection:网速(Connection)有光纤(Cable)、DSL或者自定义。RTT(Round Trip Time):一个数据包从发出去到回来的时间。

自定义设置中可以设置:下行带宽(BW Down),上行带宽(BW Up),延迟(Latency),丢包率(Packet Loss)。

Repeat View:选择“First View and Repeat View”后,就启动重复视图,每次测试有两个视图,第二个的时候,就可以模拟有缓存的情况。

2)Advanced

高级设置中的高级设置,可以修改访问代理信息、自定义头信息,能够模拟更多实际的情况。

3)Chrome

针对Chrome浏览器的设置,可以调用浏览器中的模拟器、捕获开发工具时间轴。

4)Auth

HTTP基本授权,输入用户名和密码后,这些信息经过base64编码,以HTTP请求首部的形式发送。

这种技术称为HTTP基本验证(HBA),使用这种方式,需要服务器支持HBA,所以这并不是一个稳妥的方法。

授权的请求首部信息类似于下面:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

5)Script

自定义脚本,网站文档《脚本》中有更多设置,非常强大,不过根据浏览器不同,能使用的脚本参数也会不同。

6)Block

请求阻塞,多个关键字可用空格分割,如果请求的URL中与输入的关键词匹配,那么请求将被阻塞。

与下面的SPOF最大的区别是不会发生请求超时,因为这个请求根本没有创建。

这个测试的目的就是简单的评估资源缺失对页面造成的影响。

7)SPOF

单点故障,只需将要限制的域名写在输入框中即可,一个域名一行。

目的就是请求超时,对网站的影响,这是一种非常简便的检测第三方托管资源有效性的方法。

8)Custom

设置自定义指标,网站文档《自定义指标》有详细说明。

设置完成后可以在“detail -》Custom Metrics”中查看到,有个测试案例可以查看。

QQ交流群:156140744

[转帖]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. web性能优化——浏览器相关

    简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...

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

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

  8. web性能优化 来自《web全栈工程师的自我修养》

    最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...

  9. Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  10. Web 性能优化:21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

随机推荐

  1. 在线编辑Word——插入内容控件

    内容控件是可添加和自定义的以在模板.窗体和文档中使用的单个控件.Word中支持添加多种类型的控件用于不同文档的设计需求.本文,将通过在线编辑的方式展示如何在Word中插入内容控件,这里使用的在线编辑器 ...

  2. 鸿蒙开发丨设备内UIAbility的几种交互方式

    本文分享自华为云社区<设备内UIAbility交互:无缝体验与高级技巧>,作者: 柠檬味拥抱. UIAbility组件间交互(设备内) 在设备内,UIAbility(用户界面能力)是系统调 ...

  3. MyBatis中SQL语句优化小结

    摘要:MyBatis 作为一款优秀的持久层框架,它支持自定义SQL.存储过程以及高级映射. MyBatis 作为一款优秀的持久层框架,它支持自定义SQL.存储过程以及高级映射.它免除了几乎所有的 JD ...

  4. 想了解Python中的super 函数么

    摘要:经常有朋友问,学 Python 面向对象时,翻阅别人代码,会发现一个 super() 函数,那这个函数的作用到底是什么? 本文分享自华为云社区<Python 中的 super 函数怎么学, ...

  5. 二进制SCA指纹提取黑科技:Go语言逆向技术

    摘要:SCA(Software Composition Analysis)软件成分分析,指通过对软件源码.二进制软件包等的静态分析,挖掘其所存在的开源合规.已知漏洞等安全合规风险,是一种业界常见的安全 ...

  6. GaussDB(for Redis)新特性发布:前缀搜索千倍提升与集群版多租隔离

    摘要:GaussDB(for Redis)推出的全新特性,实现集群版多租隔离功能和增强版前缀搜索,前缀搜索时延较开源Redis降低千倍,为助力企业业务发展带来了更多可能. 近期,华为云GaussDB( ...

  7. 鸿蒙轻内核源码分析:Newlib C

    摘要:本文介绍了LiteOS-M内核Newlib C的实现,特别是文件系统和内存分配释放部分,最后介绍了Newlib钩子函数. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列二十 Newlib ...

  8. 9月活动回顾(免费领取PPT)|火山引擎DataLeap、ByteHouse多位专家带来DataOps、实时计算等前沿技术分享!

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   在上月举行的火山引擎开发者社区 Meetup 第12期暨超话数据专场<数智化转型背景下的火山引擎大数据技 ...

  9. 新变化新营销 这些知识点你得 Get!(文末有 PPT 福利首次放送)

      更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在刚刚结束的第 7 期火山引擎数智平台 VeDI「增长课堂」上,火山引擎数智平台 VeDI 零售行业解决方案. ...

  10. 限时促销,火山引擎 ByteHouse 为企业带来一波数智升级福利!

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 面对庞杂的海量数据,稳定高速的实时数据处理能力,成为了当下企业数智升级过程中备受关注的点. ByteHouse 是 ...