Core Web Vitals 在 2025 年迎来了演进：INP 取代了 FID，阈值有所更新，并且作为排名信号的重要性进一步提升。本指南将介绍最新的要求与优化技巧。
2025 年的 Core Web Vitals
| 指标 | 良好 | 有待改进 | 较差 |
|---|---|---|---|
| LCP | <=2.5s | 2.5s-4s | >4s |
| INP | <=200ms | 200ms-500ms | >500ms |
| CLS | <=0.1 | 0.1-0.25 | >0.25 |
INP 取代 FID
Interaction to Next Paint（INP）衡量的是页面整个生命周期中所有交互的延迟，这与仅衡量首次交互的 FID 不同。INP 涵盖了输入延迟、处理时间以及呈现延迟。
LCP 优化
服务器响应
启用 HTTP/2、压缩，并缓存静态资源。将 TTFB 控制在 800ms 以内。
图片优化
<link rel="preload" as="image" href="hero.avif" fetchpriority="high">
<img src="hero.avif" width="1200" height="600" fetchpriority="high" decoding="async">
消除阻塞渲染的资源
为脚本使用 async/defer，预加载关键 CSS，并内联关键样式。
INP 优化
拆分长任务
function processLargeDataSet(data) {
const chunkSize = 50;
let index = 0;
function processChunk() {
const chunk = data.slice(index, index + chunkSize);
index += chunkSize;
if (index < data.length) requestAnimationFrame(processChunk);
}
processChunk();
}
第三方脚本管理
为嵌入内容采用门面（facade）模式——先显示占位符，待用户点击后再加载真正的组件。
CLS 优化
始终指定图片尺寸，使用 font-display: swap，为动态内容预留空间，并对独立组件使用 CSS contain。
测量
import { onLCP, onINP, onCLS } from