前端性能测试工具-lighthouse

Lighthouse简介

Lighthouse 是 Google 的一款开源工具,它可以作为一个 Chrome 扩展程序运行,或从命令行运行。只需要给 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个页面性能的报告。

Lighthouse使用

在开发者工具中运行

1.打开被测网址

2.打开网页开发者工具,选择Lighthouse选项

3.选择对应的设备、测试类别等,点击”分析网页加载情况“按钮

4.运行结束后可查看报告

在命令行中运行

1.使用npm安装Lighthouse:

npm install -g lighthouse

2.在命令行中输入执行指令

lighthouse https://xx.com/

3.运行时会打开浏览器,测试完成后会自动关闭。在命令行的最下方,会有报告输出的地址

Lighthouse测试结果分析

Lighthouse测试完成后,生成的报告主要包括以下5 个部分:

  • 性能(Performance)

  • 访问无障碍(Accessibility)

  • 最佳实践(Best Practice)

  • 搜索引擎优化(SEO)

  • PWA(Progressive Web App,渐进式 Web 应用)

性能

Lighthouse主要有6 个性能指标:FCP、SI、LCP、TTI、TBT 和 CLS,权重分别是 10%,10%,25%,10%,30% 和 15%,Lighthouse 会根据权重计算得到一个分数值。

各指标说明:

  • FCP(First Contentful Paint)即首次内容绘制,统计从进入页面到首次有 DOM 内容绘制所用时间。

  • LCP(Largest Contentful Paint)即最大内容绘制,统计从页面开始加载到视窗内最大内容绘制的所需时间,这里的内容指文本、图片、视频、非空的 canvas 或者 SVG 等。

  • CLS(Cumulative Layout Shift)即累计布局位移,用该指标评估页面的视觉呈现的稳定性。

  • TBT(Total Blocking Time)即阻塞总时间,测量的是 FCP 与 TTI 之间的时间间隔,反映用户的交互是否能及时响应。

  • SI(Speed Index)即速度指数,在页面加载过程中捕获视频,计算视频中帧与帧之间视觉变化的进度,反映了网页内容填充的速度。

访问无障碍

访问无障碍检测所有用户是否都能有效地访问内容并浏览网站

最佳实践

最佳实践检测可以改善网页的代码健康状况的一些最佳做法

搜索引擎优化

搜索引擎优化检测搜索引擎对网页内容的理解程度

PWA

PWA 衡量网站是否迅速、可靠且可安装

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

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

相关文章

计算机毕业设计 基于SSM+Vue的医院门诊互联电子病历管理信息系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

使用 Docker 安装 Elasticsearch (本地环境 M1 Mac)

Elasticsearchkibana下载安装 docker pull elasticsearch:7.16.2docker run --name es -d -e ES_JAVA_OPTS“-Xms512m -Xmx512m” -e “discovery.typesingle-node” -p 9200:9200 -p 9300:9300 elasticsearch:7.16.2docker pull kibana:7.16.2docker run --name kibana -e EL…

Ubuntu 20.04中docker-compose部署Nightingale

lsb_release -r可以看到操作系统版本是20.04,uname -r可以看到内核版本是5.5.19。 sudo apt install -y docker-compose安装docker-compose。 完成之后如下图: cd /opt/n9e/docker/进入到/opt/n9e/docker/里边。 docker-compose up -d进行部署。 …

