前端性能测试工具

2023-11-11

WebPagetest,是前端性能测试的利器:

可以为我们提供全方位的量化指标,包括页面的加载时间、首字节时间、渲染开始时间、最早页面可交互时间、页面中各种资源的字节数、后端请求数量等一系列数据;还可以自动给出被测页面性能优化水平的评价指标,告诉我们哪些部分的性能已经做过优化处理了,哪些部分还需要改进;同时,还能提供 Filmstrip 视图、Waterfall 视图、Connection 视图、Request 详情视图和页面加载视频慢动作。

First Byte Time,指的是用户发起页面请求到接收到服务器返回的第一个字节所花费的时间。这个指标反映了后端服务器处理请求、构建页面,并且通过网络返回所花费的时间。

Keep-alive Enabled 就是,要求每次请求使用已经建立好的链接。它属于服务器上的配置,不需要对页面本身进行任何更改,启用了 Keep-alive 通常可以将加载页面的时间减少 40%~50%,页面的请求数越多,能够节省的时间就越多。

Compress Transfer如果将页面上的各种文本类的资源,比如 Html、JavaScript、CSS 等,进行压缩传输,将会减少网络传输的数据量,同时由于 JavaScript 和 CSS 都是页面上最先被加载的部分,所以减小这部分的数据量会加快页面的加载速度,同时也能缩短 First Byte Time。为文本资源启用压缩通常也是服务器配置更改,无需对页面本身进行任何更改。

Compress Images为了减少需要网络传输的数据量,图像文件也需要进行压缩处理。

Cache Static Content一般情况下,页面上的静态资源不会经常变化,所以如果你的浏览器可以缓存这些资源,那么当重复访问这些页面时,就可以从缓存中直接使用已有的副本,而不需要每次向 Web 服务器请求资源。这种做法,可以显著提高重复访问页面的性能,并减少 Web 服务器的负载。

Effective use of CDN。CDN 是内容分发网络的缩写,其基本原理是采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区的网络供应商机房内,当用户访问网站时,利用全局负载技术将用户的访问指向距离最近的、工作正常的缓存服务器上,由缓存服务器直接响应用户请求。

Start Render,指的是浏览器开始渲染的时间,从用户角度看就是在页面上看到第一个内容的时间。该时间决定了用户对页面加载快慢的的第一直观印象,这个时间越短用户会感觉页面速度越快,这样用户也会有耐心去等待其他内容的展现。如果这个时间过长,则用户会在长时间内面对一个空白页面后,失去耐心。理论上讲,Start Render 时间主要由三部分组成,分别是“发起请求到服务器返回第一个字节的时间(也就是 First Byte 时间)”“从服务器加载 HTML 文档的时间”,以及“HTML 文档头部解析完成所需要的时间”,因此影响 Start Render 时间的因素就包括服务器响应时间、网络传输时间、HTML 文档的大小以及 HTML 头中的资源使用情况。最好不要大于3秒。

First Interactive,可以简单地理解为最早的页面可交互时间。页面中可交互的内容,包括很多种类,比如点击一个链接、点击一个按钮都属于页面可交互的范畴。First Interactive 时间的长短对用户体验的影响十分重要,决定着用户对页面功能的使用,这个值越短越好这个值最好不要大于 5 s

Speed Index 是通过微积分定义的,影响网页性能体验的一个重要指标是页面打开时间。打开时间越短,其体验越好

WebPagetest 实际使用中需要解决的问题

1)搭建自己的私有 WebPagetest 以及相关的测试发起机

