Core Web Vitals(核心 Web 指标)包含哪三项?请分别解释其含义及优化方向


LCP(Largest Contentful Paint - 最大内容绘制):此指标衡量加载性能,记录了视口内最大图像或者文版块完成渲染的时间点。合理的 LCP 应该在 2.5 秒内。优化 LCP 的关键点在于优化服务器响应,对元素本身的压缩与预加载。

INP(Interaction to Next Paint) 的衡量与优化:衡量的是用户与页面交互,到下一次页面绘制的时间。优化的核心是减少主线程的繁忙程度。比如通过代码分割,避免在页面加载时执行长时间的 Js 任务。

CLS(Cumulative Layout Shift)- 累计布局偏移:衡量的是视觉稳定性。量化的是页面中,非预期的元素偏移。合理的 CLS 应该低于 0.1。主要优化方式是预留合理的空间。比如 Image 标签设置 width height,给会动态变化的元素,设置一个占位符。