华为OD机试 - 最小传输时延 - 深度优先搜索DFS(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明计算源节点1到目的节点5,符合要求的时延集合 华为OD机试 2023B卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试&…

牛客java训练题 day1

9.24 day1 Q 1. this 指针是用来干什么的? 2.基类和派生类分别是指什么? 3.为什么方法中不能写静态变量 4. 解释一下ASCII码和ANSI码和两者的区别 5.简述j ava.io java.sql java.awt java.rmi 分别是什么类型的包 6. 看下面一段代码:…

软考高级+系统架构设计师教程+第二版新版+电子版pdf

注意!!! 系统架构设计师出新版教程啦,2022年11月出版。所以今年下半年是新版第一次考试,不要再复习老版教程了,内容改动挺大的。 【内容简介】系统架构设计师教程(第2版)作为全国计…

字符函数和字符串函数(C语言进阶)

字符函数和字符串函数 一.求字符串长度1.strlen 二.长度不受限制的字符串函数介绍1.strcpy2.strcat3.strcmp 前言 C语言中对字符和字符串的处理很是频繁,但是C语言本身是没有字符串类型的,字符串通常放在常量字符串中或者字符数组中。 字符串常量适用于那…

1*1的卷积核如何实现降维/升维?

在众多网络中,1*1的卷积核被引入用来实现输入数据通道数的改变。 举例说明,如果输入数据格式为X*Y*6,X*Y为数据矩阵,6为通道数,如果希望输出数据格式为X*Y*5,使用5个1*1*6的卷积核即可。 其转换过程类似于…

如何在32位MCU用printf()函数打印64位数据

1. 在32位MCU上定义64位变量: unsigned long long time_base; unsigned long long temp_time;2. 调用打印函数: printf("RFID:time_base:%d\r\n",time_base); printf("RFID:temp_time:%d\r\n",temp_time); printf("RFID:Ru…

2023.9.19 关于 数据链路层 和 DNS 协议 基本知识

目录 数据链路层 MTU DNS 协议 补充 DHCP协议 数据链路层 基本概念: 考虑相邻两个节点之间的传输(通过 网线 / 光纤 / 无线 直接相连的两个设备)以太网协议 规定了 数据链路层 和 物理层 的内容 IP地址 与 mac地址 的相互配合 IP地址 描…

kotlin的集合使用maxBy函数报NoSuchElementException

kotlin设定函数 fun test() {listOf<Int>().maxBy { it } } 查看java实现

opencv实现仿射变换和透射变换

##1&#xff0c; 什么是仿射变换&#xff1f; 代码实现 import numpy as np import cv2 as cv import matplotlib.pyplot as plt#设置字体 from pylab import mpl mpl.rcParams[font.sans-serif] [SimHei]#图像的读取 img cv.imread("lena.png")#仿射变换 row…

电脑C盘爆红怎么办?(小白篇)

文章目录 前言&#xff1a;1、清理临时和系统文件2、更改电脑默认软件安装位置3、微信、QQ文件存储路径放在其它盘4、卸载一些不常用的软件彩蛋 前言&#xff1a; C盘作为电脑的系统盘&#xff0c;如果出现爆满或者剩余空间很小整个C盘变红&#xff0c;这样会导致电脑系统运行…

【微信小程序开发】宠物预约医疗项目实战-注册实现

【微信小程序开发】宠物预约医疗项目实战-注册实现 第二章 宠物预约医疗项目实战-注册实现 文章目录 【微信小程序开发】宠物预约医疗项目实战-注册实现前言一、打开项目文件二、编写wxss代码2.1 什么是wxss2.2 配置主程序全局样式 三. 在sign文件下的wxml文件中编写如下代码并…

Codeforces Round #898 (Div. 4)

首先庆祝自己上了绿名&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384; 1873A - Short Sort 1873B - Good Kid c…

python模拟斐波那契数列输出

用户输入指定的数列范围&#xff0c;正确输出结果。 源代码&#xff1a; def fiebo(n): a 1 b 1 for i in range(n): if i 0: print(a, end" ") elif i 1: print(b, end" ") else: …

腾讯云16核CPU服务器配置大全,CVM和轻量服务器

腾讯云16核CPU服务器有哪些配置可以选择&#xff1f;可以选择标准型S6、标准型SA3、计算型C6或标准型S5等&#xff0c;目前标准型S5云服务器有优惠活动&#xff0c;性价比高&#xff0c;计算型C6云服务器16核性能更高&#xff0c;轻量16核32G28M带宽优惠价3468元15个月&#xf…

Java基础(四)

前言&#xff1a;本博客主要涉及java编程中的线程、多线程、生成者消费者模型、死锁。 目录 线程多线程 线程同步 synchronized Lock锁 线程通信 生产者消费者模型 线程池 使用线程池处理Runnable任务 使用线程池处理Callable任务 Excutors 悲观锁 乐观锁 并发VS并…

React 全栈体系(十三)

第七章 redux 五、redux 异步编程 1. 理解 redux 默认是不能进行异步处理的,某些时候应用中需要在 redux 中执行异步任务(ajax, 定时器) 2. 使用异步中间件 npm install --save redux-thunk 3. 代码 - 异步 action 版 3.1 store /* src/redux/store.js */ /*** 该文件专…

【Spatial-Temporal Action Localization(七)】论文阅读2022年

文章目录 1. TubeR: Tubelet Transformer for Video Action Detection摘要和结论引言&#xff1a;针对痛点和贡献模型框架TubeR Encoder&#xff1a;TubeR Decoder&#xff1a;Task-Specific Heads&#xff1a; 2. Holistic Interaction Transformer Network for Action Detect…