前端监控（1） | 青训营笔记

strange
104 阅读3分钟

前端监控常用指标

这是我参与「第五届青训营」笔记创作活动的第13天. 今天主要了解前端监控的常用性能指标.

性能指标

web性能标准的诞生

早期网页是纯静态的，但随着Web爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。 因此，2010年8月，W3C成立了Web 性能工作组，由来自Google和 Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和API. 随后，Web性能工作组开始制定一系列Web性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征

传统的性能指标

传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。

image-20230214134827412.png

以用户为中心的性能指标

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。 这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验.

下面这个表格是从用户出发提出的一些指标

用户体验指标
发生了吗?FP, FCP
内容有用吗?FMP, SI
内容可用吗?TTI
令人愉悦吗?FID

image-20230214134959712.png

这张图对应网页渲染的几个关键节点.

  • FP(First Paint):首次渲染的时问点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。

  • FCP (First Contentful Paint):首次有内容渲染的时间点。

  • FMP (First Meaningful Paint) : 首次绘制有意义内容的时间点。

  • TTl (Time to Interactive): 测量页面从开始加载到主要了资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。

    • 可以交互的时间节点。
    • TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。

  • SI(Speed Index):衡量页面可视区域加载速度，帮助检测页面的加载体验差异。

image-20230214135020454.png

百分比表示页面内容渲染的比例。A是一个逐步渲染的过程，B是一个突然加载完成的过程。A和B的首次内容出现和完全加载时间是一样的，但是从用户角度A的体验明显更好。

  • FID (First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间
avatar
文章
阅读
粉丝