前端与浏览器 / 进阶

Core Web Vitals 优化：从指标回到用户路径

介绍三项核心体验指标的组成、现场数据与实验室数据差异，以及每类问题的优先优化路径。 LCP、INP 和 CLS 分别对应加载、交互与视觉稳定性。

10 分钟LCP · INP · CLS · Web Vitals

先分清测量环境

实验室数据可重复，适合调试；现场数据来自真实设备、网络和访问路径，适合判断用户是否真的变快。两者不一致很正常。指标应携带页面类型、设备、网络和版本维度。只看全站平均值会掩盖长尾，通常关注第 75 百分位。

让 LCP 图片出现在初始 HTML，并设置 fetchpriority=high；拆分超过 50ms 的主线程长任务；为图片、广告位和异步组件预留尺寸；减少首屏第三方脚本并延后非关键代码。

EXAMPLE / 01LCP

import { onLCP, onINP, onCLS } from 'web-vitals';

const report = metric => navigator.sendBeacon('/rum', JSON.stringify({
  name: metric.name,
  value: metric.value,
  id: metric.id,
  path: location.pathname,
  build: window.__BUILD_ID__
}));

onLCP(report);
onINP(report);
onCLS(report);

把实现拆成可验证的小块

指标需要按页面和环境拆分

最后回到真实页面检查

优化目标是用户路径，不是单次跑分