网页检测性能指标FCP/LCP/DCL/TTI/FID/CLS/FPS 控制台查看

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量415 收藏
点赞数 8
分类专栏： 网页测试 文章标签： 前端 前端框架 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55715771/article/details/138871559
版权

因为笔者lighthouse用不了，显示Can only audit pages on HTTP or HTTPS.Navigate to a different page.且暂时不打算开通隧道ID，所以用了其它方法查看本地网页检测相关指标。

FCP/LCP/DCL/TTI查看：

  • Chrome浏览器，打开检查F12
  • 点击Performance insights
  • 选择Disable cache
  • 点击start recording

FCP查看（LCP/DCL/TTI同样）

Google 在 2020 年五月提出了网站用户体验的三大核心指标：

LCP/FID/CLS查看

选择Rendering下的Core Web Vitals

FPS检测：

打开Rendering,选择Frame Rendering Stats

菜菜要努力丫
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)
翾的博客
02-09 2万+
之前整理过一份分析Performance的博文: 利用Performance API分析网站性能 这次还是拿CSDN的performance来举例说明, 这几个名词的含义, 供自己遗忘和不会的同学方便查看 FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点. FCP (First Contentful Paint) 首次内容绘制 标记浏览...
性能分析工具和 Performance API
weixin_42910765的博客
01-17 1071
性能分析灯塔（lighthouse）指标详解性能名词解释FCP (First Contentful Paint)LCP (Largest Contentful Paint)TBT (Total Blocking Time)CLS (Cumulative Layout Shift)TTFBFIDTTI利用Performance API分析网站性能 灯塔（lighthouse）指标详解 1.Performance（性能） First Contentful Paint(FCP)：衡量页面开始加载到页面中第一个元素
什么是LCP和FCP指标
AmyGeng123的博客
06-13 754
LCP（Largest Contentful Paint）和FCP（First Contentful Paint）是Web性能分析中的两个关键指标
网页FPS查看
weixin_33825683的博客
05-24 2941
直接将下列代码复制粘贴即可const showFPS = (function () { // noinspection JSUnresolvedVariable, SpellCheckingInspection const requestAnimationFrame = window.requestAnimationFrame || // Chromium win...
白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间（LCP）
pzy_666的博客
02-19 5118
怎么获取到这两个数据 通过chrome开发者工具Performance选项卡 通过chrome开发者工具Lighthouse选项卡 通过JS计算 web-vitals FP & FCP & LCP FP:（First Paint / 首次绘制） 页面第一次绘制像素的时间，实际也是白屏时间 FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间，也就是我们通常要优
【性能】如何计算 Web 页面的 TTI 指标
haosicx的博客
03-12 710
TTI（Time To Interactive），即从页面加载开始到页面处于完全可交互状态所花费的时间。很多情况下，开发者往往只关注页面渲染相关的指标，如 FP、FCP 等，而忽视了页面的可用性指标。TTI 即是反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。
如何使用Chrome浏览器做前端页面性能分析
dotNET跨平台
11-30 3612
写在前面也是老生常谈的问题了，有的时候我们老觉得我们页面一直转圈圈老半天打不开；想看看什么原因又不知如何下手，不知原因就更不知如何优化了，强行优化就只能是瞎搞一通，没有衡量指标就不能量化优化的结果，优化就无从谈起了；基于此，今天我就斗胆来聊聊如何使用Chrome浏览器做页面性能分析；页面性能指标常见指标这些也是Chrome 性能分析工具用到的指标FP(First Paint)FP 是从页面开始加载...
Sage X3 Web Scheduling Demo script /Sage X3 生产排程演示脚本
05-08
【Sage X3 生产排程演示脚本】是针对Sage X3 V12最新版本的生产管理工具的一个详细展示，重点在于介绍其在有限产能资源规划（FCP）和资源排程方面的能力。该脚本适用于各种行业，帮助进行高效而精确的生产计划。以下...
DSView FCP/SCP/AFC解码器
04-29
"DSView FCP/SCP/AFC解码器"是一款专为DSView和DSLogic设计的软件工具，主要用于解析FCP（快速充电协议）、SCP（安全充电协议）和AFC（自适应快速充电）等快充协议的数据。这些协议在现代智能手机和其他电子设备的...
fcp 动态转场插件 很好用
09-13
fcp 动态转场插件 很好用
2022帆软报表工程师模拟试卷及参考答案
03-24
【帆软报表工程师认证概述】 帆软报表是企业级报表工具...通过2022年的模拟试卷及参考答案，考生可以全面检测自己的学习成果，为正式考试做好充分准备。在不断实践中提升技能，将有助于在报表工程师的道路上走得更远。
FCRP考试练习题-动态填报
04-26
资源内包含帆软cpt模板文件，有需要的小伙伴可以自行下载，有需要的小伙伴可以自行下载使用，如需查看视频讲解可以访问西瓜视频：... 或者哔哩哔哩：https://space.bilibili.com/630399480?spm_id_from=333.1007.0.0
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1122
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 686
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 204
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 159
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
ReactRouter v6升级的步骤
feixin369的博客
07-14 365
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
【零基础】学JS之APIS第三天
大学生小郑的博客
07-12 1709
【零基础】学JS之APIS第三天
FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS
12-29
FCP (First Contentful Paint) 首次内容绘制是指浏览器首次绘制页面上有实际内容的时间点。 LCP (Largest Contentful Paint) 最大内容渲染是指页面上最大的可见内容元素被渲染完成的时间点。 DCL ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值