前端首屏指标：把体感做成一张可以对照的表
做性能优化最容易犯的错，是拿一个总分当结论。把指标拆成可对照的几列，才知道这次改动动的是哪一段体验。
本文目录
我先在真实用户数据里把首屏拆成四段：DNS 与连接、首字节、资源下载、渲染完成。每一段对应不同的优化动作，混在一起就无从下手。
| 指标 | 描述的问题 | 常见误判 |
|---|---|---|
| LCP | 主要内容何时可见 | 用骨架屏把 LCP 提前，但内容还是空 |
| CLS | 布局是否稳定 | 延迟加载图片未预留尺寸 |
| INP | 交互是否及时 | 只看平均值，忽略长任务分布 |
这次改动只做了一件事：给首屏图片固定宽高比，并把它换成合适尺寸的静态资源。CLS 从 0.18 降到 0.02，LCP 也顺带降了 300ms，因为不再需要等布局重排后再加载。