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

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

小编点评

**网站性能优化工具概述** **主要类型:** * 综合类:WebPageTest、Speed Test、Google Lighthouse等 * RUM类:RUM (Real User Monitoring) **WebPageTest** * 综合类工具,使用场景测试网站性能 * 通过布置场景测试,获取性能参数、请求瀑布图等数据 * 支持多种浏览器和设备 **其他工具** * **Speed Test**:测定网站加载速度 * **Google Lighthouse**:分析网站性能,提供性能报告 * **RUM**:实时监控网站性能,包括响应速度、可视化分析等 **普通配置** * **Test Location和Browser配置测试地址**:选择测试地点和浏览器 * **高级配置**:设置代理、头信息、延迟等参数 * **Chrome针对Chrome浏览器的设置**:模拟浏览器、捕获开发工具时间轴 * **AuthHTTP基本授权**:设置用户名和密码 * **Block请求阻塞**:阻塞请求匹配关键词 * **SPOF单点故障**:请求超时,检测第三方托管资源 **其他功能** * Custom设置自定义指标,可查看页面性能 * 提供QQ交流群

正文

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(一)——总览与配置相似的内容:

[转帖]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性能优化工具WebPageTest(二)——性能数据

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

[转帖]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; 如果您的站点流量比较大或