Google 将 Core Web Vitals 作为直接排名信号。2026 年，三个指标定义了"良好"阈值：LCP 低于 2.5 秒、INP 低于 200 毫秒、CLS 低于 0.1。任何一个不达标都会失去页面体验信号。本指南解释每个指标实际测量什么，以及最有效的修复方法。

LCP — 最大内容绘制

LCP 测量从导航开始到视口中最大可见元素完成渲染的时间。实际上，LCP 元素几乎总是 Hero 图片、背景图片或大文本块。

从同源或快速 CDN 提供 LCP 图片。 每次 DNS 查询、TCP 握手和 TLS 协商在第一个字节之前增加 50–200 ms。
转换为 WebP 或 AVIF。 400 KB 的 JPEG LCP 图片变为 90–120 KB WebP—— 在 3G 连接上节省 300 ms。
为 LCP 图片添加 fetchpriority="high"。 告知浏览器优先处理此请求，高于其他图片和非关键资源。
预加载 LCP 图片。 <link rel="preload" as="image" href="/hero.webp"> 在 HTML 解析器到达 <img> 标签之前将其加入预加载队列。
绝对不要对 LCP 图片使用懒加载。 在 Hero 图片上使用 loading="lazy" 是添加 500+ ms 的常见错误。
消除 LCP 元素上方的渲染阻塞资源——非关键样式表、<head> 中的同步脚本。

INP — 交互到下次绘制

INP 于 2024 年 3 月取代了 FID（首次输入延迟）。它测量页面访问期间所有用户交互（点击、触摸和键盘输入）中最差的交互延迟。INP 捕获从输入到下一个渲染帧的完整持续时间。

分解长任务。 超过 50 ms 的 JavaScript 任务会阻塞主线程。使用 scheduler.yield() 或 setTimeout(fn, 0) 在块之间将控制权交还给浏览器。
将繁重工作移出主线程。 Web Worker 可以在不阻塞用户交互的情况下运行数据处理、解析器和序列化。
避免布局抖动。 交叉 DOM 读写会导致强制同步布局。先批量读取 DOM，再批量写入 DOM。
延迟加载第三方脚本。 分析、聊天小部件和 A/B 测试脚本是常见的 INP 杀手。使用 <script defer> 或在 load 事件后加载。

CLS 测量意外布局偏移——用户正在阅读或即将点击时元素移动的情况。分数由每次偏移的视口影响比例乘以移动距离的所有布局偏移分数之和计算。

始终指定图片宽度和高度。 没有尺寸时，浏览器在图片加载前不会预留空间，导致偏移。使用 width 和 height 属性或 CSS 的 aspect-ratio。
使用 font-display: optional 或预加载字体。 在后备字体绘制后交换的网页字体会导致布局偏移。
为广告、嵌入和 iframe 预留空间。 在内容加载前注入固定尺寸的占位容器。
避免在现有内容上方插入 DOM。 横幅、Cookie 提示和在页面顶部插入的动态内容会把所有内容向下推。

先修复 LCP——它与感知速度的相关性最高，对排名影响最大。然后是 INP——直接影响交互性，用户能感受到。最后是 CLS——通常只需修改 HTML 属性即可修复，不需要架构变更。