性能

目标： 一个达到 Core Web Vitals 阈值且感觉即时的 PWA——启动快、对输入响应快、 视觉稳定。性能工作是一个循环：测量、修复最大的问题项、再测量。不要靠猜测优化。

各指标、阈值及其含义见 Core Web Vitals 参考；本指南是改善它们的流程。

你要改善的指标

指标	测量内容	良好
LCP	加载——最大元素绘制	≤ 2.5 秒
INP	响应性——输入到下次绘制	≤ 200 毫秒
CLS	视觉稳定性——意外布局偏移	≤ 0.1

步骤

1. 先测量，且在真实条件下。 运行 Lighthouse 并在中端设备与受限网络上采集字段数据 （Web Vitals）。未测量先优化会把精力浪费在错误的地方。定义见 Core Web Vitals 参考。

2. 修复 LCP——最大绘制。 预加载主图/字体，提供尺寸合适的现代格式，并移除阻塞渲染的 资源，让主要内容更早绘制。

3. 修复 INP——输入响应性。 拆分长任务、让出主线程、延迟非关键 JavaScript， 使点按和点击在预算内响应。

4. 修复 CLS——布局稳定性。 用显式尺寸为图片、嵌入与迟加载内容预留空间， 使页面稳定时不发生跳动。

5. 用 Service Worker 提升感知速度。 缓存的应用外壳让重复启动 感觉即时——这是 PWA 相对普通站点的结构性优势。缓存模型见 Service Worker 参考。

6. 重新测量并固化。 确认改动确实移动了指标，然后加上预算（Lighthouse CI 或 Web Vitals 检查），让回归在上线前被发现。

感知速度 vs 测量速度

数字重要，感觉也重要。骨架屏、乐观 UI 与即时启动的缓存外壳能让应用感觉快——即便某个 网络请求仍在路上——而感觉快的应用能留住用户，技术上快但卡顿的应用却会流失他们。

下一步

• 离线策略 —— 缓存是感知性能的一半。
• 进阶 —— 基础调优后再处理的生产级关切。
• Core Web Vitals 参考 —— 完整的指标定义。

← 返回指南总览。