Google 用 Core Web Vitals 来量化用户体验，这三个指标直接影响搜索排名。三项全绿，是每个前端开发的及格线。

LCP（Largest Contentful Paint）

LCP 衡量页面主要内容加载完成的时间，目标 < 2.5 秒。超过 4 秒红灯。

LCP 最常被以下资源拖慢：

  • 大图 → 使用 WebP/AVIF、srcset 响应式、fetchpriority="high"
  • 阻塞 CSS/JS → 内联 Critical CSS、非关键 CSS 延迟加载
  • 服务端响应慢 → CDN 缓存、TTFB 优化
1
2
3
4
<img src="hero.webp" fetchpriority="high"
     srcset="hero-640.avif 640w, hero-1280.avif 1280w"
     sizes="(max-width: 768px) 640px, 1280px"
     width="1280" height="720" alt="主图">

INP（Interaction to Next Paint）

INP 已取代 FID，衡量整个页面生命周期内所有交互的响应延迟，目标 < 200ms。

常见 INP 杀手：

  • 长任务（> 50ms 的 JS 执行）
  • 大量同步 DOM 操作
  • 未优化的第三方脚本

解决方案——拆分长任务：

1
2
3
4
5
6
7
8
9
10
11
12
13
function processLargeArray(items) {
  const CHUNK_SIZE = 100;
  let index = 0;
  function processChunk() {
    const chunk = items.slice(index, index + CHUNK_SIZE);
    chunk.forEach(item => heavyOp(item));
    index += CHUNK_SIZE;
    if (index < items.length) {
      setTimeout(processChunk, 0);  // 让出主线程
    }
  }
  processChunk();
}

CLS（Cumulative Layout Shift）

CLS 衡量页面加载过程中元素意外移动的程度，目标 < 0.1。

主要元凶：

  • 无尺寸的图片/视频 → 页面跳一下
  • 动态注入的广告/嵌入内容
  • Web 字体导致的文字闪烁（FOIT/FOUT）

解决：

1
2
3
4
5
6
7
8
9
/* 预设图片尺寸防止跳动 */
img, video { width: 100%; height: auto; }
.ad-container { min-height: 250px; }

/* 字体加载用 swap 策略 */
@font-face {
  font-family: 'MyFont';
  font-display: swap;
}

CSS Containment：布局隔离

对于独立组件使用 CSS containment 告诉浏览器内部变化不影响外部布局：

1
.card-list { contain: layout style paint; }

总结

Core Web Vitals 不是在追求虚无的分数——每一项优化背后都是真实的用户体验。LCP 让用户更快看到内容，INP 让交互流畅，CLS 让页面不跳来跳去。三项全绿，是对用户最基本的尊重。