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

于 2024-05-14 22:21:41 发布
阅读量451 收藏
点赞数 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) 首次内容绘制 标记浏览...
FP、FCP、FMP、LCP都是什么P？
doomliu的博客
05-15 8918
1. 简介 面试中经常问到前端性能监控相关指标，你知道FP、FCP、FMP、LCP代表什么事件吗？它们的先后顺序如何呢？如何计算？前端性能监控中常用哪些指标？ 本文将介绍前端项目中常用到的性能指标和它们的计算方法以及实际应用场景。 最初，评价前端页面加载性能有两个指标：DOMContentLoaded和load事件，分别代表DOM构造完成和首屏资源加载完成。 对于之前的页面和现代的服务端渲染的页面，这两个指标都可以很好地衡量首屏内容展示时间。但对于现代复杂的单页应用，都是通过JS操作DOM向页面添加主要内容
白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间（LCP）
pzy_666的博客
02-19 5169
怎么获取到这两个数据 通过chrome开发者工具Performance选项卡 通过chrome开发者工具Lighthouse选项卡 通过JS计算 web-vitals FP & FCP & LCP FP:（First Paint / 首次绘制） 页面第一次绘制像素的时间，实际也是白屏时间 FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间，也就是我们通常要优
Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等
知之为知之，不知为不知
05-05 3251
Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等；加载性能指标、可交互时间、稳定性指标、流畅性指标
如何使用Chrome浏览器做前端页面性能分析
dotNET跨平台
11-30 3678
写在前面也是老生常谈的问题了，有的时候我们老觉得我们页面一直转圈圈老半天打不开；想看看什么原因又不知如何下手，不知原因就更不知如何优化了，强行优化就只能是瞎搞一通，没有衡量指标就不能量化优化的结果，优化就无从谈起了；基于此，今天我就斗胆来聊聊如何使用Chrome浏览器做页面性能分析；页面性能指标常见指标这些也是Chrome 性能分析工具用到的指标FP(First Paint)FP 是从页面开始加载...
性能优化之详解各种指标
2301_78834737的博客
07-15 198
在早期前端三剑客的时代或者现在的服务端渲染，DCL与L确实可以很好地衡量首屏内容展示时间，但对于现代各种框架盛行的单页应用，由于都是通过JS操作DOM向页面添加主要内容，DCL和L事件就不能很好地衡量首屏显示时间了。于是有FP、FCP、FMP被提出来，它们关注的不是，而是，因此能更好地表现用户看到的情况。FP、FCP这两个指标虽然表达了渲染的事件，但对“用户关注的内容”没有体现，比如首屏渲染出来一个背景，或者一个loading，可能对于用户来说和白屏区别不大。
【性能】如何计算 Web 页面的 TTI 指标
haosicx的博客
03-12 726
TTI（Time To Interactive），即从页面加载开始到页面处于完全可交互状态所花费的时间。很多情况下，开发者往往只关注页面渲染相关的指标，如 FP、FCP 等，而忽视了页面的可用性指标。TTI 即是反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。
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（自适应快速充电）等快充协议的数据。这些协议在现代智能手机和其他电子设备的...
I/A系统IO硬件说明书
01-17
### 一、Field Control Processor 270 (FCP270) #### 概述 Field Control Processor 270 是一种用于现场级别的控制处理器，它支持多种通信协议和模块，以实现对过程数据的有效管理和控制。 #### 元素 - **FCP270 ...
fcp 动态转场插件 很好用
09-13
fcp 动态转场插件 很好用
2022帆软报表工程师模拟试卷及参考答案
03-24
【帆软报表工程师认证概述】 帆软报表是企业级报表工具...通过2022年的模拟试卷及参考答案，考生可以全面检测自己的学习成果，为正式考试做好充分准备。在不断实践中提升技能，将有助于在报表工程师的道路上走得更远。
FCRP考试练习题-动态填报
04-26
资源内包含帆软cpt模板文件，有需要的小伙伴可以自行下载，有需要的小伙伴可以自行下载使用，如需查看视频讲解可以访问西瓜视频：... 或者哔哩哔哩：https://space.bilibili.com/630399480?spm_id_from=333.1007.0.0
FM-XPD720规格书 多协议控制器.pdf
10-05
该芯片集成了USB Type-C、USB Power Delivery (PD) 2.0/3.0及PPS等多种快充协议，确保对不同品牌设备的支持，如华为FCP/SCP/HVSCP、三星AFC、Quick Charge 2.0/3.0/3.0+以及Apple 2.4A充电规范。 XPD720的主要特性...
FCRP考试练习题-频率统计
04-10
有需要的小伙伴可以自行下载使用，如需查看视频讲解可以访问西瓜视频：https://www.ixigua.com/home/2506516376848260/video/?preActiveKey=pseries&list_entrance=userdetail 或者哔哩哔哩：...
一文带大家了解前端性能测试所涉及的核心性能指标：LCP、FID、CLS、TBT、TTI、FCP、TTFB
liwenxiang629的博客
08-21 1641
近期工作需要开始从事前端性能测试相关工作，由于之前并没有相关经验，因此耗费了一定的学习成本。本文重点对前端性能测试所涉及的核心指标的含义以及响应时间范围进行了总结，希望对刚刚进入前端性能测试领域的同学有所帮助！这些指标主要依据是 google web vitals。文章非常实用建议大家收藏。
网站核心指标Core web vitals(LCP、FID、CLS)是什么？
青梅SEO
04-02 346
根据官方的说法，Core web vitals 是长期下来根据大量使用者体验所制定的指标。直到这次的更新为止，Google 已针对使用者体验设置过多种评分机制，但都未真正的搔到使用者的痒处。而在推出全新的core web vitals 后Google 甚至提到，若75% 以上的使用者在网站中的浏览体验都能够通过以上3 种指标，就能够大幅的提升使用者的搜寻体验，甚至能够让原本因等待而离开的使用者减少24%！与FCP 不同的是，LCP 更加注重页面中最大元素的载入速度。而Google 是怎么判定最大元素呢？
LightHouse 性能优化
最新发布
shenjing_Shining的博客
04-09 584
性能优化是一个持续的过程，需要开发者根据实际情况不断调整和改进。Lighthouse 提供了一个方便的工具来识别性能瓶颈，并提供了一系列的优化建议。通过实施这些建议，可以显著提高 Web 应用的加载速度、响应性和用户体验。记住，优化的目标不仅是提高性能指标，还包括提供更快、更可靠的用户体验。
FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS
12-29
FP (First Paint) 首次绘制是指浏览器首次将像素渲染到屏幕上的时间点。 FCP (First Contentful Paint) 首次内容绘制是指浏览器首次绘制页面上有实际内容的时间点。 LCP (Largest Contentful Paint) 最大内容渲染是指页面上最大的可见内容元素被渲染完成的时间点。 DCL (DomContentloaded) 是指当初始的 HTML 文档被完全加载和解析完成时的时间点。 FMP (First Meaningful Paint) 首次有效绘制是指页面上有意义的内容首次被绘制的时间点。 TTI (Time to Interactive) 可交互时间是指页面加载完成并且用户可以与页面进行交互的时间点。 TBT (Total Blocking Time) 页面阻塞总时长是指页面在加载过程中被长时间阻塞的总时长。 FID (First Input Delay) 首次输入延迟是指用户首次与页面进行交互（例如点击按钮）时，页面响应该交互的延迟时间。 CLS (Cumulative Layout Shift) 累积布局偏移是指页面上元素在加载过程中发生的意外移动的总量。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值