前端性能测试Lighthouse的使用

news2024/12/23 11:36:43

Lighthouse是一个开源项目，提高网页的质量，生成的测试报告会提供优化方案，以来提高网页的性能。重点就是关注优化建议

官方介绍Lighthouse的地址：https://developer.chrome.com/docs/lighthouse/

一、使用方法

1、使用谷歌开发者工具进行测试

打开开发者工具，点击Lighthouse，输入网址进行测试。
在这里插入图片描述

设置：

  • Clear Storage：是否清除缓存，想要模拟用户第一次进入页面就勾选，清除缓存；想要模拟用户非第一次进入页面就不勾选
  • Simulated throttling：模拟限制，勾选之后Lighthouse在测试过程中限制网速与CPU
    网络限速：Latency（延迟）: 150ms；Throughput（上行下行网速）: 1.6Mbps down / 750 Kbps up；Packet loss: none
    CPU限制：4x CPU
    谷歌开发者工具也可设置网络限速
    在这里插入图片描述

模式：

  • navigation：默认的，测试的是当前页面，分类都可选
  • Timespan：用这个模式可以测试一堆操作的性能，不只是一个页面，测试类型只有Performance、Best Practices
  • snapshot：生成页面快照的一种测试模式，测试类型有Performance、Accessibility、Best Practices、SEO

分类：

  • Performance：性能得分，根据测量的结果打分，根据占比计算得到的
  • Accessibility：访问无障碍，目的是用来评估构建一个适用于所有用户的网站
  • Best Practices ：最佳实践，提高代码安全
  • SEO：确保网页遵循了基本的搜索引擎优化建议
  • PWA：渐进式 Web 应用程序

2、用命令行测试

Lighthouse的Git地址：https://github.com/GoogleChrome/lighthouse （有使用的详细介绍）
安装：npm install -g lighthouse
测试：lighthouse

lighthouse https://www.baidu.com/ --output html --output-path ./report1.html --only-categories=performance --preset=desktop --quiet --chrome-flags=“–headless”
–quiet 加上后不打日志
–output html --output-path ./report1.html 指定输出文件的格式并指定文件保存路径
–only-categories 可指定测试测种类：accessibility, best-practices, performance, pwa, seo
–preset=desktop 指定是电脑端还是手机端（web、H5），不指定就是手机端，指定desktop就是电脑端
–chrome-flags=“–headless” 执行的时候不打开谷歌浏览器
可指定只运行整个测评过程的一个或多个特定生命周期，-G只进行资源采集的生命周期，采集被测试站点的相关数据，并将结果以 json 的形式存储到本地，默认是 ./latest-run/ 目录
-A：直接从本地读取页面的临时数据，运行测评和产出结果报告，默认将从 ./latest-run/ 目录读取
-GA：运行整个测评的生命周期，会保存一份测试站点的数据

3、使用PageSpeed Insights网站来运行Lighthouse

网址：https://pagespeed.web.dev/ （要翻墙）
在这里插入图片描述

二、性能指标

1、First Contentful Paint 首次内容绘制 (FCP)：测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，“内容"指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素
2、Largest Contentful Paint 最大内容绘制 (LCP)：根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。
3、Time to Interactive 可交互时间 (TTI)：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间
4、Total Blocking Time 总阻塞时间 (TBT)：测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，每当出现长任务（在主线程上运行超过 50 毫秒的任务）时，主线程都被视作"阻塞状态”，一个页面的总阻塞时间是在 FCP 和 TTI 之间发生的每个长任务的阻塞时间总和（比如有两个长任务持续时间是250ms与90ms，那么TBT= （250 - 50）+ （90 - 50）=240ms）
5、Cumulative Layout Shift 累积布局偏移 (CLS)：测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。布局偏移分数 = 影响分数 * 距离分数，
前一帧和当前帧的所有不稳定元素的可见区域集合（占总可视区域的部分）就是当前帧的影响分数
距离分数指的是任何不稳定元素在一帧中位移的最大距离（水平或垂直）除以可视区域的最大尺寸维度（宽度或高度，以较大者为准）
6、Speed Index 页面加载速度：从页面开始加载到可交互的时间点所需的平均时间（以毫秒为单位）

三、Lighthouse的打分标准

在这里插入图片描述
1、各个分类的打分
在这里插入图片描述
2、性能指标测试标准

  • FCP
    在这里插入图片描述

  • SI
    在这里插入图片描述

  • TBT
    在这里插入图片描述

  • LCP
    在这里插入图片描述

  • CLS
    在这里插入图片描述

  • TTI
    在这里插入图片描述
    3、各指标占比

Lighthouse不同版本占比有点不同
在这里插入图片描述

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

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

相关文章

Redis数据类型-Set

Redis数据类型-Set

