优化是流程，不是灵感的#

这些年我总结了一套指标驱动的首屏优化 SOP，避免”东改一点西改一点”。

第一步：诊断#

• 跑 Lighthouse 拿实验室分，看 LCP/CLS/INP 谁最差。
• 看 Network 面板：首屏发了哪些请求？哪个最大最慢？有没有 404/重复？
• 接 web-vitals 看真实用户数据（RUM），确认不是”本地快线上慢”。

第二步：按指标下药#

LCP 差（内容出现慢）

• 预加载/优先加载首屏大图（preload + 现代格式）。
• 削减阻塞渲染的 JS（defer/代码分割/异步第三方）。
• 服务端渲染（SSR）直接吐首屏 HTML，省去”等 JS 拉数据再渲染”。
• CDN 边缘缓存静态资源，就近返回。

CLS 差（布局抖动）

• 图片/视频/广告位预留宽高或 aspect-ratio。
• 字体用 font-display: swap + 预加载关键字体。
• 别在已有内容上方插入新元素（如突然弹出的 banner）。

INP 差（交互卡）

• 拆分长任务、rAF 批量更新（见运行时篇）。
• 重计算进 Web Worker。

第三步：用骨架屏撑住”等待感”#

SSR/数据回来前，先渲染骨架屏（灰块占位），用户感知更快、不白屏。配合懒加载，体验明显提升。

可照做的检查清单#

• 资源带 contenthash + 长缓存；HTML 短缓存
• 首屏 JS 体积达标（代码分割 + 按需）
• 图片 webp/avif + srcset + loading="lazy" + 预留尺寸
• 关键 CSS 内联、非关键异步
• 第三方脚本 async/defer、延迟加载
• 指标接入 RUM，优化前后对比 LCP/CLS/INP

小结#

• 优化 SOP：诊断（Lighthouse/Network/RUM）→ 按指标定位 → 对症优化 → 数据验收。
• LCP 看资源与 SSR，CLS 看预留尺寸与字体，INP 看长任务与 Worker。
• 骨架屏缓解等待感；优化必须用指标前后对比证明有效。

练习#

1. 挑你正在做的页面，按清单逐项打勾，列出 Top3 待优化项。
2. 用 Lighthouse 跑分 → 改一项（如图片格式）→ 再跑，确认指标变化。
3. 给一个数据列表页加骨架屏，对比”白屏”与”骨架”的体感差异。