最直观的就是通过 performance 与 lighthouse 来评判

最新推荐文章于 2024-05-06 17:00:00 发布
最新推荐文章于 2024-05-06 17:00:00 发布
阅读量479 收藏
点赞数
文章标签： 前端 javascript 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feidodoxcx/article/details/127998497
版权

作为一名开发者，我们追求的不应该是应用能用就好，而是好用，那么如何评价我们的应用是否好用呢？

  • 最直接的方案当然是通过收集用户反馈来评判

  • 从开发层面，最直观的就是通过 performance 与 lighthouse 来评判

3.1 优化前

如你所见，由于应用模块的一个复杂性，我们的 NextJS 应用起初性能并不是很好，甚至谈得上是差

  • FCP: 首次内容绘制时间 1.8s

  • lighthouse: 性能评分报告 55 分，Time to Interactive (TTI) 可交互时间为 7.3s，通常是发生在页面依赖的资源已经加载完成。

  • network: 我们每次进行路由跳转都要按需加载资源，因此我们需要单个页面的 DomContentLoaded 尽可能快以保证页面 Dom 结构的渲染效率。

  • 页面构建时间

最低0.47元/天 解锁文章
feidodo小程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
看懂 Lighthouse 中 Performance 核心指标
老司机的后备箱
09-14 3784
预加载 CSS 中通过@font-face定义的字体资源可确保在下载 CSS 文件之前获取它们。需要注意的是添加属性，否则预加载的字体将被提取两次。长任务是长时间占用主线程的 JS 代码，它会导致页面无法及时响及用户输入。在加载页面时，长任务可能会占用主线程而导致事件监听与处理程序较晚注册，从而导致页面看起来已经准备就绪，但用户点击不起作用。RAIL 模型建议我们在 50 毫秒内处理用户输入事件，确保在 100 毫秒内做出可见响应会使得用户感觉交互是及时的。所以超过 50 毫秒的任务都属于长任务。
性能监测之Performance、LightHouse 与性能 API
乐夫天命兮的博客
09-26 1889
Performance、LightHouse 与性能 API 性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈，从而有的放矢地开展具体的优化工作。 平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案。这两种方案下都有非常优秀、且触手可及的相关工具供大家选择，本节我们就一起来研究一下这些工具的用法。 可视化监测：从 Performance 面板说起 Performance 是 Chrome 提供给我们的开发者工具，用于记录和分析我们的应用在运行时的所有活动。它呈现的数据具有实时性、
web性能优化（Lighthouse和performance）：从实际项目入手，如何监测性能问题、如何解决。
最新发布
2401_84208172的博客
05-06 1044
这篇文章总结一下我过往项目的web性能优化，主要是就项目中如何发现性能问题，优化如何解决，谈一下性能优化。把学习的过程跟大家分享一下，共同学习。web的性能监测工具我用的是Chrome的Performance 面板和Lighthouse。回想起以前工作被产品拉进小黑屋，要我优化目前项目组的3个项目的性能问题。说体验起来比较卡。我带着激动地心，颤抖的手打开项目跑一下分数，普遍15-60分。因为我们项目是数据可视化的项目。追求的是什么？酷炫吊炸天！！！！各种3D的地图，酷炫的动画，复杂的交互。
最简洁网站 SEO 优化，Lighthouse SEO 评分 92
Gjw_java的博客
08-24 385
SEO就是指按照搜索引擎的算法，提升你的文章在搜索引擎中的自然排名，本文介绍 vue 项目中如何优化 SEO，以便提高站点的排名。
lighthouse插件指标简介及评分标准
小胖子xpp的博客
03-21 1688
lighthouse中关于性能的相关指标及评分标准，就需要对这些指标的含义及标准有一些了解了，本文主要就是对lighthouse插件指标简介及评分标准做一些介绍。
Lighthouse performance scoring
AnitaSun的博客
12-07 234
为什么分数会波动 互联网流量路由变化 在不同的设备上进行测试，如高性能台式机和低性能笔记本电脑 插入 JavaScript 和添加/修改网络请求的浏览器扩展（所以在 Devtools 官网上要关掉浏览器插件） 杀毒软件 分数的组成部分 Lighthouse Scoring Calculator：可以通过这个查看得分的加权平均数 LightHouse 8 LightHouse 6 表现最好的网站渲染 LCP 的时间约为1,220毫秒 如何处理桌面电脑和移动电话 在 Lighthouse v6之前
【性能测试工具】Lighthouse Google技术
weixin_42901443的博客
02-14 2391
前端性能测试工具Lighthouse 前端代码审计工具 前端性能优化
性能监测篇：Performance、LightHouse 与性能 API(1).md
04-01
我希望正在阅读这本小册的各位可以在心里琢磨一下这个问题——无须你调动太多计算机的专业知识，只需要你用最快的速度在脑海中架构起这个抽象的过程——我们接下来所有的工作，就是围绕这个过程来做文章。...
webpack-lighthouse-plugin：用于Lighthouse的Webpack插件
02-06
Webpack Lighthouse插件该插件使您可以从Webpack构建中运行 。安装npm install --save-dev webpack-lighthouse-plugin 建立在webpack.config.js ： const WebpackLighthousePlugin = require ( 'webpack-lighthouse-...
plugin-lighthouse:适用于sitespeed.io的Lighthouse插件
04-28
Lighthouse的sitespeed.io插件 运行Lighthouse作为sitespeed.io的插件（受启发）。 您可以阅读有关sitespeed.io插件的更多信息。需要维护者我们正在寻找可以对Lighthouse插件有所爱的人，并且在使用Google产品时不会...
lighthouse-keeper:直接在GitHub上关注Google Lighthouse得分变化changes
05-02
pointing_right: 获取新的失败审核的详细列表 :backhand_index_pointing_right: 如果分数太低，则会自动使PR失败 :backhand_index_pointing_right: 与许多不同的安装npm install --save-dev @codechecks/lighthouse-...
testcafe-lighthouse:使用TestCafe运行Lighthouse性能审核
05-13
lighthouse库添加为依赖项（或dev-dependency）$ yarn add -D testcafe-lighthouse# or$ npm install --save-dev testcafe-lighthouse在你的代码中安装完成后，您可以在代码中使用testcafe-lighthouse来审核当前页面...
lighthouse_如何提高您的渐进式网络应用的Google Lighthouse得分（最高可达100分）
cumi6497的博客
07-09 870
lighthouseIf there’s one message the Chrome Dev Team wants to drive home to developers, it’s this: performance matters. 如果Chrome开发团队想传达一则消息，那就是： 性能至关重要 。 Speed was the centerpiece of their recent Chr...
前端技能树，面试复习第 11 天 —— Lighthouse 有听说过吗，如何根据 Lighthouse 的测评指标提升应用性能
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
05-27 345
Lighthouse 是用于测试网页性能工具最有用的技术之一。 它具备了自动化，并可以测量网站的可访问性和 SEO。 更重要的是，它目前是开源的并且可以免费使用。 同时，它可以用来测试渐进式 Web 应用程序。 今天，性能不仅仅是渲染应用程序所需的时间。 一些不良的体验带来的多米诺骨牌效应更会损害你的应用程序。 速度如何影响您的应用程序的性能？ 你是否知道自 2010 年以来 Google 一直在关注网站的访问网络速度排名吗？ 2010 年，Google 宣布将在桌面设备上的用户搜索排名算法中考虑页面访
前端基本性能指标及lighthouse使用
adorable_的博客
12-26 1640
浏览器提供的performace API，这也是性能监控数据的主要来源，performace提供高精度的时间戳，精度可达纳秒级别，且不会随操作系统时间设置的影响。目前主流浏览器都支持。 Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它能够生成一个有关页面性能的报告，通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。
Lighthouse（灯塔）—— Chrome浏览器强大的性能测试工具
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
11-27 7109
详细介绍chrome浏览器的Lighthouse使用方法，及测试结果分析解读
测试篇：性能监测之Performance、LightHouse 与性能 API
2401_83621384的博客
04-11 813
且后续会持续更新**
谷歌性能测评工具lighthouse使用
热门推荐
翛然树的博客
05-06 1万+
谷歌性能测评工具lighthouse使用 1、谷歌插件lighthouse的基本介绍 Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单，我们只需要提供一个要测评的网址，它将针对此页面运行一系列的测试，然后生成一个有关页面性能的报告。通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。 2、lighthouse使用
lighthouse用法
07-25
2. 运行Lighthouse：在终端中使用以下命令来运行Lighthouse：`lighthouse <URL>`，将`<URL>`替换为要评估的网页的URL。 3. 选择评估类型：Lighthouse会提供几个评估类型，包括性能、可访问性、最佳实践等。你可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值