一. 概述 首先我们来看看Redis中的Set类型有什么特点。 与List相比&#xff0c;Set集合中的元素不允许重复&#xff0c;一个集合中最多可以对应2^32-1(4294967295)个元素。 Set除了可以执行增删改查的命令之外&#xff0c;还支持交集、并集、差集等的计算。 二. 基本命令 对我们…
阅读更多...
当Python遇上异步编程：实现高效、快速的程序运行！

当Python遇上异步编程：实现高效、快速的程序运行！

前言 同步/异步的概念&#xff1a; 同步是指完成事务的逻辑&#xff0c;先执行第一个事务&#xff0c;如果阻塞了&#xff0c;会一直等待&#xff0c;直到这个事务完成&#xff0c;再执行第二个事务&#xff0c;顺序执行 异步是和同步相对的&#xff0c;异步是指在处理调用这…
阅读更多...
单片机的几种ota内存分区表介绍

单片机的几种ota内存分区表介绍

前言 在做项目时&#xff0c;现在越来越多被要求单片机要支持升级功能。需求变化快&#xff0c;固件要不断支持新的功能&#xff0c;手动人工去烧固件越来越显得麻烦&#xff0c;已经操作成本高。 典型的方式是通过单片机外接的蓝牙、wifi等无线模块&#xff0c;或者通过单片…
阅读更多...
如何创建UE5插件?

如何创建UE5插件?

UE5 插件开发指南 前言1.0.打开插件窗口1.1.打开新建插件窗口1.2.填写新插件信息1.3.查看引擎自动生成的插件内容前言 首先,笔者默认读者已经知道如何安装UE5虚幻引擎了,并且也会编辑器的一些基本操作,那么这里省略了:如何注册Epic Games账号?如何安装UE5引擎?如何安装C++相…
阅读更多...
基于SpringBoot的完成SSM整合项目开发

基于SpringBoot的完成SSM整合项目开发

整合第三方技术 1. 整合JUnit问题导入1.1 Spring整合JUnit&#xff08;复习&#xff09;1.2 SpringBoot整合JUnit 2. 基于SpringBoot实现SSM整合问题导入2.1 Spring整合MyBatis&#xff08;复习&#xff09;2.2 SpringBoot整合MyBatis2.3 案例-SpringBoot实现ssm整合 1. 整合JU…
阅读更多...
Maven多环境配置与使用、跳过测试的三种方法

Maven多环境配置与使用、跳过测试的三种方法

文章目录 1 多环境开发步骤1:父工程配置多个环境,并指定默认激活环境步骤2:执行安装查看env_dep环境是否生效步骤3:切换默认环境为生产环境步骤4:执行安装并查看env_pro环境是否生效步骤5:命令行实现环境切换步骤6:执行安装并查看env_test环境是否生效 2 跳过测试方式1:IDEA工具…
阅读更多...
机器学习之滤波入门

机器学习之滤波入门

滤波的基本概念&#xff1a; 滤波是一种信号处理技术。在机器学习中&#xff0c;滤波通常指的是对输入信号进行加工&#xff0c;以消除噪声、平滑信号或突出特定频率范围的信号 简言之:加工输入,达到理想信号。 用生活的例子来解释: 假设你正在听一首音乐&#xff0c;但是在你的…
阅读更多...
UML中的assembly关系

UML中的assembly关系

UML中的assembly关系 1.什么是Assembly关系 在UML&#xff08;统一建模语言&#xff09;中&#xff0c;"assembly"&#xff08;组装&#xff09;是一种表示组件之间关系的关联关系。组件是系统中可替换和独立的模块&#xff0c;可以通过组装来构建更大的系统。 当一…
阅读更多...
零基础入门网络安全必看书单（附电子书籍+配套资料）

零基础入门网络安全必看书单（附电子书籍+配套资料）

学习的方法有很多种&#xff0c;看书就是一种不错的方法&#xff0c;但为什么总有人说&#xff1a;“看书是学不会技术的”。 其实就是书籍没选对&#xff0c;看的书不好&#xff0c;你学不下去是很正常的。 一本好书其实不亚于一套好的视频教程&#xff0c;尤其是经典的好书…
阅读更多...
中间件（一）

中间件（一）

中间件 1. 概念1.1 为什么要使用中间件&#xff1f;1.2 中间件定义及分类 2. 主要分类2.1 事务式中间件2.2 过程式中间件2.3 面向消息的中间件2.4 面向对象中间件2.5 Web应用服务器2.6 数据库中间件2.7 其他 3. 常用的中间件 1. 概念 中间件&#xff08;Middleware&#xff09…
阅读更多...
BigDecimal 类型的使用

BigDecimal 类型的使用

目录 一、前言 二、BigDecimal构造方法 二、BigDecimal参与运算 2.1定义初始值 2.2计算 2.3比较大小 2.4BigDecimal取其中最大、最小值、绝对值、相反数&#xff1a; 2.5补充 2.6、java中 BigDecimal类型的可以转换到double类型&#xff1a; 三、BigDecimal格式化、小…
阅读更多...
小白白也能学会的 PyQt 教程 —— 图像类及图像相关基础类介绍

