起首需要讲的是产物或者系统的性能与系统稳定有关,经常会出现用户经常反应的一个环境,就是页面报错或者卡顿。但是由于设备不同、欣赏器兼容、网络快慢、产物设计等原因,开发或者研发很少能复现。还有更常见的场景,便是报错或者卡顿还没来得及上传到 RUM 系统或者反馈上来,用户已经流失了。很显着系统稳定跟留住用户有关,系统报错与用户体验有关,用户体验跟用户增长有关。而且通常前端开发工程师的一个难题是,能否快速定位系统性能问题是发生在前端这一侧每一个用户现实请求所产生的性能问题导致的缓慢,还是其他环节呢?
现在开始这次对提升性能的第一个实践和履历分享,便是 FCP。
FCP 是早期性能指标发展中比较早的一个指标,在常见的 client-side-rendering 场景中的 spa 架构中,由于 body 下 id 为 app 的 div 的渲染的竣事,导致 fcp 通常大于等于 first paint,FCP 更适合在 ssr 场景中对首次内容渲染后用于衡量网站的加载体验,如在 ssr 的网站性能监控中,就比较发起针对 FCP 做告警设置。虽然 fcp 对于提升网站提升有效,但这个指标对于用户真实体验有较大的差异。fcp 和真实发生的页面渲染之间往往还存在着网络资源队列处理请求、资源解析和 dom 的现实渲染中特别多的因素,随着页面内容复杂度攀升,当前渲染页面是否允许用户操作,页面渲染是否令人愉悦,但随着将 rendering 更多的放在欣赏器侧,Fcp 已经远远不能满足用户体验对性能查验的需求。便是今天还要跟各人分享在实践中需要关注的几个指标。
核心指标及实践
今天跟各人聊一聊几大核心指标,起首是这些指标的含义,和指标怎样解读,还有这些核心指标的影响因素。
这三大指标分别是从页面加载、用户交互以及视觉稳定性的角度入手。这个有点类似谷歌 2022 开发者大会的数据,但又不完全一样,主要是 long task 和 errors,后面我也会根据观测云的仪表来给各人展示,