Core Web Vitals 与内容站的取舍

Core Web Vitals 是排名信号之一。但对内容站来说，它更大的意义在于跳出率。

LCP：最大内容绘制

目标 < 2.5s。博客里的 LCP 元素通常是封面图或标题。

• 封面图用 <link rel="preload"> 提前加载
• 首屏图片不要加 loading="lazy"，那会推迟它的请求
• 字体用 font-display: swap，别让文字等字体

CLS：累计布局偏移

目标 < 0.1。几乎所有抖动都来自同一个原因——元素没有预留高度。

<!-- 会抖 -->
<img src="/cover.webp" alt="封面">

<!-- 不会抖 -->
<img src="/cover.webp" alt="封面" width="1200" height="630">

浏览器拿到宽高比就能提前占位。广告位、嵌入的第三方组件同理，用 CSS 写死容器高度。

INP：交互到下一次绘制

目标 < 200ms。内容站通常天然达标——因为没有多少 JavaScript 在跑。

这也是我一贯的取舍：博客的正文是纯 HTML，代码高亮在服务端做完， 浏览器端不加载 markdown 解析器、不加载高亮库。少即是快。

优先级

如果只能做一件事，压缩图片。它同时改善 LCP 和总下载量，收益远超其他微优化。