web页面的性能测试

背景

测试大模型主要web页面的性能

使用工具

通过google自带的lighthouse测试页面的性能

各个参考指标

First Contentful Paint(FCP):测量在用户导航到页面后浏览器呈现第一段 DOM 内容所花费的时间。页面上的图像、非白色<canvas>元素和 SVG 被视为 DOM 内容;不包括 iframe 内的任何内容。

Largest Contentful Paint(LCP):最大内容绘制,可视区域中最大的内容元素呈现在屏幕上的时间,用以估算页面主要内容对用户可见时间。

Total Blocking Time(TBT):测量页面被阻止响应用户输入(例如鼠标点击、屏幕点击或键盘按下)的总时间。

Cumulative Layout Shift(CLS):衡量页面布局的稳定性,即元素的位置在页面加载或渲染过程中是否发生了不期望的变化。

Speed Index(SI):衡量页面加载期间内容以视觉方式显示的速度。

 

FCP

速度

0-1.8S

1.8-3S

中等

>3S

LCP

速度

0-2.5S

2.5-4S

中等

>4S

TBT

速度

0~200ms

200~600ms

中等

>600ms

CLS

优良

0~0.1

优秀

0.1~0.25

中等

>0.25

SI

速度

0-3.4S

3.4~5.8S

中等

>5.8

测试环境

浏览器在无痕模式下

测试工具:选择google浏览器自带的Lighthouse

测试场景

home界面

整体性能74,LCP有点稍微偏低

LCP 3.4S

home/apps

整体性能84

问题分析

home界面的LCP稍微有点偏低

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/400310.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ECMAScript6语法:类

在 ES6 中新增了类的概率&#xff0c;多个具有相同属性和方法的对象就可以抽象为类。类和对象的关系如下&#xff1a; &#xff08;1&#xff09;类抽象了对象的公共部分&#xff0c;它泛指某一大类&#xff08;class&#xff09;。 &#xff08;2&#xff09;对象特指通过类…

Linux:基础IO

目录 1. stdin & stdout & stderr 2. 系统文件I/O 1. 接口介绍 open write read close lseek 2. open函数返回值 3. 文件描述符fd 0 & 1 & 2 文件描述符的分配规则 重回定向 dup2 简易Shell的模拟实现 4. FILE 5. 再谈对文件的理解 1. stdin …

threejs webgl效果 功能特效

