性能指标与 Core Web Vitals

Core Web Vitals 是什么

Core Web Vitals 是 Google 定义的一套用户体验指标，专注于加载性能、交互性和视觉稳定性：

这三个指标直接影响 SEO 排名（Google 使用它们作为排名因素）。

LCP：最大内容绘制

定义

LCP 测量视口中最大可见元素（图片、视频、块级元素）的加载时间。

如何计算

用户访问 → 最大元素渲染完成 = LCP 时间

常见 LCP 元素

• 首屏大图（Hero Image）
• 背景图片
• 大段文本

优化方法

<!-- 预加载 LCP 元素 -->
<link rel="preload" href="/hero-image.jpg" as="image">

<!-- 使用现代图片格式 -->
<picture>
  <source srcset="/hero-image.avif" type="image/avif">
  <source srcset="/hero-image.webp" type="image/webp">
  <img src="/hero-image.jpg" alt="Hero">
</picture>

<!-- 优化 TTFB -->
# 服务器响应越快，LCP 越快
Cache-Control: public, max-age=31536000

LCP 差的常见原因

• 服务器响应慢（TTFB 高）
• 资源加载慢（图片未优化）
• CSS/JS 阻塞渲染

FID：首次输入延迟

定义

FID 测量从用户首次交互（点击、输入）到浏览器响应的时间。

如何计算

用户第一次交互 → 浏览器开始处理事件 = FID

优化方法

减少主线程阻塞：

// 分割长任务
function runTasks(tasks, deadline) {
  while (tasks.length > 0 && deadline.timeRemaining() > 0) {
    tasks.shift()();
  }

  if (tasks.length > 0) {
    requestIdleCallback(() => runTasks(tasks, deadline));
  }
}

// 使用 Web Worker 处理计算密集任务
const worker = new Worker('heavy-task.js');

延迟加载非关键 JS

<!-- 关键 JS 同步加载 -->
<script src="/app.js"></script>

<!-- 非关键 JS 延迟加载 -->
<script src="/analytics.js" defer></script>

CLS：累积布局偏移

定义

CLS 测量页面生命周期中发生的意外布局偏移程度。

如何计算

// layoutShift 值 = impact fraction × distance fraction
// CLS = 所有 layoutShift 值之和

优化方法

1. 给图片和视频指定尺寸

<!-- 正确：指定宽高 -->
<img src="/image.jpg" width="800" height="600" alt="">

<!-- 或使用 aspect-ratio -->
<div class="image-container" style="aspect-ratio: 4/3">
  <img src="/image.jpg" alt="">
</div>

2. 预留广告位

<div class="ad-slot" style="min-height: 250px;">
  <!-- 广告容器，预留空间 -->
</div>

3. 避免在内容上方插入动态内容

/* 错误：动态内容会导致下方内容偏移 */
.ad-container {
  position: fixed;
  top: 0;
}

/* 正确：预留空间 */
body {
  padding-top: 50px; /* 预留导航高度 */
}

性能测量

Chrome DevTools

1. Lighthouse：性能审计工具
2. Performance 面板：录制和分析页面性能
3. Network 面板：查看资源加载时间

Web Vitals JS

import { onLCP, onFID, onCLS } from 'web-vitals';

onLCP(metric => {
  console.log('LCP:', metric.value);
  // 上报到分析服务
  sendToAnalytics({ name: 'LCP', value: metric.value });
});

onFID(metric => {
  console.log('FID:', metric.value);
});

onCLS(metric => {
  console.log('CLS:', metric.value);
});

Field vs Lab 数据

• Lab 数据：在受控环境中测量（DevTools、Lighthouse）
• Field 数据：真实用户数据（Chrome UX Report）

两者都需要关注——Lab 数据用于开发调试，Field 数据用于监控真实用户体验。

这一章想说的

Core Web Vitals 是 Google 衡量用户体验的标准：

• LCP < 2.5s：优化服务器响应、预加载关键资源
• FID < 100ms：减少主线程阻塞、延迟加载非关键 JS
• CLS < 0.1：预留空间、给图片指定尺寸

性能优化不是一次性的工作，而是持续的过程——需要持续监控 Field 数据，发现问题及时优化。

延展阅读

• Web Vitals
• Google: Core Web Vitals
• web-vitals library