2)CICD流水线集成 就必须引入 WebPagetest API  Wrapper。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端性能测试工具 的相关文章

  • 对java中的List进行深拷贝,并进行删除测试

    List
  • 【ssh】xshell的替代--WindTerm

    目录 WindTerm WindTerm 简介 如何关闭锁屏密码 3 功能 3 1 选中自动复制 右键粘贴复制的内容 3 2 打开软件自动连接 3 4 设置文件下载初始目录 4 可直接编辑bash命令行 5 界面管理 资源管理器 文件管理器
  • Bicubic Interpolation (双三次插值)

    在Wikipedia http en wikipedia org wiki Bicubic interpolation 上找到了bicubic的描述 不过它只给出了知道导数情况下的公式 后来在CSDN上找到了C语言的算法描述 http to
  • 性能测试与压力测试

    一 性能测试指软件运行的各方面指标 百度百科定义 性能测试 是通过自动化的测试工具模拟多种正常 峰值以及异常负载条件来对系统的各项性能指标进行测试 多用户并发性能测试 负载测试 强度测试 容量测试是性能测试领域里的几个方面 其实压力测试也属
  • 使用缺省的拷贝构造函数带来的危险性

    我此前另外一篇文章通过类String看拷贝构造函数 赋值函数的作用和区别 对于更深的拷贝构造函数讨论大家可以参见这篇帖子 C 类对象的复制 拷贝构造函数 通过编写类String的拷贝构造函数和赋值函数介绍了一些拷贝构造数 本文着重介绍拷贝构
  • Javescribt Library Javescript 库 总结

    Yahoo User Interface Library YUI Library YUI is a free open source JavaScript and CSS library for building richly intera
  • Linux性能监控 -- vmstat命令

    文章目录 示例 字段说明 示例 输入vmstat命令后 第一个参数表示每1秒获取一次服务器资源 第二个参数表示总共获取10次 若第二个参数不设置 则表示持续获取服务器资源 字段说明 数据项 含义 r 表示有多少任务需要CPU执行 通常与后5
  • MCS-51 汇编指令集(J开头的指令)

    MCS 51系列单片机指令以J开头的指令有8条 分别为 JB bit rel JBC bit rel JC rel JMP A DPTR JNB bit rel JNC rel JNZ rel JZ rel 1 JB bit rel 指令名
  • Firefox 或将强制启用 HTTPS 链接

    Mozilla 在最新上线的 Firefox 76 Nightly 版本中引入可选的 HTTPS only 模式 该模式仅允许连接到 HTTPS 站点 如果一切进行顺利的话 Firefox 接下来可能会在稳定版中面向所有用户推出该项功能 H
  • 可连接点对象及示例(二)

    转载请标明是引用于 http blog csdn net chenyujing1234 例子代码 包括客户端与服务端 http www rayfile com zh cn files de82908f 7309 11e1 9db1 0015
  • 优秀软件测试工程师必备的8个能力!-(附思维导图)

    结合自己以往的工作经验 自己梳理出来一些材料 绝对原创 绝对干货 优秀的软件测试工程师必备的 8个能力 作为一名软件工程师 需要的能力并不多 但是要成为一名优秀的软件测试工程师 需要的能力就比较多了 自己整理出来8个方面 每个方面都会分成很
  • 关于时间的最小单位

    关于时间的最小单位 以前很少研究过这个问题 一次业务上的需求 要求计算的性能要求很高 添加 读取 更新数据的效率都要是毫秒以下 为了测试 不得不在代码中通过前后添加类似这样的语句来调试 long start System currentTi
  • 接口测试总结

    第一部分 主要从问题出发 引入接口测试的相关内容并与前端测试进行简单对比 总结两者之前的区别与联系 但该部分只交代了怎么做和如何做 并没有解释为什么要做 第二部分 主要介绍为什么要做接口测试 并简单总结接口持续集成和接口质量评估相关内容 第
  • hdu2030 汉字统计

    hdu2030 汉字统计 Time Limit 2000 1000 MS Java Others Memory Limit 65536 32768 K Java Others Total Submission s 4080 Accepted
  • 学习笔记Controller

    转自 http elim iteye com blog 1753271 谢谢博主分享 SpringMVC Controller 介绍 一 简介 在SpringMVC 中 控制器Controller 负责处理由DispatcherServle
  • 漫谈软件测试工程师与mercury认证

    漫谈软件测试工程师与mercury认证 出自无忧网 作者 叶赫华 sinckyzhang hotmail com 自从本人从事软件测试培训以来 接触了太多的软件测试工程师 发觉从业者多数存在以下现象 刚刚毕业 踏入IT行业 不懂开发或开发经
  • Python开发环境Wing IDE如何查看调试数据

    Wing IDE具有一个十分有用的特性 就是处理复杂bug的时候可以以各种各样的方式查看调试数据值 这个功能具体是由Watch工具实现的 查看数据值 在PrintAsHTML中发生异常时 右键单击Stack Data工具中的本地数值 这将显
  • HeadFirst 设计模式学习笔记10——MVC分析

    1 M V C Model View Controller 模式 视图 控制器 这是一种范型 模型对象正是应用系统存在的理由 你设计的对象 包含了数据 逻辑和其他在你的应用领域创建定制的类 视图通常是控件 用来显示和编辑 控制器位于二者中间
  • loadrunner入门教程(1)--概述

    文章目录 1 loadrunner介绍 2 特性 2 1 轻松创建虚拟用户 2 2 创建真实的负载 2 3 定位性能问题 3 工作原理 3 1 VuGen发生器 3 2 控制器 Controller 3 3 分析器 Analysis 4 工
  • ASTM D6147测定压缩情况下硫化橡胶和热塑弹性体作用力衰减 (应力松弛) 的标准试验方法

    标准名称 ASTM D6147 Standard Test Method for Vulcanized Rubber and Thermoplastic Elastomer Determination of Force Decay Stre

