网站打开快但搜不到排名，用 Core Web Vitals 把三指标压到绿区

有个误区得先破除：不少人觉得"我页面 200ms 就返回了，SEO 肯定没问题"。返回快不等于用户感知快，更不等于爬虫给你的体验分高。搜索引擎（尤其 Google）把真实用户体验纳入排名信号，而 Core Web Vitals（核心网页指标）就是这套体验的量化标准。它有三个指标，覆盖了加载、视觉稳定、交互响应三个阶段。

一、三个指标分别管什么

LCP 关心"用户多久能看到主要内容"，CLS 关心"看内容时页面会不会突然抖一下把按钮顶走"，INP 关心"点了之后多久有反应"。三个维度合起来，基本就是用户对"这网站卡不卡"的整体印象。

二、LCP：别让最大那块内容迟迟才来

LCP 元素通常是首屏大图或主标题。最常见的拖累是图片没优化：一张 3MB 的 banner 图慢慢加载，LCP 直接破 4 秒。

<!-- 用现代格式 + 尺寸约束，别让原图撑爆 LCP -->
<img  alt="主视觉"
     width="1200" height="630"
     fetchpriority="high"
     decoding="async" />

关键点：给图片显式声明 width/height 防止占位抖动；用 AVIF/WebP 替代 PNG/JPG；首屏关键图加 fetchpriority="high"，非首屏图延迟加载。服务端开启 HTTP/2 和 Brotli 压缩，能再砍掉一截传输时间。

三、CLS：给会晚到的元素先占好坑

布局偏移几乎都是"东西晚加载、把后面的内容挤走"造成的。最典型的就是图片和广告没留占位。

/* 图片容器先占住比例，内容晚到也不会顶别人 */
.hero {
  aspect-ratio: 1200 / 630;   /* 现代浏览器原生支持 */
  width: 100%;
  overflow: hidden;
}
/* 动态插入的内容，用 min-height 预留空间 */
.feed { min-height: 400px; }

字体也是 CLS 大户：自定义字体加载前后字形宽度不同，会造成文字"闪一下"。用 font-display: swap 让 fallback 字体先顶上，并配合 size-adjust 让两种字体度量接近，抖动能明显减小。

四、INP：把主线程上的重活拆开

INP 取代老的 FID，测的是"用户每次交互到画面响应的延迟"。如果点击后主线程正忙着跑一个超长同步任务，画面就卡住。

// 把一次性大循环切成小块，让出主线程给渲染
async function processChunks(list) {
  for (let i = 0; i < list.length; i += 50) {
    const slice = list.slice(i, i + 50);
    heavyWork(slice);
    await new Promise(r => setTimeout(r, 0)); // 让出一帧
  }
}

更省事的做法是用 requestIdleCallback 把非紧急计算挪到空闲时段，或者用 Web Worker 把 CPU 密集活丢到后台线程，主线程只负责响应用户点击。

小结

搜不到排名未必是内容问题，也可能是页面体验分被 Core Web Vitals 拖了后腿。LCP 盯住首屏最大内容，用现代图片格式、显式尺寸、高优先级加载把它压到 2.5 秒内；CLS 给图片和动态内容先占好坑、字体用 swap，控制在 0.1 以下；INP 把主线程上的重活切片或丢给 Web Worker，响应压到 200 毫秒内。三个指标到绿区，既是给用户更顺的体验，也顺手把搜索排名的信号补齐了。