大家好，我是徐徐。今天跟大家聊聊前端性能优化中的指标。
前言
今天我们所处的时代是一个快节奏的时代，每天会使用很多APP，浏览很多网页，网站和应用的性能对用户体验和业务成功至关重要。关于前端的性能优化，指标是先行者，有了指标的定义，才知道性能的好坏。前端性能优化是一个持续的过程，需要我们有科学的方法来衡量、分析和改进。
本文将探讨一下前端性能优化的关键指标，包括它们的定义、重要性、应用场景以及如何有效地使用这些指标来提升网站性能。
指标概述
前端性能指标可以分为两类：真实指标（Real User Metrics，RUM）和实验室指标（Lab Metrics）。真实指标反映了实际用户在使用过程中体验到的性能，而实验室指标则是在受控环境下测量的性能数据。
真实指标
真实指标直接来自于用户的实际体验，它们包括：
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
实验室指标
实验室指标在模拟环境中测量，主要包括：
- Total Blocking Time (TBT)
- Time to Interactive (TTI)
接下来，我们将详细探讨每一个指标。
真实指标详解
First Contentful Paint (FCP)
定义：首次内容绘制，FCP测量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。
重要性：FCP是用户对页面加载速度的第一印象，直接影响用户对网站响应速度的感知。
理想值：Google建议FCP应在1.8秒内。
评分标准：
| FCP时间(秒) | 颜色编码 | FPC分数 |
|---|---|---|
| 0 - 2 | 绿色(快) | 75 - 100 |
| 2 - 4 | 橙色(中等) | 50 - 74 |
| 超过4 | 红色(慢) | 0 - 49 |
优化方法：
- 减少关键资源的数量和大小
- 压缩文本文件（HTML、CSS、JavaScript）
- 优化服务器响应时间
- 利用缓存
Largest Contentful Paint (LCP)
定义：最大内容绘制，LCP测量视口内最大的内容元素（如图片、视频、大型文本块）呈现的时间。
重要性：LCP是页面主要内容加载完成的标志，对用户体验影响重大。
理想值：Google建议LCP应在2.5秒内。
评分标准：
| LCP时间(秒) | 颜色编码 |
|---|---|
| 0 - 2.5 | 绿色(快) |
| 2.5 - 4 | 橙色(中等) |
| 超过4 | 红色(慢) |
优化方法：
- 优化和压缩图像
- 预加载关键资源
- 实施懒加载
- 优化服务器响应时间
First Input Delay (FID)
定义：首次输入延迟，FID测量从用户首次与页面交互（如点击链接、按钮等）到浏览器实际能够响应该交互的时间。
重要性：FID反映了网站的交互性能，直接影响用户对网站响应速度的感知。
理想值：Google建议FID应在100毫秒内。
评分标准：
| FID时间(毫秒) | 颜色编码 |
|---|---|
| 0 - 100 | 绿色(快) |
| 100 - 300 | 橙色(中等) |
| 超过300 | 红色(慢) |
优化方法：
- 减少长任务，将它们分解成更小的异步任务
- 优化JavaScript执行时间
- 使用Web Workers处理复杂计算
- 延迟加载非关键JavaScript
Cumulative Layout Shift (CLS)
定义：累积布局位移，CLS测量页面生命周期内发生的所有意外布局偏移的累积分数。
重要性：CLS反映了页面的视觉稳定性，影响用户的使用体验和操作准确性。
理想值：Google建议CLS应小于0.1。
评分标准：
| CLS时间(毫秒) | 颜色编码 |
|---|---|
| 0 - 0.1 | 绿色(快) |
| 0.1 - 0.25 | 橙色(中等) |
| 超过0.25 | 红色(慢) |
优化方法：
- 为图片和视频元素指定尺寸
- 避免在现有内容上方插入内容
- 使用transform动画代替触发布局更改的属性动画
实验室指标详解
Total Blocking Time (TBT)
定义：总阻塞时间，TBT测量FCP和Time to Interactive之间主线程被阻塞的总时间。
重要性：TBT反映了页面在变得可交互之前的"繁忙"程度，影响用户与页面的早期交互体验。
理想值：虽然没有官方标准，但一般认为TBT应尽可能低，理想情况下不超过300毫秒。
评分标准：
| TBT时间(毫秒) | 颜色编码 |
|---|---|
| 0 - 300 | 绿色(快) |
| 300 - 600 | 橙色(中等) |
| 超过600 | 红色(慢) |
优化方法：
- 减少主线程工作量
- 优化JavaScript执行
- 延迟加载非关键脚本
- 使用Code Splitting分割代码
Time to Interactive (TTI)
定义：可交互时间，TTI测量页面从开始加载到完全可交互状态所需的时间。
重要性：TTI反映了用户何时可以真正开始与页面进行流畅交互，是衡量页面性能的重要指标。
理想值：虽然没有严格的标准，但一般建议TTI应在5秒内。
评分标准：
| TTI时间(秒) | 颜色编码 |
|---|---|
| 0 - 3.8 | 绿色(快) |
| 3.9 - 7.3 | 橙色(中等) |
| 超过7.3 | 红色(慢) |
优化方法：
- 最小化主线程工作
- 减少JavaScript执行时间
- 延迟加载非必要资源
- 优化关键渲染路径
如何有效使用这些指标
知道了指标之后，我们还需要知道如何有效的使用这些指标才行，下面是几个关键的动作。
建立基准：
- 使用工具如Lighthouse、WebPageTest等测量当前性能
- 设定明确的性能目标
持续监控：
- 集成性能监控工具到CI/CD流程
- 使用RUM工具在生产环境中收集真实用户数据
识别瓶颈：
- 分析性能报告，找出影响各指标的关键因素
- 使用瀑布图、火焰图等工具深入分析问题根源
制定优化策略：
- 根据指标表现，确定优化的优先级
- 针对不同指标，采取相应的优化措施
验证改进：
- 实施A/B测试，比较不同优化方案的效果
- 监控优化后的指标变化，确保达到预期效果
建立性能文化：
- 设立团队性能预算
- 将性能指标纳入开发流程和代码审查
结语
前端性能优化是一个持续的过程，需要我们系统地使用这些指标来指导优化工作。通过关注FCP、LCP、FID、CLS等关键指标，我们可以全面评估和改进用户体验的各个方面。同时，结合TBT、TTI等实验室指标，我们能够在开发阶段及早发现和解决潜在的性能问题。
当然我们需要明白的是，性能优化的最终目标是提升用户体验和业务价值。因此，在关注这些技术指标的同时，也要将它们与实际的用户体验和业务指标（如跳出率、转化率等）相结合，全面评估性能优化的效果。 这些指标你有在日常工作中使用到吗？如果是 C 端场景的话，我会去看一下真实的指标，后台系统的话能用就行，哈哈哈🤣。