小白白也能学会的 PyQt 教程 —— 图像类及图像相关基础类介绍

文章目录 〇、前言一、PyQt 中的图像类1、图像类简介2、图像类转换① 常用类转换&#xff08;QPixmap、QImage、QIcon&#xff09;② QBitmap、QBrush、QPen 转换为 QPixmap 或 QImage③ QByteArray 与 QPixmap、QImage 的互转④ numpy 与 QImage 互转 二、图像显示组件1、使用…
阅读更多...
DNDC模型在土地利用变化、未来气候变化下的建模方法及温室气体时空动态模拟实践技术

DNDC模型在土地利用变化、未来气候变化下的建模方法及温室气体时空动态模拟实践技术

DNDC模型讲解 1.1 碳循环模型简介 1.2 DNDC模型原理 1.3 DNDC下载与安装 1.4 DNDC注意事项 ​ DNDC初步操作 2.1 DNDC界面介绍 2.2 DNDC数据及格式 2.3 DNDC点尺度模拟 2.4 DNDC区域尺度模拟 2.5 DNDC结果分析 ​ DNDC气象数据制备 3.1 数据制备中的遥感和GIS技术 3…
阅读更多...
微博官方API使用方法【从注册到实战】

微博官方API使用方法【从注册到实战】

第一步&#xff1a;微博开发者身份认证 访问微博开放平台&#xff0c;登录自己微博账号&#xff0c;登录之后首先需要完善开发者的基本信息。【使用个人】 填写完成之后【审核通过】如下&#xff1a; 第二步&#xff1a;创建自己的应用 【备注&#xff1a;如果只是为了测试…
阅读更多...
Linux安装Redis6.0版本教程

Linux安装Redis6.0版本教程

前言&#xff1a;采用Redis源码压缩包解压编译的安装方式。因为centos7.x的gcc版本还是4.8.5&#xff0c;而GCC编译指定的版本是需要5.3以上。 1、下载Redis的tar.gz的安装包 百度云下载&#xff1a;Linux下载Redis6.0.8 提取码&#xff1a;dbbv 2、安装gcc新版本 #环境部署…
阅读更多...
【IEEE CIM 2023】基于多目标进化算法的抗菌肽设计方法

【IEEE CIM 2023】基于多目标进化算法的抗菌肽设计方法

Evolutionary Multi Objective Optimization in Searching for Various Antimicrobial Peptides 小生境共享&#xff08;Niche Sharing&#xff09;是生物进化算法中的一个重要概念。在传统的进化算法中&#xff0c;通常会假设每个个体都是独立且不同的&#xff0c;因此可能会导…
阅读更多...
机器学习基础之单层感知机及线性可分

机器学习基础之单层感知机及线性可分

文章目录 线性可分和权重向量公式线性不可分 线性可分和权重向量 单层感知机是后续深度学习的基础模型&#xff0c;本身没什么用&#xff0c;因为只能解决线性可分问题。 如这张图&#xff0c;想识别照片是横向的还是竖向的&#xff0c;只需要在中间画一条线&#xff0c;白点…
阅读更多...
【大数据学习篇9】各区域热门商品Top3分析

【大数据学习篇9】各区域热门商品Top3分析

学习目标/Target 掌握各区域热门商品Top3分析实现思路 掌握如何创建Spark连接并读取数据集 掌握利用Spark获取业务数据 掌握利用Spark过滤商品的行为类型 掌握利用Spark转换数据格式 掌握利用Spark统计每个区域中的不同商品 掌握利用Spark根据区域进行分组 掌握利用Spark根据区…
阅读更多...
Linux的tail，grep，sed命令总结，以使用上述三种命令获取日志信息为例

Linux的tail，grep，sed命令总结，以使用上述三种命令获取日志信息为例

目录 tail命令语法说明基本参数命令举例 grep命令语法说明匹配模式选择杂项输入控制文件控制 sed命令语法格式举例 使用命令组合查询日志信息 业务需求需要对软件日志进行查询和呈现&#xff0c;查询的条件是时间区间和关键词&#xff0c;系统运行在linux环境下&#xff0c;为此…
阅读更多...
阿里巴巴“高并发”核心笔记！《基础+实战+源码+面试+架构》

阿里巴巴“高并发”核心笔记！《基础+实战+源码+面试+架构》

前言 作为一个普普通通的程序员&#xff0c;如何才能提升自己的能力&#xff0c;在职场上拥有一技之长&#xff0c;这也成为普通的你我&#xff0c;迫切的需求。 拥有什么样的能力才能不被淘汰&#xff1f;答案是&#xff1a;高并发&#xff0c;它几乎成为了每个程序员都想要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023