PWA 的 Core Web Vitals：LCP、INP 与 CLS
一句话： Core Web Vitals 是三项以用户为中心的指标——LCP（加载）、INP（响应性）、 CLS（视觉稳定性）。当真实用户访问的 75 分位在三项上都达到 “good” 时页面通过： LCP < 2.5s、INP < 200ms、CLS < 0.1。PWA 拥有专属手段——service worker 缓存、短任务、 预留布局空间——分别驱动这三项。
每项指标衡量什么
Section titled “每项指标衡量什么”- LCP（Largest Contentful Paint，最大内容绘制）——首屏最大元素（通常是主视觉 图片、视频封面或大块文字）完成渲染所需的时间。它回答“主要内容加载得快不快？”
- INP（Interaction to Next Paint，下一次绘制交互延迟）——在整次访问中，从用户 交互（点按、点击、按键）到浏览器绘制下一帧之间的延迟。它取所有交互的高分位值， 因此捕捉到用户真正感受到的最差响应性。INP 于 2024 年 3 月取代 FID 成为 Core Web Vital；FID 只衡量首次交互的输入延迟。
- CLS（Cumulative Layout Shift，累积布局偏移）——一个无量纲分数，汇总页面生命周期内 可见元素的意外移动。它回答“我阅读或点按时画面有没有乱跳？”
“good” 阈值
Section titled ““good” 阈值”| 指标 | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5s | ≤ 4.0s | > 4.0s |
| INP | ≤ 200ms | ≤ 500ms | > 500ms |
| CLS | ≤ 0.1 | ≤ 0.25 | > 0.25 |
阈值在页面加载的 75 分位上评估，且移动端与桌面端分别计算。通过意味着 75 分位值 落在 “good” 区间——即至少 75% 的真实访问达到 good。
现场数据 vs 实验室数据
Section titled “现场数据 vs 实验室数据”- 现场数据（RUM）——通过
web-vitalsJS 库在浏览器中采集的真实用户测量，或在 Chrome 用户体验报告（CrUX）中聚合。这是 Core Web Vitals 评估与搜索所使用的数据。 INP 与 CLS 只能在现场完整测量，因为它们在整次访问中累积。 - 实验室数据——受控环境中的合成运行（Lighthouse、WebPageTest、DevTools）。非常适合 调试和在 CI 中捕捉回归，但单次脚本化加载无法重现真实交互模式或网络多样性。
- 用实验室数据定位并修复成因；以现场数据作为通过/不通过的裁决依据。
PWA 专属手段
Section titled “PWA 专属手段”- LCP——用 service worker 缓存关键路径。 cache-first 或 stale-while-revalidate
策略让重复访问从 Cache Storage API 而非网络获取应用外壳与主视觉图片，常能大幅降低
重复访问的 LCP。在 install 时预缓存外壳；为 LCP 图片设置显式
width/height与fetchpriority="high"。 - INP——让主线程远离长任务。 拆分冗长的 JavaScript 工作，用
requestIdleCallback/scheduler.postTask推迟非紧急更新，在分块之间用await scheduler.yield()让出，避免在事件处理器里做重活。水合与庞大的客户端包 是应用式 PWA 中常见的 INP 罪魁。 - CLS——在内容到达前预留空间。 为图片、视频、嵌入设置显式尺寸（或
aspect-ratio）； 为异步内容、广告、横幅预留位置；用font-display: optional/swap配合尺寸匹配的 回退字体，避免字体晚加载导致的重排；切勿在已有内容上方插入内容。
- 用现场数据（CrUX 或
web-vitals库）测量，而不仅是 Lighthouse。 - 确认三项指标在移动端 75 分位上都达到 “good”。
- 在 service worker 中预缓存应用外壳与主视觉资源，以获得快速的重复访问 LCP。
- 为 LCP 图片设置显式尺寸与
fetchpriority="high"。 - 审计长任务（> 50ms）并拆分或推迟，以保护 INP。
- 为每个图片、嵌入、广告、异步块预留空间，使 CLS < 0.1。
- 在 CI 中接入 CWV 回归检查，让实验室指标在发布前发现问题。
这对信任意味着什么
Section titled “这对信任意味着什么”快速加载、即时响应、稳定布局，正是用户与“真正的应用”相关联的线索。三项 Core Web Vitals 都达标的 PWA 会显得原生而非网页化——而由于 Chrome 将这些指标纳入搜索排名信号， 达到阈值也保护了可发现性。PWA 工具箱（service worker 缓存、短任务、预留空间）直接对应 LCP、INP、CLS，因此为可安装性优化与为 Core Web Vitals 优化彼此强化。