使用谷歌浏览器中的Lighthoust进行页面性能检测

最新推荐文章于 2024-08-07 09:58:53 发布
最新推荐文章于 2024-08-07 09:58:53 发布
阅读量675 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHUIYI_24/article/details/118359521
版权

1.可以使用检测工具如下

在这里我们使用Lighthouse(谷歌浏览器自带)

2. 在谷歌浏览器开发工具中打开 Lighthouse

会出现如下界面

Categories 按需选择要检测的内容
Device 选择 Desktop 桌面端（根据自己需求）

点击Generate report 按钮开是性能检测,会自动刷新多次进行检测，检测完成后会出现如下图的检测结果页面

在检测结果中可能看到性能检测结果

检测结果会显示相关检测评分及一些优化建议，我们可根据检测结果和优化建议对页面进行优化

未完待续

丝月
关注
专栏目录
身为程序猿——谷歌浏览器的这些骚操作你真的会吗
孤寒者的博客
06-29 42万+
身为程序猿——谷歌浏览器的这些骚操作你真的会吗
Chrome 控制台 performance 性能分析
不知道并不可怕，可怕的是自己不知道 “自己不知道”。
06-20 2718
（4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。通过记录这些数据，开发者可以了解网页在不同阶段的性能表现，并找出可能存在的性能问题。通过性能面板，开发者可以记录和分析网页在运行时的性能数据，识别性能瓶颈，并进行针对性的优化。（3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。：每条彩色横杠表示一种资源。
Chrome对网页性能的检测--2015-05-05总结
热门推荐
ivan0609的专栏
05-05 1万+
Chrome浏览器非常强大，使用Chrome浏览器对页面性能进行检测，根据测试的结果进行优化。当然这个结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。 1、Chrome检测工具 F12之后点击Audits然后出现了如下界面，选中重载页面开始检测按钮，然后点击Run按钮，之后就是等待结果。 2、检测结果 这个检测结果分为2类，一
Google Chrome Lighthouse 安装与使用指南
最新发布
gitblog_01115的博客
08-07 342
Google Chrome Lighthouse 安装与使用指南 lighthouseAutomated auditing, performance metrics, and best practices for the web.项目地址:https://gitcode.com/gh_mirrors/lig/lighthouse 1. 项目目录结构及介绍 Lighthouse 是一个开源的自动化...
Lighthouse（灯塔）—— Chrome浏览器强大的性能测试工具
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
11-27 9816
详细介绍chrome浏览器的Lighthouse使用方法，及测试结果分析解读
谷歌浏览器LightHouse性能优化分析神器实践运用
supremeJacob的博客
04-11 3659
1 基本操作介绍 1.1 入口 打开最新版本Google Chrome，F12一下弹出开发者页面，在顶部的导航栏选项选择Lighthouse选项（旧版本的浏览器是需要从应用商店下载Lighthouse插件的） 1.2 首页基本信息 从该页的英文字面意思可以知道，主要是生成一份性能检测报告 （PS：奈何本人英语见识短，而且开发者模式并没有中文版的，遇到不懂的只能谷歌翻译下） 2 生成报告分析 这里以公司官网为例，Desktop模式下的报告 2.1 总览 2.2 四大指标介绍 2.2.1 Performa
chrome下查看网页性能的方法
qq_43264596的博客
09-26 829
1、控制台 2、
Lighthouse 谷歌插件
11-22
Lighthouse 谷歌插件 Google Chrome要求版本为 52 或更高版本。
谷歌浏览器及谷歌浏览器驱动
05-27
谷歌浏览器（Chrome）是全球广泛使用的网络浏览器，以其快速、安全和用户友好的特性而闻名。版本125.0.6422.41是64位系统的正式版本，它提供了诸多优化和更新，旨在提升浏览体验和性能。 在IT测试领域，谷歌浏览器...
谷歌浏览器禁用F1按键
07-14
F1快捷键被占用
python自动化测试无法启动谷歌浏览器问题
09-18
在进行Python自动化测试时，经常会遇到无法启动谷歌浏览器的问题。这种情况可能会导致测试流程中断，对于自动化测试来说，能够顺利启动和控制浏览器是进行测试的前提。本文将详细介绍解决Python自动化测试无法启动...
google-lighthouse-puppeteer：Google Lighthouse + Puppeteer NPM软件包
01-31
灯塔木偶-NPM配套 免责声明：截至2021年，该产品不再有免费的支持团队。 如果要维护此产品，请在Patreon上提供支持。 （此产品可免费获得许可，但需要财务支持以保持其持续改进。除了维护和稳定性之外，还有许多理想的功能需要添加。） 是无需任何图形界面即可启动以完成多项任务（PDF打印，性能，自动化...）的Google Chrome浏览器。 分析网络应用程序和网页，收集现代性能指标以及对开发人员最佳实践的见解。 是在Chrome（无头）浏览器上自动执行任务的工具。 描述 此程序包映像的目的是以连接模式并以自动化（编程）方式生成几页的性能报告。 它使用能够自动导出多个 安装 npm install -g google-lighthouse-puppeteer --unsafe-perm=true CLI用法 $> lighthouse-puppeteer -h Options -f, --file FILE Path to your testcase REQUIRED (default option)
谷歌浏览器自动化测试版113.0.5672.0(包含linux,windows32/64,mac三个版本,不会自动更新)
05-21
谷歌浏览器的自动化测试版提供了API和工具，如Selenium WebDriver，允许开发者编写脚本，实现对浏览器的自动化控制，进行页面加载、用户交互、性能监控等多种操作。这种自动化测试不仅限于基本的功能验证，还能涵盖...
【性能测试工具】Lighthouse Google技术
weixin_42901443的博客
02-14 2504
前端性能测试工具Lighthouse 前端代码审计工具 前端性能优化
谷歌性能测评工具lighthouse使用
翛然树的博客
05-06 1万+
谷歌性能测评工具lighthouse使用 1、谷歌插件lighthouse的基本介绍 Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单，我们只需要提供一个要测评的网址，它将针对此页面运行一系列的测试，然后生成一个有关页面性能的报告。通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。 2、lighthouse使用
移动端项目优化方案基于chrome中的lighthouse
liuben118的博客
12-15 1968
背景 H5商城在使用过程中，发现首屏的加载速度比较慢，网络情况良好的情况下。在一些中等配置的手机上，页面加载比较卡顿，以下为对项目首屏问题调研，及相关优化点的整理。 技术方案 基于chrome中的lighthouse 问题调研 性能评测主要的用到的工具为，chrome中的lighthouse。在Performance面板中，分数为62分，略微偏低。 基于以上的报告截图基本可以看到主要的问题都在于LCP和FCP，经过查看报告，针对相关的功能进行了优化。 优化点 1、优化运营位图片 在报告中，发现有很多的图片没
前端性能测试工具 LightHouse （灯塔）使用
金乌的博客
03-14 5544
— 一种工具Lighthouse 是一个开源的自动化工具，用来测试页面性能。—— 提升用户体验Web性能可以直接影响业务指标，例如转化率和用户满意度分析收集各种应用页面性能指标，并进行评估，以此我们可以根据评估结果进行针对性优化，不断提升用户体验—— 用法多样，根据需求进行选择目前官方提供了4种使用方式：Chrome 开发者工具（DevTools）Node CLIChrome 扩展。
谷歌浏览器 检查功能_谷歌Chrome浏览器开发者工具教程—基础功能篇
weixin_39724287的博客
12-09 3093
Chrome(F12开发者工具)是非常实用的开发辅助工具，对于前端开发者简直就是神器，但苦于开发者工具是英文界面，且没有中文，这让很多朋友都不知道怎么用。下载吧小编为大家带来Chrome开发者工具基础功能和高级性能分析器(Timeline、Profiles)的图文详解教程，下面是基础功能篇。提示：右键点击图片选择在新窗口或新标签页中打开可查看大图。一、Elements在Element中主...
详解前端页面性能测试方案——开源工具Lighthouse
liwenxiang629的博客
01-03 3091
相信绝大多数测试同学对于前端页面的性能测试都是通过使用各个浏览器的开发者工具进行抓包来查看响应中各种请求、js和图片的响应时间，然后把发现慢的点进行截图，然后汇总给开发人员。今天给大家介绍一款工具，不仅可以对页面性能进行打分，还能够生成美观的测试报告，他就是——Lighthouse！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值