02-前端性能测试工具-webpagetest入门

目录

1. 运行性能测试

  1.1  测试步骤

2. 结果分析

   2.1 Security score

   2.2 First Byte Time

   2.3 Keep-alive Enabled

   2.4 Compress Transfer

   2.5 Compress lmages 

   2.6 Cache static content 

   2.7 Effective use of CDN

3. 其他性能指标

---

1. 运行性能测试

   地址：https://www.webpagetest.org/

  1.1  测试步骤

• 输入页面URL：要测试的URL地址

• 选择执行地区：WebPagetest的测试机器实际位于世界各地，因此您应该在接近用户访问位置的位置进行测试

• 选择浏览器：使用哪种浏览器进行测试

• 设置网络

• 设置运行次数

• 选择First View and Repeat View：第一次打开和有缓存打开

• 点击START TEST：开始测试

  

2. 结果分析

   2.1 Security score

• 安全得分

   2.2 First Byte Time

• 用户发起页面请求到接收到服务器返回的第一个字节所花费时间

   2.3 Keep-alive Enabled

• 每次请求使用已建立好的链接，属于服务器配置，启用通常可以将页面加载时间减少40％至50％

   2.4 Compress Transfer

• 文本压缩非常好，HTTP提供了一种以压缩形式传输文件的方法。对文本资源启用压缩通常只是服务器配置的更改，而无需对页面本身进行任何更改

   2.5 Compress lmages 

• 图像文件压缩

   2.6 Cache static content 

• 缓存静态内容，静态内容是页面上不经常更改的内容（图像，javascript,css)。可以对其进行配置，以便用户的浏览器将其存储在缓存中

   2.7 Effective use of CDN

• 内容分发网络(CDN)，利用全局负载技术将用户的访问指向距离最近的、正常工作的服务器，由这个缓存服务器直接响应用户请求

 

3. 其他性能指标

 

• First View ：表示该页面的首次访问者将遇到的情况
• First Byte：从用户开始导航到页面到服务器响应的第一位到达的时间。此时间的大部分通常称为“后端时间”，是服务器为用户构建页面所花费的时间
• Start Render：开始渲染时间是在屏幕上显示某些内容的第一个时间点
• Repeat View：重复查看测试代表某人在第一次访问该页面后一段时间后返回该页面时所看到的内容
• Requests：浏览器对页面上的内容（图像，javascript，css等）必须发出的请求数
• Bytes In：浏览器为加载页面而必须下载的数据量。通常也称为“页面大小”
• Load Time：加载时间是指从用户开始导航到页面到文档完成事件（通常是所有页面内容均已加载）之间的时间
• Fully Loaded：“完全加载”标题下归为一组的度量是收集的度量，直到文档完成后2秒钟没有网络活动。这通常包括主页加载后由javascript触发的任何活动
• Document Complete：在“文档完成”标题下分组的度量标准是在浏览器认为页面已加载之前收集的度量标准（对于那些熟悉javascript事件的人来说是onLoad事件）。通常会在所有图像内容均加载后发生，但可能不包括由javascript执行触发的内容