随机推荐

  • 面试必备—MySQL中数据查询语句

    一 基本概念 查询语句 基本语句 1 select from 表名 可查询表中全部数据 2 select 字段名 from 表名 可查询表中指定字段的数据 3 select distinct 字段名 from 表名 可对表中数据进行去重查询
  • 使用XStream实现Java对象与XML互相转换(不断更新中)

    添加pom依赖
  • 学习周报-2023-0210

    文章目录 一 在SUSE11sp3系统中将openssh从6升级到8 一 需求 二 系统环境 三 部署流程 1 上传编译安装的软件包 2 安装 gcc编译软件 3 安装依赖zlib 4 安装依赖openssl 5 安装openssh 二 在
  • 华为OD机试真题- 战场索敌-2023年OD统一考试(B卷)

    题目描述 有一个大小是NxM的战场地图 被墙壁 分隔成大小不同的区域 上下左右四个方向相邻的空地 属于同一个区域 只有空地上可能存在敌人 E 请求出地图上总共有多少区域里的敌人数小于K 输入描述 第一行输入为N M K N表示地图的行数 M
  • 8-js高级-2

    JavaScript 进阶 2 了解面向对象编程的基础概念及构造函数的作用 体会 JavaScript 一切皆对象的语言特征 掌握常见的对象属性和方法的使用 深入对象 内置构造函数 综合案例 深入对象 了解面向对象的基础概念 能够利用构造函
  • TesseractEngine

    URL http download csdn net download fuxuan928 4068683 GOOGLE https code google com p tesseractdotnet 下面识别OCR验证码用 NET来实现
  • 使用Python爬虫定制化开发自己需要的数据集

    在数据驱动的时代 获取准确 丰富的数据对于许多项目和业务至关重要 本文将介绍如何使用Python爬虫进行定制化开发 以满足个性化的数据需求 帮助你构建自己需要的数据集 为数据分析和应用提供有力支持 1 确定数据需求和采集目标 在开始定制化开
  • QT学习—五种直接连接信号槽的连接方式

    一 信号与槽机制 特别鸣谢B站大轮明王讲Qt的讲解 大轮明王讲Qt的个人空间 哔哩哔哩 bilibili 信号与槽机制 Signal and Slot 是一种在软件开发中广泛使用的通信机制 主要用于处理事件驱动的程序设计 它是Qt框架中的一
  • 使用 Spot 低成本运行 Job 任务

    作者 代志锋 云果 阿里云技术专家 导读 本节课程有三部分内容 首先阐述 ECI 支持成本优化的几种方式 然后重点介绍 Spot 实例是什么以及如何采用 Spot 实例进行成本优化 最后总结 Spot 实例支持的场景以及注意事项 成本优化
  • 基于JWT token认证机制和基于session认证机制

    基于session认证机制 http协议本身是一种无状态的协议 而这就意味着如果用户通过应用向服务器提供了用户名和密码进行认证 下一次请求时 用户还要再一次进行用户认证 因为根据http协议 服务器并不知道是哪个用户发出的请求 所以 为了识
  • 易语言服务器客户端网络验证,超强网络验证系统附远程服务支持库

    这套网络验证我自己用了好几年 也是在几年前开发的 并且完整开源的源码 如果真 超级列表框 取表项数 0 信息框 先读取要导出的充值卡信息 48 提示 返回 如果真结束 如果真 信息框 是否要导出选列表框中 到文本 超级列表框 取表项数 条数
  • openwrt运行linux软件,OpenWrt运行go程序(交叉编译)-Go语言中文社区

    OpenWrt运行go程序 交叉编译 引言 因项目要求 需要在openwrt系统上运行http服务 由于对openwrt自带的uhttpd服务器及luci不熟悉 所以决定采用go语言来实现http服务 以下是配置go的过程以及踩过的一些坑
  • 【AI人工智能】 iTab浏览器标签页中最强大的AI功能莫过于此了, 你不用真的太可惜了! 最后一步就这样干(3)

    个人主页 极客小俊 作者简介 web开发者 设计师 技术分享博主 希望大家多多支持一下 我们一起进步 如果文章对你有帮助的话 欢迎评论 点赞 收藏 加关注 集成使用AI功能 接着我们打开Chrome浏览器 你就会发现标签页变成了iTab专属
  • Koa-router异步返回ctx.body失效的问题

    情景复现 router put category id ctx next gt const data ctx request body db updateCategoryById ctx params id data then doc gt
  • var' used instead of 'let' or 'const' 解决方案

    点击右下角的Apply 就可以啦
  • Unity2019.3API教程(三)GameObject类

    GameObject类 1 官方定义 class in UnityEngine Inherits from Object Implemented in UnityEngine CoreModule 属于 UnityEngine命名空间下的类
  • 深入理解openwrt架构(一)--安装准备和目录分析

    openwrt 安装准备和目录分析 一 安装准备工作 我选择的是虚拟机上安装ubuntu12 10的linux操作系统 最好是在普通用户下操作 1 安装 linux 上的更新组件 为了支持 openwrt 的安装编译 在 linux 操作系
  • 和AI人工智能快乐玩耍,拿到文心一言内测,试验一下~

    ChatGPT和早先的人工智能概念有什么不同呢 问 ChatGPT和早先的人工智能概念有什么不同呢 ChatGPT ChatGPT使用的是GPT 3 5等先进的人工智能技术 与早先的人工智能概念存在很大的不同 早期的人工智能技术主要还是基于
  • 高速传输线的设计及仿真流程

    电路设计及仿真这方面 真的是非常佩服老外的智慧 老外从电路的绘制到电路仿真建立了一整套的设计流程 其相关的设计和仿真软件也是层出不穷 极大的满足工程师的多样化需求 并提高设计的准确性 从ALTIUM DESIGNER CANDENCE到HF
  • 前端性能测试工具

    WebPagetest 是前端性能测试的利器 可以为我们提供全方位的量化指标 包括页面的加载时间 首字节时间 渲染开始时间 最早页面可交互时间 页面中各种资源的字节数 后端请求数量等一系列数据 还可以自动给出被测页面性能优化水平的评价指标