web页面的性能测试

news2024/9/20 8:49:06

背景

测试大模型主要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.coloradmin.cn/o/2038485.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++STL之string类:基本使用及模拟实现

目录 一&#xff0c;前言 为什么要学习string类 C语言中的字符串 C中的字符串 STL(Standard Template Library) 里面的 string 类 二&#xff0c;string类的基本使用 文档的阅读 常见接口的基本使用 1&#xff0c;构造函数(constructor) 2&#xff0c;拷贝构造(copy …

程序员喜欢的7个免费公共API

本文将介绍七个程序员们喜爱的免费公共API&#xff0c;它们覆盖了从天气信息、翻译到数据分析、游戏等多个领域。这些API不仅易于使用&#xff0c;而且功能全面&#xff0c;能够帮助开发者快速实现项目需求&#xff0c;无论是个人学习、小项目开发还是商业应用&#xff0c;都能…

诸葛io孔淼:聚焦区域性银行,新一代自主可控的埋点分析平台

近日&#xff0c;由金科创新社主办的2024金融科技创新发展论坛顺利召开&#xff0c;诸葛智能创始人孔淼受邀出席并发表演讲&#xff0c;他表示&#xff0c;区域性银行需要构建新一代的数智化营销体系&#xff0c;驱动营销效率与经营效能增长。 孔淼指出&#xff0c;中小银行应…

Flink UDF注意幂等性,防止重复调用时出问题

编写Flink UDF 要注意幂等性&#xff0c;尤其不能直接修改入参&#xff01;理论上是一条数据只会执行一次UDF&#xff0c;但是实际执行过程中可能会对一条数据执行多次UDF&#xff0c;引起意想不到的问题。 例如有如下SQL&#xff1a; CREATE VIEW tmp_view AS SELECT a.…

Processing圆圈随鼠标运动

一.案例代码如下&#xff1a; import processing.pdf.*; import java.util.Calendar; boolean savePDF false; float tileCount 20; color circleColor color(0); int circleAlpha 180; int actRandomSeed 0; void setup(){ size(600,600); } void draw(){ if(savePD…

Python(TensorFlow)衍射光学层卷积算法模拟(英伟达GPU)

&#x1f3af;要点 &#x1f3af;衍射光学卷积算法模拟 | &#x1f3af;模拟或数字电子计算之前加入一层光学计算 | &#x1f3af;前馈卷积神经网络计算成像系统对输入图像进行分类 | &#x1f3af;相位掩模利用线性空间不变成像系统执行固有卷积 &#x1f4dc;用例 Python非…

【Unity/网络】Unity和内网穿透的网络测试 —— 以聊天室为例

这两天在做那个CodeMonky的胡闹厨房的案例&#xff0c;一直困扰我的是关于Lobby和Relay的相关网络服务&#xff0c;需要挂加速器并且延迟不低&#xff0c;所以我一直在寻找一些其他替代方案&#xff0c;想起来之前做一个UEC的网络枪战时做过一个内网穿透的方法&#xff0c;所以…

图论------Bellman-Ford算法求单源最短路径的优化

目录 前情回顾&#xff1a; 画图分析&#xff1a; 具体代码&#xff1a; 前情回顾&#xff1a; 大家是否还记得我们之前讲过的Bellman-Ford算法&#xff0c;如果忘记的话可以点击链接去复习一下&#xff1a;图论------贝尔曼-福德&#xff08;Bellman-Ford&#xff09;算法-…

C# NX二次开发-曲线延长和缩短

图示&#xff1a;延长曲线 代码&#xff1a;正值延长负值缩短 var cl workPart.Features.CreateCurvelengthBuilder(null);cl.CurvelengthData.ExtensionMethod NXOpen.GeometricUtilities.ExtensionMethod.Incremental;cl.CurvelengthData.ExtensionSide NXOpen.GeometricU…

C++ 内存布局 - Part1: typeid, typeinfo及单继承

