Core Web Vitals 2026

Core Web Vitals 只有三个数，但每个数背后都是一堆细节。LCP 看加载、CLS 看稳定、INP 看交互，按这个顺序修，12 步全部变绿。

每一步都有“怎么测 + 怎么改”，照着打勾就行。

LCP 四步

• ·首图 preload，其他图片懒加载
• ·关键 CSS 内联，非关键延迟
• ·字体 swap + 预加载，不挡首次渲染
• ·HTML 边缘缓存，TTFB 先降下来

CLS 四步

• ·所有图片/视频写死宽高比
• ·广告位和嵌入框预留高度
• ·字体用 CSS 占位，避免 FOUT 跳动
• ·动态插入内容先占位再填充

INP 四步

• ·长任务拆成 50ms 内的小块
• ·列表用事件委托，别逐个绑
• ·输入框防抖，滚动监听节流
• ·第三方脚本全部延迟或按需加载

测量代码

用 PerformanceObserver 把三指标打到控制台，上线后接真实用户监控：

new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    console.log(e.name, Math.round(e.startTime));
  }
}).observe({ type: "largest-contentful-paint", buffered: true });

常见问题