Web 性能优化

要解决什么问题

页面在桌面端 Lighthouse 分数不错、移动端却拖后腿，或 TTI 很长、CLS 导致内容跳动，往往不是没有「优化清单」，而是缺少从基线测量到验证回归的闭环。打包体积膨胀、图片未压缩、阻塞渲染的 CSS/JS、缓存头缺失、第三方脚本拖慢主线程，这些问题需要按影响面排序，而不是凭感觉改几处配置。

技能如何协助你

技能按五步组织工作流：

1. 衡量当前性能 — 运行 Lighthouse、核对 LCP/FID/CLS、看网络瀑布与包体积，先建立可对比的基线。
2. 识别问题 — 区分大包、未优化图片、慢 TTFB、布局偏移与长任务等典型瓶颈。
3. 优先优化 — 聚焦关键渲染路径、代码分割与懒加载、图片与缓存、第三方脚本等高收益项。
4. 实施改进 — 在资源、缓存头、非关键资源延迟加载等具体改动上给出可执行方向。
5. 验证改进 — 复跑审计、对比前后指标，并提醒结合 RUM 与多设备/多网络测试。

文中还附带常见陷阱（移动端与桌面差异、大包、图片 CLS、慢 TTFB）的对症思路，以及图片/JavaScript/CSS/缓存与 Core Web Vitals 的检查清单，便于做性能审计前自检。

适用边界

技能侧重 Web 前端与交付链路（资源、构建、缓存、指标），不会替代你对业务架构或后端数据库慢查询的专项排查；服务器端优化在资料中仅作为 TTFB 相关建议提及。第三方监控与具体 CI 集成需结合你现有栈自行落地。