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执行触发的内容
相关文章
|
2月前
|
测试技术 开发者 Python
Python单元测试入门:3个核心断言方法,帮你快速定位代码bug
本文介绍Python单元测试基础,详解`unittest`框架中的三大核心断言方法:`assertEqual`验证值相等,`assertTrue`和`assertFalse`判断条件真假。通过实例演示其用法,帮助开发者自动化检测代码逻辑,提升测试效率与可靠性。
315 1
|
4月前
|
人工智能 前端开发 测试技术
如何让AI帮你做前端自动化测试?我们这样落地了
本文介绍了一个基于AI的UI自动化测试框架在专有云质量保障中的工程化实践。
1990 21
如何让AI帮你做前端自动化测试?我们这样落地了
|
4月前
|
Web App开发 JavaScript 测试技术
Playwright 极速入门:1 小时搞定环境搭建与首个测试脚本
本文带你1小时快速入门Playwright,完成环境搭建并编写首个测试脚本。Playwright是微软推出的现代化Web自动化测试工具,支持Chromium、Firefox和WebKit三大浏览器引擎,具备跨平台、多语言(Python/JS/Java/C#)特性。其核心优势包括:智能自动等待机制减少失败率、内置录制工具实时生成脚本、多语言灵活选择,以及真移动端设备模拟能力,显著提升测试效率和可靠性。
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
9月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
668 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
9月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
498 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
784 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
11月前
|
前端开发 JavaScript 测试技术
前端自动化测试
前端自动化测试是通过使用工具和脚本自动执行测试用例的过程,旨在提高测试效率、减少人为错误,并确保Web应用的功能在不同环境和设备上的一致性与稳定性。
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
114 3
|
Java 测试技术 Android开发
探索自动化测试的奥秘:从入门到精通
【10月更文挑战第37天】本文将带你进入自动化测试的世界,从基础知识到实战案例,逐步揭示自动化测试的神秘面纱。我们将一起探讨如何利用代码来简化测试过程,提高效率,并确保软件质量。无论你是初学者还是有经验的开发者,这篇文章都能为你提供有价值的见解和技巧。让我们一起踏上这段探索之旅吧!
下一篇
oss云网关配置