雷达效果 ​飘扬的红旗 光柱效果 OD线 下雪 下雨 光墙效果 能源球 烟火效果 threejs烟花效果 光圈效果 threejs 光圈 波动 function initScene() {scene new THREE.Scene();}function initCamera() {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.inne…

深入探索PDF源码解析:从PDF到Excel的数据统计分析找到正文

在数字化时代&#xff0c;数据已成为企业决策和业务运营的关键。PDF文档作为一种广泛使用的文件格式&#xff0c;其中蕴含着大量有价值的信息。然而&#xff0c;PDF文档的结构和格式使得直接对其进行数据提取和分析变得复杂。为了解决这个问题&#xff0c;我们采取了一种创新的…

SQL注入实例(sqli-labs/less-17)

0、初始网页 1、确定闭合字符 注入点在于password框&#xff0c;闭合字符为单引号 2、爆库名 1 and updatexml(1,concat(0x7e,database(),0x7e),1)# 1 and (select 1 from (select count(*),concat((select database()),floor(rand()*2))x from information_schema.tables gr…

经纬恒润亮相第四届焉知汽车年会,功能安全赋能域控

8月初&#xff0c;第四届焉知汽车年会在上海举行。此次年会围绕当下智能电动汽车的热点和焦点&#xff0c;聚焦于智能汽车场景应用、车载通信、激光雷达、智能座舱、功能安全、电驱动系统等多个领域&#xff0c;汇聚了来自OEM、科技公司、零部件供应商、测试认证机构、政府院校…

Spark SQL Catalyst工作流程

我们写的SQL语句&#xff0c;会经过一个优化器 (Catalyst)&#xff0c;转化为 RDD&#xff0c;交给集群执行。 而Catalyst在整个Spark 生态中的地位也是至关重要的。 SQL到RDD中间经过了一个Catalyst&#xff0c;它就是Spark SQL的核心&#xff0c;是针对Spark SQL语句执行过程…

使用pytest+selenium编写网页UI自动化脚本和用例

1 UI自动化测试 UI自动化测试&#xff08;User Interface Automation Testing&#xff09;是一种通过编写脚本或使用自动化测试工具&#xff0c;对界面&#xff08;UI&#xff09;进行自动化测试的方法。原理主要是模拟用户打开客户端或网页的UI界面&#xff0c;自动化执行用户…

kali安装docker

docker 安装 ● 1、更新 kali 下载资料源&#xff1a;apt-get update ● 2、如果出现上面没有数字签名问题&#xff0c;那就是需要下载证书 使用命令&#xff1a; wget archive.kali.org/archive-key.asc #下载证书 apt-key add archive-key.asc #添加证书 ● 3、重新更新一…

redis列表若干记录

2、列表 ziplist ziplist参数 entry结构 entry-data:节点存储的元素prelen&#xff1a;记录前驱节点长度encoding&#xff1a;当前节点编码格式encoding encoding属性 使用多个子节点存储节点元素长度&#xff0c;这种多字节数据存储在计算机内存中或者进行网络传输的时的字节…

redis面试(十六)公平锁释放和排队加锁

锁释放 RedissonFairLock.unlockInnerAsync()方法 这和加锁的逻辑没有太大区别 也就是说在客户端A他释放锁的时候&#xff0c;也会走while true的脚本逻辑&#xff0c;看一下有序集合中的元素的timeout时间如果小于了当前时间&#xff0c;就认为他的那个排队就过期了&#xf…

如何减少 Docker 镜像大小:6 种优化方法

如果您想减少docker镜像的大小&#xff0c;您需要使用构建docker镜像的标准最佳实践。 本博客讨论了您可以快速实施的各种优化技术&#xff0c;以制作最小、最精简的 docker 镜像。我们还将介绍一些用于 Docker 镜像优化的最佳工具。 Docker 作为一种容器引擎&#xff0c;可以…

k8s核心架构分析

k8s核心概念概述 Kubernetes入门&#xff1a;掌握集群核心&#xff0c;释放容器潜能 技术爱好者们&#xff0c;CD集群的核心概念是构建、部署和管理容器化应用的基石。掌握这些概念&#xff0c;不仅助你深入理解技术细节&#xff0c;更能在CD集群中自如操作&#xff0c;无论是…

2 C 语言开发工具选择、 MinGW 的安装与配置、VS Code 的安装与配置、插件推荐

目录 1 开发工具选择 1.1 Visual Studio 1.2 Code::Block 1.3 Clion 1.4 VS Code 1.5 在线编辑工具 2 开发工具安装 2.1 安装 MinGW-w64 2.1.1 MinGW-w64 介绍 2.1.2 解压 MinGW 2.1.3 将 MinGW 添加至环境变量 2.1.4 验证安装 2.2 安装 VS Code 2.2.1 下载安装包…

Avnet ZUBoard 1CG开发板上手—深度学习新选择

Avnet ZUBoard 1CG 开发板上手—深度学习新选择 摘要 本文主要介绍了 Avnet ZUBoard 1CG 开发板的特性、架构、硬件单元等概念&#xff0c;并对如何使用以太网接口和串口连接开发板进行基本介绍&#xff0c;同时辅以两个应用例程演示其功能。 原文链接&#xff1a; FreakSt…

如何编写一个CMakeLists.txt文件(由简到难,较详细)

在Linux系统下&#xff0c;经常使用CMakeLists.txt文件来链接、编译C工程&#xff0c;大部分人clone的代码里都是有CMakeLists.txt文件的&#xff0c;只需要cmake .. 和make就完事了&#xff0c;但在工作中&#xff0c;你必须要有从无到有编写CMakeLists.txt文件的能力。 一、…

【QGroundControl二次开发】十. QT添加GStreamer视频播放同时保存

上一章介绍使用QT播放GStreamer视频流 【QGroundControl二次开发】八. QT实现播放gstreamer视频。 这章介绍如何在原有基础上保存为视频&#xff0c;同时保存为一个个规定大小的小视频。 一. 思想 之前的文章展示了如何在QT中播放GST视频流&#xff0c;这章在原有的基础上增加…

金九银十,软件测试面试题合集(含答案)

前言 前面看到了一些面试题&#xff0c;总感觉会用得到&#xff0c;但是看一遍又记不住&#xff0c;所以我把面试题都整合在一起&#xff0c;都是来自各路大佬的分享&#xff0c;为了方便以后自己需要的时候刷一刷&#xff0c;不用再到处找题&#xff0c;今天把自己整理的这些…

常见的几种用例测试方法

等价类划分法 适用场景&#xff1a;需要有大量的测试数据输入&#xff0c;但是我们实际测试中不可能一一列举进行测试&#xff0c;所以讲数据进行分类&#xff0c;选出具有代表性的数据代表一类数据进行测试。 分类&#xff1a; 有效等价类&#xff1a;满足需求的数据无效等…

普元EOS-新项目不停提示登录信息已过期

1 问题 新创建的EOS精简应用&#xff0c; 项目端口为 28015 启动后&#xff0c;在浏览器输入地址 http://127.0.0.1:28015 。 页面不停提示 “登录信息已过期” 2 解决办法 EOS的项目对Login-Filter的配置错误&#xff0c; EOS的项目在Http安全过滤管理的时候&#xff0c;会…