1. typeinfo定义 typeinfo中存储的是关于类型的信息&#xff0c;可以通过typeid操作符获取&#xff0c;对于没有虚函数的场景&#xff0c;typeid返回的是编译器静态类型信息&#xff0c;对于一个基类类型指针&#xff0c;哪怕其真实指向是个派生类&#xff0c;如果没有虚函数&…

求解答matlab,具体问题如下:

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

数据埋点系列 6|数据驱动决策的实际应用:从理论到实践

在前面的系列文章中&#xff0c;我们深入探讨了数据驱动决策的各个方面。现在&#xff0c;是时候将这些知识付诸实践了。本文将通过一个虚构但贴近现实的案例&#xff0c;展示如何在一个组织中实施数据驱动决策&#xff0c;同时我们将讨论在这个过程中可能遇到的挑战和解决方案…

HAProxy 全解析:驾驭网络负载均衡与高可用的强大引擎

一、什么是HAproxy HAProxy是一个免费、开源的高性能TCP/HTTP负载均衡器和代理服务器软件&#xff0c;主要用于实现以下功能 一、负载均衡 多种负载均衡算法支持&#xff1a; 轮询&#xff08;Round Robin&#xff09;&#xff1a;它依次将请求均匀分配到后端的各个服务器。例…

Linux进程--进程的调度和切换

文章目录 一、进程优先级1.优先级的概念2.优先级的实现 二、进程的调度和切换1.Linux的进程调度概念2.进程的切换1.硬件上下文2.Linux调度实现 一、进程优先级 1.优先级的概念 进程要访问某种资源&#xff0c;要进行进程上的排队&#xff0c;来确认享受资源的前后顺序。 在x…

基于phpstudy对cmseasy5.5进行漏洞复现

目录&#xff1a; 漏洞复现的cmseasy5.5百度网盘链接 安装cmseasy&#xff1a; 1.在phpstudy上安装cmseasy 2.设置mysql密码为phpstudy内置mysql的密码并检查安装环境 3.安装后查看mysql内cmseasy是否有内容 获取用户名和密码过程&#xff1a; 1.查看源码发现有个remotelo…

字符串 - 反转字符串 II

541. 反转字符串 II 方法一&#xff1a;模拟&#xff08;reverse方法分开写&#xff09; /*** param {string} s* param {number} k* return {string}*/ var reverseStr function(s, k) {const n s.length;const arr Array.from(s);for (let i 0; i < n; i 2 * k) {re…

uniCloud服务空间选择支付宝云后,使用uni-file-picker扩展组件不回显的bug处理

问题概述 开发uniappunicloud项目&#xff0c;DCloud官方给出了很多好用的扩展组件&#xff0c;其中uni-file-picker图片上传组件非常好用&#xff0c;不用编写代码&#xff0c;即可将本地图片上传到云存储中。 原来云开发一直选择的是阿里云服务空间&#xff0c;官方一直推支…

汇编:基本指令及格式

汇编不区分大小写 寄存器只有名字&#xff0c;没有地址 Nop 栈先初始化 import引用外部函数 export外部可用声明 函数传参&#xff08;默认先使用寄存器R0~R3&#xff09;: 1.四个以内的参数使用 R0~R3 2.超过四个的参数使用栈传递 返回值: 返回值存放在R0中 立即数&…

还不会部署本地AI大模型?LangChat带你快速接入并部署本地大模型

LangChat是Java生态下企业级AIGC项目解决方案&#xff0c;在RBAC权限体系的基础上&#xff0c;集成AIGC大模型功能&#xff0c;帮助企业快速定制知识库、企业机器人。 产品官网&#xff1a;LangChat – LangChat LangChat源码&#xff1a;https://github.com/tycoding/langcha…

【机器学习】神经网络通过梯度下降学习的步骤以及前向传播的详细步骤

引言 神经网络中的梯度下降是一种优化算法&#xff0c;用于训练网络&#xff0c;即调整网络的权重和偏置&#xff0c;以最小化损失函数 文章目录 引言一、神经网络通过梯度下降学习的步骤1.1 初始化网络参数1.2 前向传播&#xff08;Forward Propagation&#xff09;1.3 计算损…