前端性能优化之指标

制定清晰可测量的指标是性能优化最关键的一步，通过建立案例研究，结合现有业务做一次性能指标的理论性验证，还需同开发、设计、业务团队对其目标，建立长期可持续的、可测量的、可追踪的优化指标。

目前存在多种性能衡量指标模型，下面进行简单介绍：

• 质量基础指标：请求数量、权重、性能分数，常用于警报、监控变化。

• 里程碑指标：页面加载生命周期优化，如 TTFB、交互响应时间，常用于描述用户体验。

• 渲染指标：渲染时长，常用于测量渲染性能。

• 自定义指标：自定义特定的用户行为指标，如看到首屏内容时长。

常见指标如下：

• Time to Interactive(TTI)：布局稳定、关键字体可见、主线程可以处理用户输入事件。

• First Input Delay(FID)：用户第一次和页面交互到浏览器实际响应的时长。

• Largest Contentful Paint(LCP)：页面重要内容加载完成时长。

• Total Blocking Time(TBT)

• First Meaniingful Paint(FMP)：已废弃。

• Cumulative Layout Shift(CL

• Speed Index

• CPU 消耗时长

• 组件级别 CPU 消耗

• Frustration Index

• Ad Weight Impact

• Deviation metrics

• 自定义指标

测量方法：

• 实验室测量：Lighthouse

• 真实用户测量：PWA，跳转时长、资源加载时长、渲染时长、长任务数量

环境：

• 移动、PC 多浏览器

• 3G、4G、5G、Wifi 网络

• 高端、低端设备