Core Web Vitals 中 LCP、INP、CLS 的指标含义、采集时机与优化方向

LCP、INP、CLS 是 Core Web Vitals 里比较核心的三个用户体验指标，分别关注加载速度、交互响应和视觉稳定性。

LCP：Largest Contentful Paint

LCP 表示页面中最大的内容元素渲染完成的时间，通常是首屏里的大图、视频封面、标题文本块等。它衡量的是用户觉得“主要内容加载出来了”的时间。

常见阈值是：

小于 2.5s：较好 2.5s 到 4s：需要改进 大于 4s：较差

LCP 的采集时机是从页面开始加载算起，浏览器会不断更新当前最大的可见元素，直到页面隐藏、用户发生首次交互，或者 LCP 最终稳定下来。实际线上监控一般通过 PerformanceObserver 采集 largest contentful paint。

优化方向主要有几个：

减少服务端响应时间，比如接口加缓存、CDN、SSR 优化、减少 TTFB 优化关键资源加载，比如首屏图片使用 CDN、压缩、WebP/AVIF、合理尺寸 对首屏关键图片使用 preload，避免懒加载首屏主图 减少阻塞渲染的 CSS 和 JS，