Core Web Vitals 2026 更新：INP 正式取代 FID

自 2024 年 3 月 Google 将 INP（Interaction to Next Paint） 纳入 Core Web Vitals 核心指标并取代 FID（First Input Delay）以来，网站性能优化的重心已发生明显转移。2026 年，Core Web Vitals 三大指标分别是：

指标	全称	良好阈值	需改进	较差
LCP	Largest Contentful Paint（最大内容绘制）	≤ 2.5s	2.5-4s	> 4s
INP	Interaction to Next Paint（下次绘制交互）	≤ 200ms	200-500ms	> 500ms
CLS	Cumulative Layout Shift（累积布局偏移）	≤ 0.1	0.1-0.25	> 0.25

LCP 优化：加速最大内容元素加载

LCP 通常由首屏最大图片或文字块触发，优化核心是减少资源加载时间。

1. 图片优化（最高收益）

<!-- 错误做法：懒加载首屏 LCP 图片 -->
<img src="hero.jpg" loading="lazy" />

<!-- 正确做法：预加载 + fetchpriority -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high" />
<img src="hero.webp" fetchpriority="high" decoding="async"
     width="1200" height="630" alt="Hero image" />

<!-- 使用现代图片格式和响应式图片 -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="630" fetchpriority="high" />
</picture>

2. 消除渲染阻塞资源

<!-- CSS：内联关键样式，异步加载非关键样式 -->
<style>/* 关键 CSS 内联 */</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'" />

<!-- JS：使用 defer 或 async -->
<script src="app.js" defer></script>
<script src="analytics.js" async></script>

3. 服务器端优化

• 启用 HTTP/3（QUIC）减少连接延迟
• 使用 CDN 就近分发静态资源
• 开启服务器端 Gzip/Brotli 压缩
• TTFB 目标 < 800ms（使用缓存和 Edge Computing）

INP 优化：降低交互延迟

INP 衡量用户点击/键盘/触屏交互到页面视觉响应的时间，主要受 JavaScript 主线程阻塞影响。

1. 拆分长任务（Long Tasks）

# 错误：一个长任务阻塞主线程
function processLargeData(items) {
  items.forEach(item => heavyComputation(item));
}

# 正确：使用 scheduler.yield() 让出主线程（Chrome 115+）
async function processLargeData(items) {
  for (const item of items) {
    heavyComputation(item);
    if (performance.now() % 50 < 1) {  // 每 50ms 让出一次
      await scheduler.yield();
    }
  }
}

// 兼容写法
function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

2. 将耗时任务移至 Web Worker

# main.js
const worker = new Worker('heavy-work.js');
worker.postMessage({ data: largeDataSet });
worker.onmessage = (e) => {
  updateUI(e.data.result);  // 只在主线程更新 UI
};

// heavy-work.js（在独立线程执行）
self.onmessage = (e) => {
  const result = heavyComputation(e.data.data);
  self.postMessage({ result });
};

3. 优化事件处理器

# 错误：同步阻塞的点击处理
button.addEventListener('click', () => {
  const data = fetchDataSync();  // 同步网络请求
  renderHeavyComponent(data);   // 重计算
});

# 正确：立即响应视觉反馈，异步处理逻辑
button.addEventListener('click', async () => {
  button.classList.add('loading');  // 立即视觉反馈（降低 INP）
  const data = await fetchData();
  renderComponent(data);
  button.classList.remove('loading');
});

CLS 优化：防止布局偏移

1. 为所有图片和媒体设置尺寸

<!-- 必须设置 width 和 height，CSS 自动计算宽高比 -->
<img src="photo.jpg" width="800" height="450" alt="..." />

/* CSS 响应式处理 */
img { max-width: 100%; height: auto; }

2. 为广告和嵌入内容预留空间

.ad-slot {
  min-height: 250px;        /* 为广告位预留高度 */
  background: #f5f5f5;     /* 占位背景 */
}

/* 字体加载防偏移：使用 font-display: optional */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2');
  font-display: optional;  /* 如字体未加载完则使用备用字体，不触发 CLS */
}

3. 避免动态插入内容推挤布局

# 错误：动态插入横幅推挤内容
document.body.prepend(notificationBanner);

# 正确：使用固定定位或预留空间
.notification {
  position: fixed;     /* 不占文档流 */
  bottom: 0;
  /* 或者预留 min-height 占位 */
}

快速检测工具

• PageSpeed Insights：https://pagespeed.web.dev/ — 综合评分+具体建议
• Chrome DevTools → Performance：录制真实交互，定位 Long Tasks
• Web Vitals Chrome 扩展：实时显示当前页面三项指标
• Search Console → Core Web Vitals 报告：真实用户数据（Field Data）

2026 年 WordPress 站点优化检查清单

• [ ] 首屏 LCP 图片使用 fetchpriority="high"，禁用 loading="lazy"
• [ ] 全站图片转换为 WebP/AVIF 格式
• [ ] 关键 CSS 内联，非关键 CSS 异步加载
• [ ] 所有 JS 添加 defer 属性
• [ ] 启用 CDN 和 HTTP/3
• [ ] 所有图片设置 width/height 属性
• [ ] 字体使用 font-display: swap 或 optional
• [ ] 移除未使用的 JS/CSS（目标 < 150KB JS per page）

总结

Core Web Vitals 直接影响 Google 搜索排名和用户体验。LCP 优化重点在图片预加载和 CDN；INP 优化核心是避免主线程长任务；CLS 关键是为所有动态内容预留空间。建议每次发布后用 PageSpeed Insights 验证，将三项指标控制在”良好”范围内。