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

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

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执行触发的内容
相关实践学习
通过性能测试PTS对云服务器ECS进行规格选择与性能压测
本文为您介绍如何利用性能测试PTS对云服务器ECS进行规格选择与性能压测。
相关文章
|
1天前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
1天前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
11 0
|
1天前
|
前端开发 JavaScript Java
java测试链接超时返回前端
java测试链接超时返回前端
18 0
|
1天前
|
前端开发 测试技术
前端自动化测试中的快照测试原理
快照测试用于前端自动化测试,通过比较当前应用状态与预存预期快照来检测UI变化。流程包括设置测试环境、捕获屏幕快照、保存预期快照、比较快照及处理差异。当快照比较出现差异时,测试工程师审查判断是否为预期变化或错误,确保应用一致性。这种方法在重构、样式更改和跨浏览器测试时提供有效回归测试,减少手动验证工作。
|
1天前
|
数据采集 监控 前端开发
前端自动化测试
前端自动化测试通过脚本和工具提升开发效率,确保应用在不同环境的品质和一致性。关键方面包括单元测试(如Jest、Mocha)、集成测试(Selenium、Puppeteer)、UI测试、快照测试及持续集成工具(Jenkins、Travis CI)。遵循确定测试范围、编写可维护代码、频繁运行测试和监控结果的最佳实践,可增强代码质量,减少错误。
|
1天前
|
缓存 监控 前端开发
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
【4月更文挑战第30天】本文探讨了Flutter应用的性能调优策略和测试方法。性能调优对提升用户体验、降低能耗和增强稳定性至关重要。优化布局(避免复杂嵌套,使用`const`构造函数)、管理内存、优化动画、实现懒加载和按需加载,以及利用Flutter的性能工具(如DevTools)都是有效的调优手段。性能测试包括基准测试、性能分析、压力测试和电池效率测试。文中还以ListView为例,展示了如何实践这些优化技巧。持续的性能调优是提升Flutter应用质量的关键。
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
|
1天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
1天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
1天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
38 0
|
1天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0