目标
应针对 LCP 的具体成因修复，而非盲目优化。本工作流先确定关键页面上哪个元素是 LCP 元素，再区分首字节、资源加载延迟与渲染延迟，针对占主导的阶段实施修复（优化图片、预加载或消除阻塞渲染），最后在相同限速条件下复测确认 LCP 改善。
步骤要点
- 确定关键页面上的 LCP 元素。
- 区分首字节、资源加载与渲染延迟。
- 针对主导阶段实施修复。
- 在相同限速下复测确认改善。
# identify the LCP element
npx lighthouse https://staging.example.com --only-audits=largest-contentful-paint-element --output=json验证
按顺序执行上述步骤后，逐项确认每个步骤的预期状态均已满足；只有全部预期状态成立，才认为本流程完成。若某一步未达到预期状态，应先按排错提示排查，不要跳过继续，以免掩盖问题。
排错提示
- 优化错误阶段毫无效果。
- 仅看实验数据可能漏掉真实体验。
- 无预算会让 LCP 再次回归。
适用边界
- 现场数据定优先级，实验数据做诊断。
- 修复需对准主导阶段。